diff --git a/.prettierignore b/.prettierignore
index daa44791f..9b82a8665 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,3 +10,4 @@ lexicons/tools
 lexicons/games
 js/app/assets/emoji-data-stripped.json
 **/routeTree.gen.ts
+*.html
diff --git a/js/app/package.json b/js/app/package.json
index 5b8c451b7..03cbf3004 100644
--- a/js/app/package.json
+++ b/js/app/package.json
@@ -14,7 +14,7 @@
     "export": "expo export --dump-sourcemap || expo export --dump-sourcemap",
     "check": "bash -c 'set -euo pipefail;export OUT=$(mktemp -d); npx tsc -p . --outDir $OUT; rm -rf $OUT'",
     "prebuild": "EXPO_NO_GIT_STATUS=1 expo prebuild --clean && sed -i.bak 's/org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m/org.gradle.jvmargs=-Xmx4096m -XX:MaxMetaspaceSize=1024m/' android/gradle.properties && pnpm run find-node",
-    "prepare": "which pod && pnpm run prepare-ios || echo 'not a mac, not installing pods' && mkdir -p ./public && cp -r ../components/public/locales ./public/",
+    "prepare": "which pod && pnpm run prepare-ios || echo 'not a mac, not installing pods' && mkdir -p ./public && cp -r ../i18n/public/locales ./public/",
     "prepare-ios": "cd ios && pod install && pnpm run find-node",
     "find-node": "node -p '`NODE_BINARY=${process.argv[0]}`' > ios/.xcode.env.local",
     "code-signing-dev": "mkdir -p code-signing-dev/keys code-signing-dev/certs && expo-updates codesigning:generate --key-output-directory code-signing-dev/keys --certificate-output-directory code-signing-dev/certs --certificate-validity-duration-years 10 --certificate-common-name 'Streamplace'",
diff --git a/js/web/.prettierrc b/js/web/.prettierrc
new file mode 100644
index 000000000..89a72ee22
--- /dev/null
+++ b/js/web/.prettierrc
@@ -0,0 +1,18 @@
+{
+  "proseWrap": "always",
+  "overrides": [
+    {
+      "files": "*.yml",
+      "options": {
+        "proseWrap": "preserve"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}
diff --git a/js/web/package.json b/js/web/package.json
index 53fdfc56c..66c8ab92d 100644
--- a/js/web/package.json
+++ b/js/web/package.json
@@ -38,7 +38,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-i18next": "^15.7.3",
-    "recharts": "^2.15.4",
+    "recharts": "^3.8.1",
     "sonare": "^0.0.1",
     "sonner": "^2.0.7",
     "streamplace": "workspace:*",
@@ -54,6 +54,8 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "tailwindcss": "^4.3.0",
     "typescript": "^5.8.3",
     "vite": "^6.0.0"
diff --git a/js/web/src/components/dashboard/activity-picker.tsx b/js/web/src/components/dashboard/activity-picker.tsx
index 85f055b41..bc80845c4 100644
--- a/js/web/src/components/dashboard/activity-picker.tsx
+++ b/js/web/src/components/dashboard/activity-picker.tsx
@@ -142,12 +142,12 @@ export function ActivityPicker({ value, onChange }: ActivityPickerProps) {
 
   return (
     <div className="space-y-1.5">
-      <label className="text-sm text-[var(--color-fg-muted)] mb-1 block">
+      <label className="mb-1 block text-sm text-[var(--color-fg-muted)]">
         {t("activity", { defaultValue: "Activity" })}
       </label>
 
       {/* Mode toggle */}
-      <div className="flex gap-1 mb-2">
+      <div className="mb-2 flex gap-1">
         <ModeButton
           active={mode === "game"}
           onClick={() => {
@@ -177,7 +177,7 @@ export function ActivityPicker({ value, onChange }: ActivityPickerProps) {
         ) : (
           <div>
             <div className="relative">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-[var(--color-fg-muted)] pointer-events-none" />
+              <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-[var(--color-fg-muted)]" />
               <input
                 type="text"
                 value={query}
@@ -185,7 +185,7 @@ export function ActivityPicker({ value, onChange }: ActivityPickerProps) {
                 placeholder={t("activity-search-placeholder", {
                   defaultValue: "Search for a game…",
                 })}
-                className="w-full h-8 pl-8 pr-2 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] pr-2 pl-8 text-sm text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
               />
             </div>
             {searching && (
@@ -194,29 +194,29 @@ export function ActivityPicker({ value, onChange }: ActivityPickerProps) {
               </div>
             )}
             {!searching && results.length > 0 && (
-              <div className="mt-1 rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] overflow-hidden max-h-64 overflow-y-auto">
+              <div className="mt-1 max-h-64 overflow-hidden overflow-y-auto rounded-md border border-[var(--color-border)] bg-[var(--color-bg)]">
                 {results.map((game) => (
                   <button
                     key={game.uri}
                     type="button"
                     onClick={() => selectGame(game)}
-                    className="w-full flex items-center gap-2 px-2 py-1.5 text-left hover:bg-[var(--color-bg-elevated)] transition-colors"
+                    className="flex w-full items-center gap-2 px-2 py-1.5 text-left transition-colors hover:bg-[var(--color-bg-elevated)]"
                   >
                     {game.coverUrl ? (
                       <img
                         src={game.coverUrl}
                         alt=""
-                        className="w-8 h-10 object-cover rounded-sm shrink-0 bg-[var(--color-bg-elevated)]"
+                        className="h-10 w-8 shrink-0 rounded-sm bg-[var(--color-bg-elevated)] object-cover"
                       />
                     ) : (
-                      <div className="w-8 h-10 rounded-sm bg-[var(--color-bg-elevated)] shrink-0" />
+                      <div className="h-10 w-8 shrink-0 rounded-sm bg-[var(--color-bg-elevated)]" />
                     )}
                     <div className="min-w-0 flex-1">
-                      <div className="text-sm font-medium truncate">
+                      <div className="truncate text-sm font-medium">
                         {game.name}
                       </div>
                       {game.genres && game.genres.length > 0 && (
-                        <div className="text-[10px] text-[var(--color-fg-muted)] truncate">
+                        <div className="truncate text-[10px] text-[var(--color-fg-muted)]">
                           {game.genres.join(" · ")}
                         </div>
                       )}
@@ -253,9 +253,9 @@ export function ActivityPicker({ value, onChange }: ActivityPickerProps) {
                   )
                 }
                 className={cn(
-                  "px-2.5 py-1 text-sm rounded-full border transition-colors",
+                  "rounded-full border px-2.5 py-1 text-sm transition-colors",
                   isSelected
-                    ? "bg-[var(--color-accent)] border-[var(--color-accent)] text-[var(--color-accent-fg)]"
+                    ? "border-[var(--color-accent)] bg-[var(--color-accent)] text-[var(--color-accent-fg)]"
                     : "border-[var(--color-border)] text-[var(--color-fg-muted)] hover:border-[var(--color-border-strong)]",
                 )}
               >
@@ -283,9 +283,9 @@ function ModeButton({
       type="button"
       onClick={onClick}
       className={cn(
-        "px-2.5 py-0.5 text-xs rounded-md border transition-colors",
+        "rounded-md border px-2.5 py-0.5 text-xs transition-colors",
         active
-          ? "bg-[var(--color-accent)]/15 border-[var(--color-accent)] text-[var(--color-accent)]"
+          ? "border-[var(--color-accent)] bg-[var(--color-accent)]/15 text-[var(--color-accent)]"
           : "border-[var(--color-border)] text-[var(--color-fg-muted)] hover:border-[var(--color-border-strong)]",
       )}
     >
@@ -310,19 +310,19 @@ function SelectedGameCard({
   // already showed the cover so the user has seen it.)
   void did;
   return (
-    <div className="flex items-center gap-2 p-2 rounded-md border border-[var(--color-accent)]/40 bg-[var(--color-accent)]/5">
-      <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium truncate text-[var(--color-accent)]">
+    <div className="flex items-center gap-2 rounded-md border border-[var(--color-accent)]/40 bg-[var(--color-accent)]/5 p-2">
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-[var(--color-accent)]">
           {name}
         </div>
-        <div className="text-[10px] text-[var(--color-fg-muted)] truncate">
+        <div className="truncate text-[10px] text-[var(--color-fg-muted)]">
           {uri}
         </div>
       </div>
       <button
         type="button"
         onClick={onClear}
-        className="shrink-0 p-1 rounded text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-elevated)]"
+        className="shrink-0 rounded p-1 text-[var(--color-fg-muted)] hover:bg-[var(--color-bg-elevated)] hover:text-[var(--color-fg)]"
         aria-label="Clear activity"
       >
         <X className="size-3.5" />
diff --git a/js/web/src/components/dashboard/chat-panel.tsx b/js/web/src/components/dashboard/chat-panel.tsx
index aa2d694bc..87ca8ec2c 100644
--- a/js/web/src/components/dashboard/chat-panel.tsx
+++ b/js/web/src/components/dashboard/chat-panel.tsx
@@ -38,9 +38,9 @@ export function ChatPanelWidget({ store }: { store: LivestreamStore }) {
   }, [state.chat]);
 
   return (
-    <div className="rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] flex flex-col h-full min-h-0 overflow-hidden">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
       {/* Messages */}
-      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <ChatMessages store={store} />
       </div>
 
diff --git a/js/web/src/components/dashboard/control-panel.tsx b/js/web/src/components/dashboard/control-panel.tsx
index 868ffc665..9e01b0580 100644
--- a/js/web/src/components/dashboard/control-panel.tsx
+++ b/js/web/src/components/dashboard/control-panel.tsx
@@ -210,10 +210,10 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
       onDragMove={handleDragMove}
       onDragEnd={handleDragEnd}
     >
-      <div className="flex flex-col h-full min-h-0 relative">
+      <div className="relative flex h-full min-h-0 flex-col">
         {/* Toolbar */}
         {!theatre && (
-          <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg-elevated)] shrink-0">
+          <div className="flex shrink-0 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3 py-2">
             {/* Preset selector */}
             {presets.length > 0 && (
               <select
@@ -221,7 +221,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
                 onChange={(e) => {
                   if (e.target.value) loadPreset(e.target.value);
                 }}
-                className="h-7 px-2 text-xs rounded border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)]"
+                className="h-7 rounded border border-[var(--color-border)] bg-[var(--color-bg)] px-2 text-xs text-[var(--color-fg)]"
               >
                 <option value="">Load preset…</option>
                 {presets.map((p) => (
@@ -244,12 +244,12 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
                   }}
                   placeholder="Preset name…"
                   autoFocus
-                  className="h-7 px-2 text-xs rounded border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] w-32"
+                  className="h-7 w-32 rounded border border-[var(--color-border)] bg-[var(--color-bg)] px-2 text-xs text-[var(--color-fg)]"
                 />
                 <button
                   type="button"
                   onClick={handleSavePreset}
-                  className="h-7 px-2 text-xs rounded bg-[var(--color-accent)] text-[var(--color-accent-fg)] hover:bg-[var(--color-accent-hover)] transition-colors"
+                  className="h-7 rounded bg-[var(--color-accent)] px-2 text-xs text-[var(--color-accent-fg)] transition-colors hover:bg-[var(--color-accent-hover)]"
                 >
                   Save
                 </button>
@@ -258,7 +258,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
               <button
                 type="button"
                 onClick={() => setShowSaveInput(true)}
-                className="h-7 px-2 text-xs rounded border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors flex items-center gap-1"
+                className="flex h-7 items-center gap-1 rounded border border-[var(--color-border)] px-2 text-xs text-[var(--color-fg-muted)] transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)]"
               >
                 <Save className="size-3" />
                 Save Preset
@@ -271,19 +271,19 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
                 {presets.map((p) => (
                   <div
                     key={p.name}
-                    className="flex items-center gap-0.5 h-7 px-1.5 text-xs rounded bg-[var(--color-bg)] border border-[var(--color-border)]"
+                    className="flex h-7 items-center gap-0.5 rounded border border-[var(--color-border)] bg-[var(--color-bg)] px-1.5 text-xs"
                   >
                     <button
                       type="button"
                       onClick={() => loadPreset(p.name)}
-                      className="text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+                      className="text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
                     >
                       {p.name}
                     </button>
                     <button
                       type="button"
                       onClick={() => deletePreset(p.name)}
-                      className="text-[var(--color-fg-muted)] hover:text-red-400 transition-colors"
+                      className="text-[var(--color-fg-muted)] transition-colors hover:text-red-400"
                     >
                       <Trash2 className="size-3" />
                     </button>
@@ -300,10 +300,10 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
               id="drawer-toggle-button"
               onClick={() => setDrawerOpen((v) => !v)}
               className={cn(
-                "h-7 px-2 text-xs rounded border transition-colors flex items-center gap-1",
+                "flex h-7 items-center gap-1 rounded border px-2 text-xs transition-colors",
                 drawerOpen
-                  ? "bg-[var(--color-accent)]/15 border-[var(--color-accent)] text-[var(--color-accent)]"
-                  : "border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]",
+                  ? "border-[var(--color-accent)] bg-[var(--color-accent)]/15 text-[var(--color-accent)]"
+                  : "border-[var(--color-border)] text-[var(--color-fg-muted)] hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)]",
               )}
               aria-pressed={drawerOpen}
             >
@@ -319,7 +319,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
             <button
               type="button"
               onClick={resetLayout}
-              className="h-7 px-2 text-xs rounded border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors flex items-center gap-1"
+              className="flex h-7 items-center gap-1 rounded border border-[var(--color-border)] px-2 text-xs text-[var(--color-fg-muted)] transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)]"
               title="Reset to default layout"
             >
               <RotateCcw className="size-3" />
@@ -330,7 +330,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
             <button
               type="button"
               onClick={() => setTheatre(true)}
-              className="h-7 px-2 text-xs rounded border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors flex items-center gap-1"
+              className="flex h-7 items-center gap-1 rounded border border-[var(--color-border)] px-2 text-xs text-[var(--color-fg-muted)] transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)]"
               title="Theatre mode"
               aria-label="Theatre mode"
             >
@@ -349,7 +349,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
         )}
 
         {/* Layout area */}
-        <div className="flex-1 min-h-0 p-1.5">
+        <div className="min-h-0 flex-1 p-1.5">
           <DraggableLayoutRenderer
             layout={layout}
             store={store}
@@ -369,7 +369,7 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
             onClick={() => setTheatre(false)}
             aria-label="Exit theatre mode"
             title="Exit theatre mode"
-            className="absolute top-2 right-10 z-20 h-7 px-2 text-xs rounded border border-[var(--color-border)] bg-[var(--color-bg-elevated)]/80 backdrop-blur text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:border-[var(--color-border-strong)] transition-colors flex items-center gap-1 opacity-50 hover:opacity-100"
+            className="absolute top-2 right-10 z-20 flex h-7 items-center gap-1 rounded border border-[var(--color-border)] bg-[var(--color-bg-elevated)]/80 px-2 text-xs text-[var(--color-fg-muted)] opacity-50 backdrop-blur transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)] hover:opacity-100"
           >
             <X className="size-3" />
             Exit Theatre
@@ -443,12 +443,12 @@ function WidgetDrawer({
     <>
       <div
         className={cn(
-          "absolute top-0 left-0 right-0 mx-auto max-w-2xl w-full z-10",
+          "absolute top-0 right-0 left-0 z-10 mx-auto w-full max-w-2xl",
           exiting ? "animate-fade-out-up" : "animate-fade-in-down",
         )}
         ref={outerDivRef}
       >
-        <div className="flex flex-col gap-1 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg)] rounded-b-lg shrink-0">
+        <div className="flex shrink-0 flex-col gap-1 rounded-b-lg border-b border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2">
           <div className="flex items-center justify-between">
             <div className="text-[var(--color-fg-muted)]">
               Drag a widget to add it
@@ -479,7 +479,7 @@ function DrawerWidgetCard({ widgetKey }: { widgetKey: string }) {
     <div
       ref={ref}
       className={cn(
-        "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] cursor-grab active:cursor-grabbing select-none transition-opacity hover:border-[var(--color-border-strong)]",
+        "flex cursor-grab items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-2.5 py-1.5 transition-opacity select-none hover:border-[var(--color-border-strong)] active:cursor-grabbing",
         isDragging && "opacity-50",
       )}
       style={
diff --git a/js/web/src/components/dashboard/dashboard-chrome.tsx b/js/web/src/components/dashboard/dashboard-chrome.tsx
index d8240dfd7..148c0b6dc 100644
--- a/js/web/src/components/dashboard/dashboard-chrome.tsx
+++ b/js/web/src/components/dashboard/dashboard-chrome.tsx
@@ -67,7 +67,7 @@ export default function DashboardChrome() {
 
   if (state.status !== "authenticated") {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-[var(--color-fg-muted)]">
+      <div className="flex h-full items-center justify-center text-sm text-[var(--color-fg-muted)]">
         {t("login-required", {
           defaultValue: "Please log in to access the dashboard.",
         })}
@@ -95,16 +95,16 @@ export default function DashboardChrome() {
               {!theatre && <DashboardSidebar />}
               <SidebarInset>
                 {!theatre && (
-                  <header className="flex items-center gap-2 h-12 px-4 bg-sidebar border-b border-[var(--color-border)] z-99">
+                  <header className="bg-sidebar z-99 flex h-12 items-center gap-2 border-b border-[var(--color-border)] px-4">
                     <SidebarTrigger className="-ml-1" />
-                    <h1 className="text-lg font-semibold font-display">
+                    <h1 className="font-display text-lg font-semibold">
                       {t("nav-dashboard", {
                         defaultValue: "Creator Dashboard",
                       })}
                     </h1>
                   </header>
                 )}
-                <div className="flex flex-1 flex-col min-h-0 mx-auto w-full">
+                <div className="mx-auto flex min-h-0 w-full flex-1 flex-col">
                   <Outlet />
                 </div>
               </SidebarInset>
diff --git a/js/web/src/components/dashboard/layout-renderer.tsx b/js/web/src/components/dashboard/layout-renderer.tsx
index 29457aa05..d7d6da5d1 100644
--- a/js/web/src/components/dashboard/layout-renderer.tsx
+++ b/js/web/src/components/dashboard/layout-renderer.tsx
@@ -116,7 +116,7 @@ export function LayoutRenderer({
     items.push(
       <div
         key={`child-${i}`}
-        className="flex-1 min-h-0 min-w-0"
+        className="min-h-0 min-w-0 flex-1"
         style={{ flex: `${ratio} ${ratio} 0%` }}
       >
         <LayoutRenderer
diff --git a/js/web/src/components/dashboard/multistream-status.tsx b/js/web/src/components/dashboard/multistream-status.tsx
index cfc66c0bd..7fbc37a7c 100644
--- a/js/web/src/components/dashboard/multistream-status.tsx
+++ b/js/web/src/components/dashboard/multistream-status.tsx
@@ -139,8 +139,8 @@ export function MultistreamStatusWidget({ store }: { store: LivestreamStore }) {
   }
 
   return (
-    <div className="h-full rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--color-border)]">
+    <div className="h-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
+      <div className="flex items-center gap-2 border-b border-[var(--color-border)] px-4 py-3">
         <Globe className="size-4 text-[var(--color-fg-muted)]" />
         <h3 className="text-sm font-semibold">
           {t("multistream", { defaultValue: "Multistream" })}
@@ -161,11 +161,11 @@ export function MultistreamStatusWidget({ store }: { store: LivestreamStore }) {
               key={target.uri}
               className="flex items-center justify-between px-4 py-2.5"
             >
-              <div className="flex-1 min-w-0">
+              <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm truncate">{name}</span>
+                  <span className="truncate text-sm">{name}</span>
                   {target.record.name && hostname && (
-                    <span className="text-xs text-[var(--color-fg-muted)] truncate">
+                    <span className="truncate text-xs text-[var(--color-fg-muted)]">
                       {hostname}
                     </span>
                   )}
@@ -190,7 +190,7 @@ export function MultistreamStatusWidget({ store }: { store: LivestreamStore }) {
                 onClick={() => toggleTarget(target, !target.record.active)}
                 className={cn(
                   "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2",
+                  "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:outline-none",
                   "disabled:cursor-not-allowed disabled:opacity-50",
                   target.record.active
                     ? "bg-[var(--color-accent)]"
diff --git a/js/web/src/components/dashboard/problems.tsx b/js/web/src/components/dashboard/problems.tsx
index 4d86c004f..ed2281826 100644
--- a/js/web/src/components/dashboard/problems.tsx
+++ b/js/web/src/components/dashboard/problems.tsx
@@ -51,15 +51,15 @@ export function ProblemsWidget({ store }: { store: LivestreamStore }) {
   }
 
   return (
-    <div className="h-full rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-hidden">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border)]">
+    <div className="h-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-4 py-3">
         <div className="flex items-center gap-2">
           <AlertTriangle className="size-4 text-amber-400" />
           <h3 className="text-sm font-semibold">
             {t("stream-optimization", { defaultValue: "Stream Optimization" })}
           </h3>
           {problems.length > 0 && (
-            <span className="text-xs px-1.5 py-0.5 rounded-full bg-amber-500/20 text-amber-400 font-medium">
+            <span className="rounded-full bg-amber-500/20 px-1.5 py-0.5 text-xs font-medium text-amber-400">
               {problems.length}
             </span>
           )}
@@ -67,7 +67,7 @@ export function ProblemsWidget({ store }: { store: LivestreamStore }) {
         <button
           type="button"
           onClick={() => setDismissed(true)}
-          className="p-1 rounded hover:bg-[var(--color-bg)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+          className="rounded p-1 text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-bg)] hover:text-[var(--color-fg)]"
           aria-label={t("dismiss")}
         >
           <X className="size-4" />
@@ -81,9 +81,9 @@ export function ProblemsWidget({ store }: { store: LivestreamStore }) {
             className={`flex items-start gap-3 px-4 py-3 ${severityBg(problem.severity)}`}
           >
             <ProblemIcon severity={problem.severity} />
-            <div className="flex-1 min-w-0">
+            <div className="min-w-0 flex-1">
               <div className="text-sm font-medium">{problem.code}</div>
-              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+              <div className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                 {problem.message}
               </div>
               {problem.link && (
@@ -91,7 +91,7 @@ export function ProblemsWidget({ store }: { store: LivestreamStore }) {
                   href={problem.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-xs text-[var(--color-accent)] hover:underline mt-1 inline-block"
+                  className="mt-1 inline-block text-xs text-[var(--color-accent)] hover:underline"
                 >
                   Learn more
                 </a>
diff --git a/js/web/src/components/dashboard/registry.tsx b/js/web/src/components/dashboard/registry.tsx
index 73535afad..2ead5f102 100644
--- a/js/web/src/components/dashboard/registry.tsx
+++ b/js/web/src/components/dashboard/registry.tsx
@@ -31,7 +31,7 @@ export interface WidgetMeta {
 function BlankWidget() {
   const { t } = useTranslation("settings");
   return (
-    <div className="flex items-center justify-center h-full m-2 rounded-md border-2 border-dashed border-[var(--color-border)] text-xs text-[var(--color-fg-muted)]">
+    <div className="m-2 flex h-full items-center justify-center rounded-md border-2 border-dashed border-[var(--color-border)] text-xs text-[var(--color-fg-muted)]">
       {t("drop-widget-here", { defaultValue: "Drop a widget here" })}
     </div>
   );
diff --git a/js/web/src/components/dashboard/resize-handle.tsx b/js/web/src/components/dashboard/resize-handle.tsx
index c349567e4..e688cb7d9 100644
--- a/js/web/src/components/dashboard/resize-handle.tsx
+++ b/js/web/src/components/dashboard/resize-handle.tsx
@@ -61,17 +61,10 @@ export function ResizeHandle({ direction, onResize }: ResizeHandleProps) {
       role="separator"
       aria-orientation={isHorizontal ? "vertical" : "horizontal"}
       onPointerDown={handlePointerDown}
-      className={`
-        flex-shrink-0 z-10 group
-        ${isHorizontal ? "w-1.5 cursor-col-resize" : "h-1.5 cursor-row-resize"}
-      `}
+      className={`group z-10 flex-shrink-0 ${isHorizontal ? "w-1.5 cursor-col-resize" : "h-1.5 cursor-row-resize"} `}
     >
       <div
-        className={`
-          bg-transparent group-hover:bg-[var(--color-accent)]/40 group-active:bg-[var(--color-accent)]/60
-          transition-colors
-          ${isHorizontal ? "w-0.5 h-full mx-auto" : "h-0.5 w-full my-auto"}
-        `}
+        className={`bg-transparent transition-colors group-hover:bg-[var(--color-accent)]/40 group-active:bg-[var(--color-accent)]/60 ${isHorizontal ? "mx-auto h-full w-0.5" : "my-auto h-0.5 w-full"} `}
       />
     </div>
   );
diff --git a/js/web/src/components/dashboard/stream-health.tsx b/js/web/src/components/dashboard/stream-health.tsx
index 108ba31b8..045dfa5da 100644
--- a/js/web/src/components/dashboard/stream-health.tsx
+++ b/js/web/src/components/dashboard/stream-health.tsx
@@ -195,14 +195,14 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
   const showAudience = activeAudienceIds.length > 0;
 
   return (
-    <div className="h-full rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4 flex flex-col gap-3 min-h-0">
+    <div className="flex h-full min-h-0 flex-col gap-3 rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4">
       {/* Header */}
-      <div className="flex items-center justify-between gap-2 shrink-0">
+      <div className="flex shrink-0 items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold">
             {t("stream-health", { defaultValue: "Stream Health" })}
           </h3>
-          <div className={`w-2 h-2 rounded-full ${qualityStyles.dot}`} />
+          <div className={`h-2 w-2 rounded-full ${qualityStyles.dot}`} />
           <span className={`text-xs font-medium ${qualityStyles.text}`}>
             {qualityLabel}
           </span>
@@ -214,9 +214,9 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
               type="button"
               onClick={() => setRange(r.id)}
               className={cn(
-                "px-1.5 py-0.5 text-[10px] rounded transition-colors",
+                "rounded px-1.5 py-0.5 text-[10px] transition-colors",
                 range === r.id
-                  ? "bg-[var(--color-accent)]/20 text-[var(--color-accent)] font-semibold"
+                  ? "bg-[var(--color-accent)]/20 font-semibold text-[var(--color-accent)]"
                   : "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]",
               )}
               aria-pressed={range === r.id}
@@ -233,7 +233,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
       <div
         ref={chartContainerRef}
         className={cn(
-          "flex-1 min-h-0 min-w-0 flex gap-1",
+          "flex min-h-0 min-w-0 flex-1 gap-1",
           isLandscape ? "flex-row" : "flex-col",
         )}
       >
@@ -244,7 +244,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
           <AudienceChart history={history} activeIds={activeAudienceIds} />
         )}
         {!showVideo && !showAudience && (
-          <div className="flex-1 flex items-center justify-center text-xs text-[var(--color-fg-muted)] border border-dashed border-[var(--color-border)] rounded">
+          <div className="flex flex-1 items-center justify-center rounded border border-dashed border-[var(--color-border)] text-xs text-[var(--color-fg-muted)]">
             {t("select-metric", { defaultValue: "Click a metric to overlay" })}
           </div>
         )}
@@ -252,7 +252,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
 
       {/* Metric chips — each shows its current value always, and toggles
           that metric in/out of the chart when clicked. */}
-      <div className="flex flex-wrap gap-1.5 shrink-0">
+      <div className="flex shrink-0 flex-wrap gap-1.5">
         {METRIC_KEYS.map((id) => {
           const metric = METRICS[id];
           const isActive = activeMetrics.has(id);
@@ -263,7 +263,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
               type="button"
               onClick={() => toggleMetric(id)}
               className={cn(
-                "flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs transition-colors",
+                "flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
                 isActive
                   ? "border-transparent"
                   : "border-[var(--color-border)] text-[var(--color-fg-muted)] hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)]",
@@ -289,7 +289,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
               }
             >
               <div
-                className="w-1.5 h-1.5 rounded-full shrink-0"
+                className="h-1.5 w-1.5 shrink-0 rounded-full"
                 style={{
                   backgroundColor: metric.color,
                   opacity: isActive ? 1 : 0.45,
@@ -311,7 +311,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
 
       {/* Footer stats — avg + peak per active metric (current is in the chip) */}
       {activeMetrics.size > 0 && (
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs shrink-0">
+        <div className="flex shrink-0 flex-wrap gap-x-4 gap-y-1 text-xs">
           {METRIC_KEYS.filter((id) => activeMetrics.has(id)).map((id) => {
             const metric = METRICS[id];
             const s = stats[id];
@@ -319,7 +319,7 @@ export function StreamHealthWidget({ store }: { store: LivestreamStore }) {
             return (
               <div key={id} className="flex items-center gap-1.5 tabular-nums">
                 <div
-                  className="w-1.5 h-1.5 rounded-full"
+                  className="h-1.5 w-1.5 rounded-full"
                   style={{ backgroundColor: metric.color }}
                 />
                 <span className="text-[var(--color-fg-muted)]">
@@ -351,8 +351,8 @@ function VideoChart({ history, activeIds }: ChartProps) {
     (id) => METRICS[id].yAxisId === "secondary",
   );
   return (
-    <div className="flex-1 min-w-0 min-h-0 flex flex-col">
-      <div className="text-[10px] text-[var(--color-fg-muted)] uppercase tracking-wider px-1 mb-0.5 shrink-0">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="mb-0.5 shrink-0 px-1 text-[10px] tracking-wider text-[var(--color-fg-muted)] uppercase">
         {t("video", { defaultValue: "Video" })}
       </div>
       <ResponsiveContainer width="100%" height="100%">
@@ -434,8 +434,8 @@ function VideoChart({ history, activeIds }: ChartProps) {
 function AudienceChart({ history, activeIds }: ChartProps) {
   const { t } = useTranslation("common");
   return (
-    <div className="flex-1 min-w-0 min-h-0 flex flex-col">
-      <div className="text-[10px] text-[var(--color-fg-muted)] uppercase tracking-wider px-1 mb-0.5 shrink-0">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="mb-0.5 shrink-0 px-1 text-[10px] tracking-wider text-[var(--color-fg-muted)] uppercase">
         {t("audience", { defaultValue: "Audience" })}
       </div>
       <ResponsiveContainer width="100%" height="100%">
diff --git a/js/web/src/components/dashboard/stream-info.tsx b/js/web/src/components/dashboard/stream-info.tsx
index ac0b6ab8e..34078aeed 100644
--- a/js/web/src/components/dashboard/stream-info.tsx
+++ b/js/web/src/components/dashboard/stream-info.tsx
@@ -284,7 +284,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
 
   if (page === "contentWarnings") {
     return (
-      <div className="h-full rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-auto px-2">
+      <div className="h-full overflow-auto rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-2">
         <Button
           variant="outline"
           size="sm"
@@ -294,10 +294,10 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
           <ChevronLeft />
           Back{" "}
         </Button>
-        <h2 className="text-xl font-semibold px-2 pb-1">
+        <h2 className="px-2 pb-1 text-xl font-semibold">
           {t("content-warnings", { defaultValue: "Content Warnings" })}
         </h2>
-        <p className="text-sm px-2 pb-4">
+        <p className="px-2 pb-4 text-sm">
           {t("content-warnings-info", {
             defaultValue:
               "You're required to flag your stream if it has themes that viewers may want a heads-up about.",
@@ -312,11 +312,11 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
   }
 
   return (
-    <div className="h-full rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-auto">
-      <div className="p-4 space-y-4">
+    <div className="h-full overflow-auto rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
+      <div className="space-y-4 p-4">
         {/* Title */}
         <div className="space-y-0">
-          <label className="text-sm text-[var(--color-fg-muted)]  mb-1 block">
+          <label className="mb-1 block text-sm text-[var(--color-fg-muted)]">
             {t("title", { defaultValue: "Title" })}
           </label>
           <Textarea
@@ -328,7 +328,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
             maxLength={140}
             rows={2}
           />
-          <div className="flex justify-end mt-1.5">
+          <div className="mt-1.5 flex justify-end">
             <span
               className={cn(
                 "text-xs",
@@ -349,16 +349,16 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
 
         {/* Tags */}
         <div className="space-y-1.5">
-          <label className="text-sm text-[var(--color-fg-muted)]  mb-1 block">
+          <label className="mb-1 block text-sm text-[var(--color-fg-muted)]">
             {t("tags", { defaultValue: "Tags" })}
           </label>
-          <div className="flex flex-wrap gap-1.5 items-center">
+          <div className="flex flex-wrap items-center gap-1.5">
             {tags
               .filter((t) => !t.startsWith(LANG_TAG_PREFIX))
               .map((tag) => (
                 <span
                   key={tag}
-                  className="inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded-full bg-[var(--color-accent)]/10 border border-[var(--color-accent)]/20 text-[var(--color-accent)]"
+                  className="inline-flex items-center gap-1 rounded-full border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/10 px-2 py-0.5 text-sm text-[var(--color-accent)]"
                 >
                   {tag}
                   <button
@@ -383,16 +383,16 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
                   }
                 }}
                 placeholder={t("add-tag", { defaultValue: "Add tag…" })}
-                className="flex-1 min-w-[80px] px-2 py-0 text-sm rounded-full"
+                className="min-w-[80px] flex-1 rounded-full px-2 py-0 text-sm"
               />
             )}
             {/* Language picker */}
             <DropdownMenu>
-              <DropdownMenuTrigger className="flex items-center justify-center px-2 py-1 text-sm rounded-full border border-[var(--color-border)] bg-[var(--color-bg)]">
+              <DropdownMenuTrigger className="flex items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1 text-sm">
                 {language
                   ? language
                   : t("language", { defaultValue: "Language" })}
-                <ChevronDown className="size-3 ml-1" />
+                <ChevronDown className="ml-1 size-3" />
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 {LANGUAGES.map((l) => (
@@ -447,7 +447,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
 
         {/* Thumbnail */}
         <div className="space-y-1.5">
-          <label className="text-sm text-[var(--color-fg-muted)]  mb-1 block">
+          <label className="mb-1 block text-sm text-[var(--color-fg-muted)]">
             {t("thumbnail", { defaultValue: "Thumbnail" })}
             <span className="ml-1 text-sm text-[var(--color-fg-muted)]/60">
               ({t("optional", { defaultValue: "optional" })})
@@ -458,12 +458,12 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
               <img
                 src={thumbnailPreview}
                 alt=""
-                className="w-full h-32 object-cover rounded-md"
+                className="h-32 w-full rounded-md object-cover"
               />
               <button
                 type="button"
                 onClick={handleThumbnailRemove}
-                className="absolute top-2 right-2 p-1 rounded-full bg-black/70 text-white hover:bg-black/90 transition-colors"
+                className="absolute top-2 right-2 rounded-full bg-black/70 p-1 text-white transition-colors hover:bg-black/90"
               >
                 <X className="size-3.5" />
               </button>
@@ -472,7 +472,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
             <button
               type="button"
               onClick={handleThumbnailSelect}
-              className="w-full h-24 rounded-md border-2 border-dashed border-[var(--color-border)] hover:border-[var(--color-border-strong)] flex flex-col items-center justify-center gap-1 text-[var(--color-fg-muted)] transition-colors"
+              className="flex h-24 w-full flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-[var(--color-border)] text-[var(--color-fg-muted)] transition-colors hover:border-[var(--color-border-strong)]"
             >
               <ImagePlus className="size-6" />
               <span className="text-sm">
@@ -483,8 +483,8 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
         </div>
 
         {/* Options */}
-        <div className="space-y-2 p-3 rounded-md border border-[var(--color-border)]">
-          <label className="flex items-center gap-2 cursor-pointer">
+        <div className="space-y-2 rounded-md border border-[var(--color-border)] p-3">
+          <label className="flex cursor-pointer items-center gap-2">
             <input
               type="checkbox"
               checked={createPost}
@@ -497,7 +497,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
               })}
             </span>
           </label>
-          <label className="flex items-center gap-2 cursor-pointer">
+          <label className="flex cursor-pointer items-center gap-2">
             <input
               type="checkbox"
               checked={idleTimeout}
@@ -518,7 +518,7 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
           onClick={() => setPage("contentWarnings")}
           className="w-full"
         >
-          <div className="flex-1 text-base text-left">
+          <div className="flex-1 text-left text-base">
             {t("add-content-warnings", {
               defaultValue: "Add content warnings",
             })}
@@ -547,9 +547,9 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
             onClick={handleSubmit}
             disabled={!canSubmit || !isLive}
             className={cn(
-              "w-full h-9 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2",
-              "bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)]",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "flex h-9 w-full items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors",
+              "bg-[var(--color-accent)] text-[var(--color-accent-fg)] hover:bg-[var(--color-accent-hover)]",
+              "disabled:cursor-not-allowed disabled:opacity-50",
             )}
           >
             {loading && <Loader2 className="size-4 animate-spin" />}
@@ -561,10 +561,10 @@ export function StreamInfoWidget({ store }: { store: LivestreamStore }) {
             onClick={handleEnd}
             disabled={!canEnd}
             className={cn(
-              "w-full h-9 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2",
+              "flex h-9 w-full items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors",
               canEnd
-                ? "bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20"
-                : "bg-[var(--color-bg)] text-[var(--color-fg-muted)] border border-[var(--color-border)] opacity-50 cursor-not-allowed",
+                ? "border border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20"
+                : "cursor-not-allowed border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg-muted)] opacity-50",
             )}
           >
             {endingLivestream ? (
@@ -682,23 +682,23 @@ function ContentWarningsQuickEdit({
   ]);
 
   return (
-    <div className="px-3 pb-3 pt-1 space-y-1.5">
+    <div className="space-y-1.5 px-3 pt-1 pb-3">
       {CONTENT_WARNINGS.map((cw) => {
         const checked = selected.has(cw.value);
         return (
           <label
             key={cw.value}
-            className="flex items-start gap-2 cursor-pointer text-sm"
+            className="flex cursor-pointer items-start gap-2 text-sm"
           >
             <input
               type="checkbox"
               checked={checked}
               onChange={() => toggle(cw.value)}
-              className="size-3.5 rounded border-[var(--color-border)] text-[var(--color-accent)] focus:ring-[var(--color-ring)] mt-0.5"
+              className="mt-0.5 size-3.5 rounded border-[var(--color-border)] text-[var(--color-accent)] focus:ring-[var(--color-ring)]"
             />
             <div className="space-y-0">
               <div className={"font-medium"}>{cw.label}</div>
-              <span className="text-[var(--color-fg-muted)] text-sm leading-px">
+              <span className="text-sm leading-px text-[var(--color-fg-muted)]">
                 {t(cw.label + "-description", { defaultValue: cw.description })}
               </span>
             </div>
diff --git a/js/web/src/components/dashboard/stream-monitor.tsx b/js/web/src/components/dashboard/stream-monitor.tsx
index c89faab20..0f7cc0991 100644
--- a/js/web/src/components/dashboard/stream-monitor.tsx
+++ b/js/web/src/components/dashboard/stream-monitor.tsx
@@ -61,9 +61,9 @@ export function StreamMonitorWidget({
     : t("offline", { defaultValue: "OFFLINE" });
 
   return (
-    <div className="h-full rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-hidden flex flex-col">
+    <div className="flex h-full flex-col overflow-hidden rounded-b-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
       {/* Video area */}
-      <div className="relative bg-black flex-1 h-full w-full">
+      <div className="relative h-full w-full flex-1 bg-black">
         {visible && isLive ? (
           <Player src={playlistUrl} poster={thumbnailUrl} active mode="live" />
         ) : (
@@ -72,7 +72,7 @@ export function StreamMonitorWidget({
               <img
                 src={thumbnailUrl}
                 alt=""
-                className="absolute inset-0 w-full h-full object-contain"
+                className="absolute inset-0 h-full w-full object-contain"
                 onError={(e) => {
                   (e.currentTarget as HTMLImageElement).style.visibility =
                     "hidden";
@@ -80,7 +80,7 @@ export function StreamMonitorWidget({
               />
             ) : (
               <div className="text-center">
-                <Radio className="size-8 mx-auto text-[var(--color-fg-muted)] mb-2" />
+                <Radio className="mx-auto mb-2 size-8 text-[var(--color-fg-muted)]" />
                 <p className="text-sm text-[var(--color-fg-muted)]">
                   {t("stream-offline", {
                     defaultValue: "Stream is offline",
@@ -93,9 +93,9 @@ export function StreamMonitorWidget({
 
         {/* LIVE badge */}
         {isLive && (
-          <div className="absolute top-2 left-2 pointer-events-none z-10">
-            <div className="flex items-center gap-1 bg-red-600 px-1.5 py-0.5 rounded text-white text-[10px] font-bold uppercase tracking-wide">
-              <div className="w-1.5 h-1.5 rounded-full bg-white" />
+          <div className="pointer-events-none absolute top-2 left-2 z-10">
+            <div className="flex items-center gap-1 rounded bg-red-600 px-1.5 py-0.5 text-[10px] font-bold tracking-wide text-white uppercase">
+              <div className="h-1.5 w-1.5 rounded-full bg-white" />
               {t("live-badge", { defaultValue: "LIVE" })}
             </div>
           </div>
@@ -103,20 +103,20 @@ export function StreamMonitorWidget({
       </div>
 
       {/* Info bar */}
-      <div className="flex items-center justify-between px-3 py-2 border-t border-[var(--color-border)]">
-        <div className="flex items-center gap-2 min-w-0 flex-1">
+      <div className="flex items-center justify-between border-t border-[var(--color-border)] px-3 py-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           {connectionIcon}
-          <span className="text-sm truncate">
+          <span className="truncate text-sm">
             {title || t("untitled-stream", { defaultValue: "Untitled Stream" })}
           </span>
         </div>
 
-        <div className="flex items-center gap-2 flex-shrink-0">
+        <div className="flex flex-shrink-0 items-center gap-2">
           {isLive && (
             <button
               type="button"
               onClick={() => setVisible((v) => !v)}
-              className="p-1 rounded hover:bg-[var(--color-bg)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+              className="rounded p-1 text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-bg)] hover:text-[var(--color-fg)]"
               title={
                 visible
                   ? t("hide-stream", { defaultValue: "Hide stream" })
@@ -131,7 +131,7 @@ export function StreamMonitorWidget({
             </button>
           )}
           <span
-            className={`text-xs font-medium uppercase tracking-wider ${
+            className={`text-xs font-medium tracking-wider uppercase ${
               isLive ? "text-[var(--color-fg)]" : "text-[var(--color-fg-muted)]"
             }`}
           >
diff --git a/js/web/src/components/dashboard/widget-leaf.tsx b/js/web/src/components/dashboard/widget-leaf.tsx
index 3d7c3ed70..591cf3a95 100644
--- a/js/web/src/components/dashboard/widget-leaf.tsx
+++ b/js/web/src/components/dashboard/widget-leaf.tsx
@@ -85,7 +85,7 @@ export function WidgetLeaf({
 
   if (!meta) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-[var(--color-fg-muted)]">
+      <div className="flex h-full items-center justify-center text-sm text-[var(--color-fg-muted)]">
         Unknown widget: {widgetKey}
       </div>
     );
@@ -99,7 +99,7 @@ export function WidgetLeaf({
       ref={setRefs}
       data-leaf-id={leafId}
       className={cn(
-        "relative flex flex-col h-full min-h-0 rounded-lg overflow-hidden",
+        "relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg",
         "bg-[var(--color-bg)]",
         "transition-shadow",
         isDragging && "opacity-50 ring-2 ring-[var(--color-accent)]",
@@ -107,11 +107,11 @@ export function WidgetLeaf({
       )}
     >
       {/* Title bar */}
-      <div className="flex items-center gap-2 px-2 py-1.5 bg-[var(--color-bg-elevated)] border rounded-t-lg border-b-0 border-[var(--color-border)] shrink-0">
+      <div className="flex shrink-0 items-center gap-2 rounded-t-lg border border-b-0 border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-2 py-1.5">
         {/* Drag handle */}
         <div
           ref={handleRef}
-          className="cursor-grab active:cursor-grabbing p-0.5 text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+          className="cursor-grab p-0.5 text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)] active:cursor-grabbing"
         >
           <GripVertical className="size-3.5" />
         </div>
@@ -119,11 +119,11 @@ export function WidgetLeaf({
         <Icon className="size-3.5 text-[var(--color-fg-muted)]" />
 
         {/* Widget title / swap dropdown */}
-        <div className="relative flex-1 min-w-0">
+        <div className="relative min-w-0 flex-1">
           <button
             type="button"
             onClick={() => setDropdownOpen(!dropdownOpen)}
-            className="flex items-center gap-1 text-xs font-medium text-[var(--color-fg)] hover:text-[var(--color-accent)] transition-colors truncate"
+            className="flex items-center gap-1 truncate text-xs font-medium text-[var(--color-fg)] transition-colors hover:text-[var(--color-accent)]"
           >
             {meta.title}
             {onWidgetChange && (
@@ -143,7 +143,7 @@ export function WidgetLeaf({
                 className="fixed inset-0 z-40"
                 onClick={() => setDropdownOpen(false)}
               />
-              <div className="absolute top-full left-0 mt-1 z-50 min-w-[160px] rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-md overflow-hidden">
+              <div className="absolute top-full left-0 z-50 mt-1 min-w-[160px] overflow-hidden rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-md">
                 {WIDGET_KEYS.filter((k) => k !== "blank").map((key) => {
                   const wMeta = getWidgetMeta(key);
                   if (!wMeta) return null;
@@ -157,7 +157,7 @@ export function WidgetLeaf({
                         setDropdownOpen(false);
                       }}
                       className={cn(
-                        "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
+                        "flex w-full items-center gap-2 px-3 py-1.5 text-xs transition-colors",
                         key === widgetKey
                           ? "bg-[var(--color-bg)] text-[var(--color-accent)]"
                           : "text-[var(--color-fg)] hover:bg-[var(--color-bg)]",
@@ -181,7 +181,7 @@ export function WidgetLeaf({
             onClick={onWidgetRemove}
             title="Remove slot"
             aria-label="Remove slot"
-            className="shrink-0 p-0.5 rounded text-[var(--color-fg-muted)] hover:text-destructive hover:bg-[var(--color-bg)] transition-colors"
+            className="hover:text-destructive shrink-0 rounded p-0.5 text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-bg)]"
           >
             <X className="size-3.5" />
           </button>
@@ -189,7 +189,7 @@ export function WidgetLeaf({
       </div>
 
       {/* Widget content */}
-      <div className="flex-1 min-h-0 overflow-auto">
+      <div className="min-h-0 flex-1 overflow-auto">
         <WidgetComponent store={store} user={user} />
       </div>
 
@@ -217,11 +217,11 @@ function SplitPreview({ quadrant }: { quadrant: Quadrant }) {
           "absolute bg-[var(--color-accent)]/20",
           horizontal
             ? quadrant.first
-              ? "left-0 top-0 bottom-0 w-1/2"
-              : "right-0 top-0 bottom-0 w-1/2"
+              ? "top-0 bottom-0 left-0 w-1/2"
+              : "top-0 right-0 bottom-0 w-1/2"
             : quadrant.first
-              ? "top-0 left-0 right-0 h-1/2"
-              : "bottom-0 left-0 right-0 h-1/2",
+              ? "top-0 right-0 left-0 h-1/2"
+              : "right-0 bottom-0 left-0 h-1/2",
         )}
       />
       {/* Divider line at the center */}
@@ -229,8 +229,8 @@ function SplitPreview({ quadrant }: { quadrant: Quadrant }) {
         className={cn(
           "absolute bg-[var(--color-accent)]",
           horizontal
-            ? "left-1/2 top-0 bottom-0 w-px -translate-x-1/2"
-            : "top-1/2 left-0 right-0 h-px -translate-y-1/2",
+            ? "top-0 bottom-0 left-1/2 w-px -translate-x-1/2"
+            : "top-1/2 right-0 left-0 h-px -translate-y-1/2",
         )}
       />
     </div>
diff --git a/js/web/src/components/header.tsx b/js/web/src/components/header.tsx
index 99c9b2a71..d0fa8b970 100644
--- a/js/web/src/components/header.tsx
+++ b/js/web/src/components/header.tsx
@@ -144,19 +144,19 @@ export default function Header() {
 
   return (
     <>
-      <header className="flex items-center gap-4 pt-4 pb-4 py-2 h-12 bg-sidebar">
+      <header className="bg-sidebar flex h-12 items-center gap-4 py-2 pt-4 pb-4">
         {/* logo */}
-        <div className="fixed left-4 top-2.5 z-50 flex items-center gap-2">
-          <StreamplaceSvg className="w-6 h-6 invert-100" />
-          <h1 className="text-lg hidden md:block">Streamplace</h1>
+        <div className="fixed top-2.5 left-4 z-50 flex items-center gap-2">
+          <StreamplaceSvg className="h-6 w-6 invert-100" />
+          <h1 className="hidden text-lg md:block">Streamplace</h1>
           <SidebarTrigger />
         </div>
 
         {/* search bar */}
-        <div ref={containerRef} className="flex-1 flex justify-center ml-24">
+        <div ref={containerRef} className="ml-24 flex flex-1 justify-center">
           <div className="relative w-full max-w-sm">
             <div className="relative flex items-center">
-              <Search className="absolute left-2.5 w-3.5 h-3.5 text-[var(--color-fg-muted)] pointer-events-none" />
+              <Search className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-[var(--color-fg-muted)]" />
               <input
                 ref={inputRef}
                 type="text"
@@ -167,15 +167,15 @@ export default function Header() {
                   if (query.trim() && results.length > 0) setOpen(true);
                 }}
                 placeholder={t("search-placeholder")}
-                className="w-full h-8 pl-8 pr-8 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] pr-8 pl-8 text-sm text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
               />
               {query && (
                 <button
                   type="button"
                   onClick={clearSearch}
-                  className="absolute right-2 p-0.5 rounded text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                  className="absolute right-2 rounded p-0.5 text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
                 >
-                  <X className="w-3.5 h-3.5" />
+                  <X className="h-3.5 w-3.5" />
                 </button>
               )}
             </div>
@@ -184,11 +184,11 @@ export default function Header() {
             {open && (results.length > 0 || searching) && (
               <div
                 ref={resultsRef}
-                className="absolute top-full mt-1 left-0 right-0 z-50 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-md overflow-hidden max-h-80 overflow-y-auto"
+                className="absolute top-full right-0 left-0 z-50 mt-1 max-h-80 overflow-hidden overflow-y-auto rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-md"
               >
                 {searching && results.length === 0 && (
                   <div className="flex items-center justify-center py-6">
-                    <div className="w-4 h-4 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-[var(--color-border)] border-t-[var(--color-accent)]" />
                   </div>
                 )}
                 {results.map((actor, i) => (
@@ -197,7 +197,7 @@ export default function Header() {
                     type="button"
                     onClick={() => selectResult(actor)}
                     onMouseEnter={() => setHighlightIndex(i)}
-                    className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors ${
+                    className={`flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors ${
                       i === highlightIndex
                         ? "bg-[var(--color-bg-overlay)]"
                         : "hover:bg-[var(--color-bg-overlay)]"
@@ -207,10 +207,10 @@ export default function Header() {
                       <img
                         src={avatars[actor.did].avatar}
                         alt=""
-                        className="w-7 h-7 rounded-full bg-[var(--color-bg)] object-cover flex-shrink-0"
+                        className="h-7 w-7 flex-shrink-0 rounded-full bg-[var(--color-bg)] object-cover"
                       />
                     ) : (
-                      <div className="w-7 h-7 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] flex items-center justify-center text-xs font-medium text-[var(--color-fg-muted)] flex-shrink-0">
+                      <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg-overlay)] text-xs font-medium text-[var(--color-fg-muted)]">
                         {(
                           actor.displayName?.[0] ||
                           actor.handle[0] ||
@@ -219,24 +219,24 @@ export default function Header() {
                       </div>
                     )}
                     <div className="min-w-0 flex-1">
-                      <div className="text-sm font-medium text-[var(--color-fg)] truncate">
+                      <div className="truncate text-sm font-medium text-[var(--color-fg)]">
                         {actor.displayName || actor.handle}
                       </div>
-                      <div className="text-xs text-[var(--color-fg-muted)] truncate">
+                      <div className="truncate text-xs text-[var(--color-fg-muted)]">
                         @{actor.handle}
                       </div>
                     </div>
                   </button>
                 ))}
-                <div className="w-full flex justify-center items-center border-t">
+                <div className="flex w-full items-center justify-center border-t">
                   <Link
                     to="/search"
                     search={{ q: query || undefined }}
                     onClick={() => setOpen(false)}
-                    className="flex items-center gap-2 text-center py-2 text-sm text-[var(--color-accent)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+                    className="flex items-center gap-2 py-2 text-center text-sm text-[var(--color-accent)] transition-colors hover:bg-[var(--color-bg-overlay)]"
                   >
                     {t("more-results")}{" "}
-                    <ArrowRight className="w-3.5 h-3.5 inline" />
+                    <ArrowRight className="inline h-3.5 w-3.5" />
                   </Link>
                 </div>
               </div>
@@ -275,7 +275,7 @@ export function UserProfile({
         {did ? (
           <Link
             to="/settings/account"
-            className="flex items-center gap-2 rounded-full hover:bg-[var(--color-bg-overlay)] transition-colors pl-1 pr-3 py-1"
+            className="flex items-center gap-2 rounded-full py-1 pr-3 pl-1 transition-colors hover:bg-[var(--color-bg-overlay)]"
             title={displayName ? t("signed-in-as", { handle }) : t("profile")}
             aria-label={
               displayName ? t("signed-in-as", { handle }) : t("profile")
@@ -285,13 +285,13 @@ export function UserProfile({
               <img
                 src={avatar}
                 alt=""
-                className="w-7 h-7 rounded-full bg-(--color-bg) object-cover"
+                className="h-7 w-7 rounded-full bg-(--color-bg) object-cover"
                 onError={(e) => {
                   (e.currentTarget as HTMLImageElement).style.display = "none";
                 }}
               />
             ) : (
-              <div className="w-7 h-7 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] flex items-center justify-center text-xs font-medium text-[var(--color-fg-muted)]">
+              <div className="flex h-7 w-7 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg-overlay)] text-xs font-medium text-[var(--color-fg-muted)]">
                 {(displayName?.[0] || handle?.[0] || "?").toUpperCase()}
               </div>
             )}
@@ -300,7 +300,7 @@ export function UserProfile({
           <Link
             to="/login"
             search={EMPTY_LOGIN_SEARCH}
-            className="text-sm font-medium text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+            className="text-sm font-medium text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
           >
             {t("log-in")}
           </Link>
diff --git a/js/web/src/components/player/player-controls.tsx b/js/web/src/components/player/player-controls.tsx
index 8ba728a21..6dc6674ed 100644
--- a/js/web/src/components/player/player-controls.tsx
+++ b/js/web/src/components/player/player-controls.tsx
@@ -254,30 +254,30 @@ export function PlayerControls({
     <div
       className={cn(
         "absolute inset-0 flex flex-col justify-end transition-opacity duration-200",
-        visible ? "opacity-100" : "opacity-0 pointer-events-none",
+        visible ? "opacity-100" : "pointer-events-none opacity-0",
       )}
     >
       {/* Top gradient — subtle hint that there's a controls bar.
           Not strictly needed since the bar has its own background, but
           gives the play button overlay a darker canvas. */}
-      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
 
       {bigPlay && (
         <button
           type="button"
           onClick={togglePlay}
-          className="absolute inset-0 flex items-center justify-center pointer-events-auto"
+          className="pointer-events-auto absolute inset-0 flex items-center justify-center"
           aria-label="Play"
         >
-          <div className="flex items-center gap-3 bg-white/10 hover:bg-white/20 backdrop-blur px-5 py-3 rounded-full border border-white/20 transition-colors">
-            <Play className="w-6 h-6 text-white fill-white" />
-            <span className="text-white font-medium">Play</span>
+          <div className="flex items-center gap-3 rounded-full border border-white/20 bg-white/10 px-5 py-3 backdrop-blur transition-colors hover:bg-white/20">
+            <Play className="h-6 w-6 fill-white text-white" />
+            <span className="font-medium text-white">Play</span>
           </div>
         </button>
       )}
 
       <div
-        className="relative flex items-center gap-2 sm:gap-3 px-3 py-2 bg-gradient-to-t from-black/80 to-black/0 pointer-events-auto"
+        className="pointer-events-auto relative flex items-center gap-2 bg-gradient-to-t from-black/80 to-black/0 px-3 py-2 sm:gap-3"
         // The wrapper itself is a "control surface" so clicks on the
         // gradient below the buttons don't bubble to the play handler.
         onClick={(e) => e.stopPropagation()}
@@ -285,33 +285,33 @@ export function PlayerControls({
         <button
           type="button"
           onClick={togglePlay}
-          className="text-white hover:text-white/80 transition-colors p-1"
+          className="p-1 text-white transition-colors hover:text-white/80"
           aria-label={playing ? "Pause" : "Play"}
         >
           {playing ? (
-            <Pause className="w-5 h-5 fill-white" />
+            <Pause className="h-5 w-5 fill-white" />
           ) : (
-            <Play className="w-5 h-5 fill-white" />
+            <Play className="h-5 w-5 fill-white" />
           )}
         </button>
 
         {!isLive && (
-          <span className="text-xs text-white/80 tabular-nums font-mono ml-1">
+          <span className="ml-1 font-mono text-xs text-white/80 tabular-nums">
             {formatTime(currentTime)} / {formatTime(duration)}
           </span>
         )}
 
-        <div className="flex items-center gap-1.5 group/vol">
+        <div className="group/vol flex items-center gap-1.5">
           <button
             type="button"
             onClick={toggleMute}
-            className="text-white hover:text-white/80 transition-colors p-1"
+            className="p-1 text-white transition-colors hover:text-white/80"
             aria-label={muted ? "Unmute" : "Mute"}
           >
             {muted || volume === 0 ? (
-              <VolumeX className="w-5 h-5" />
+              <VolumeX className="h-5 w-5" />
             ) : (
-              <Volume2 className="w-5 h-5" />
+              <Volume2 className="h-5 w-5" />
             )}
           </button>
           <Slider
@@ -331,14 +331,14 @@ export function PlayerControls({
             type="button"
             onClick={togglePiP}
             className={cn(
-              "transition-colors p-1",
+              "p-1 transition-colors",
               isPiP ? "text-white" : "text-white/40 hover:text-white/80",
             )}
             aria-label={
               isPiP ? "Exit picture-in-picture" : "Picture-in-picture"
             }
           >
-            <PictureInPicture className="w-5 h-5" />
+            <PictureInPicture className="h-5 w-5" />
           </button>
         )}
 
@@ -346,19 +346,19 @@ export function PlayerControls({
           type="button"
           onClick={() => setTheatre(!theatre)}
           className={cn(
-            "transition-colors p-1",
+            "p-1 transition-colors",
             theatre ? "text-white" : "text-white/40 hover:text-white/80",
           )}
           aria-label={theatre ? "Exit theatre mode" : "Theatre mode"}
         >
-          <RectangleHorizontal className="w-5 h-5" />
+          <RectangleHorizontal className="h-5 w-5" />
         </button>
 
         <button
           type="button"
           onClick={() => onShowDanmuChange(!showDanmu)}
           className={cn(
-            "transition-colors p-1",
+            "p-1 transition-colors",
             showDanmu ? "text-white" : "text-white/40 hover:text-white/80",
           )}
           aria-label={showDanmu ? "Disable danmu" : "Enable danmu"}
@@ -373,19 +373,19 @@ export function PlayerControls({
             step={0.1}
             value={currentTime}
             onValueChange={onSeekInput}
-            className="w-32 sm:w-48 accent-white h-1 cursor-pointer"
+            className="h-1 w-32 cursor-pointer accent-white sm:w-48"
             aria-label="Seek"
           />
         )}
 
         <DropdownMenu onOpenChange={setSettingsOpen}>
           <DropdownMenuTrigger
-            className="text-white hover:text-white/80 transition-colors p-1"
+            className="p-1 text-white transition-colors hover:text-white/80"
             aria-label="Settings"
           >
             <Settings
               className={cn(
-                "w-5 h-5 transition-transform duration-300",
+                "h-5 w-5 transition-transform duration-300",
                 settingsOpen && "rotate-60",
               )}
             />
@@ -393,7 +393,7 @@ export function PlayerControls({
           <DropdownMenuContent
             side="top"
             align="end"
-            className="bg-black/85 backdrop-blur border-white/10"
+            className="border-white/10 bg-black/85 backdrop-blur"
           >
             <DropdownMenuGroup>
               <DropdownMenuLabel>Latency</DropdownMenuLabel>
@@ -445,13 +445,13 @@ export function PlayerControls({
         <button
           type="button"
           onClick={toggleFullscreen}
-          className="text-white hover:text-white/80 transition-colors p-1"
+          className="p-1 text-white transition-colors hover:text-white/80"
           aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
         >
           {isFullscreen ? (
-            <Minimize className="w-5 h-5" />
+            <Minimize className="h-5 w-5" />
           ) : (
-            <Maximize className="w-5 h-5" />
+            <Maximize className="h-5 w-5" />
           )}
         </button>
       </div>
diff --git a/js/web/src/components/player/player.tsx b/js/web/src/components/player/player.tsx
index 6fde42d2c..b1ed31d81 100644
--- a/js/web/src/components/player/player.tsx
+++ b/js/web/src/components/player/player.tsx
@@ -257,7 +257,7 @@ export function Player({
   return (
     <div
       ref={containerRef}
-      className="relative w-full h-full bg-black group"
+      className="group relative h-full w-full bg-black"
       onMouseMove={bumpControls}
       onMouseLeave={() => {
         if (playing && !error) {
@@ -286,13 +286,13 @@ export function Player({
           muted
           autoPlay
           playsInline
-          className="absolute inset-0 w-full h-full object-contain"
+          className="absolute inset-0 h-full w-full object-contain"
         />
       ) : (
         <img
           src={fallbackPoster ?? poster}
           alt=""
-          className="absolute inset-0 w-full h-full object-contain bg-black"
+          className="absolute inset-0 h-full w-full bg-black object-contain"
         />
       )}
 
@@ -341,7 +341,7 @@ export function Player({
       )}
 
       {error && (
-        <div className="absolute top-2 left-2 right-2 bg-red-500/90 text-white text-sm px-3 py-2 rounded pointer-events-auto">
+        <div className="pointer-events-auto absolute top-2 right-2 left-2 rounded bg-red-500/90 px-3 py-2 text-sm text-white">
           {error}
         </div>
       )}
@@ -483,14 +483,14 @@ function StatsOverlay({
       onPointerUp={onPointerUp}
       onPointerCancel={onPointerUp}
       className={cn(
-        "absolute top-12 right-2 z-20 touch-none select-none bg-black/80 text-white text-[11px] font-mono leading-snug rounded min-w-48",
+        "absolute top-12 right-2 z-20 min-w-48 touch-none rounded bg-black/80 font-mono text-[11px] leading-snug text-white select-none",
         isDragging
           ? "cursor-grabbing shadow-lg ring-1 ring-white/20"
           : "cursor-grab hover:bg-black/90",
       )}
       style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
     >
-      <div className="font-mono text-sm text-white/40 mb-1 select-none w-full bg-muted/50 px-2.5 pt-1.5 pb-0.5 rounded-t">
+      <div className="bg-muted/50 mb-1 w-full rounded-t px-2.5 pt-1.5 pb-0.5 font-mono text-sm text-white/40 select-none">
         Stats
       </div>
       <div className="px-2.5 py-1.5">
@@ -537,7 +537,7 @@ function Row({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex items-center justify-between gap-3 text-xs">
       <span className="text-primary/50 font-mono text-sm">{label}</span>
-      <span className="tabular-nums font-mono text-sm ">{value}</span>
+      <span className="font-mono text-sm tabular-nums">{value}</span>
     </div>
   );
 }
diff --git a/js/web/src/components/player/webrtc-player.tsx b/js/web/src/components/player/webrtc-player.tsx
index 96e2c9b70..7ddf10e9e 100644
--- a/js/web/src/components/player/webrtc-player.tsx
+++ b/js/web/src/components/player/webrtc-player.tsx
@@ -138,7 +138,11 @@ export function WebRTCPlayer({
       peerConnection.addEventListener("connectionstatechange", () => {
         if (cancelled) return;
         const state = peerConnection.connectionState;
-        if (state === "failed" || state === "closed" || state === "disconnected") {
+        if (
+          state === "failed" ||
+          state === "closed" ||
+          state === "disconnected"
+        ) {
           onErrorRef.current?.("Connection lost — reconnecting");
           scheduleReconnect();
         }
diff --git a/js/web/src/components/settings/back-link.tsx b/js/web/src/components/settings/back-link.tsx
index 29273089b..c228682d3 100644
--- a/js/web/src/components/settings/back-link.tsx
+++ b/js/web/src/components/settings/back-link.tsx
@@ -10,7 +10,7 @@ function BackLink({ to, label }: BackLinkProps) {
   return (
     <Link
       to={to}
-      className="inline-flex items-center gap-1.5 text-sm text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+      className="inline-flex items-center gap-1.5 text-sm text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
     >
       <ChevronLeft size={16} />
       {label}
diff --git a/js/web/src/components/stream/chat-input.tsx b/js/web/src/components/stream/chat-input.tsx
index 25d1ee961..8c7d20334 100644
--- a/js/web/src/components/stream/chat-input.tsx
+++ b/js/web/src/components/stream/chat-input.tsx
@@ -297,11 +297,11 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
 
   if (!isAuthed) {
     return (
-      <div className="text-sm text-[var(--color-fg-muted)] text-center py-1">
+      <div className="py-1 text-center text-sm text-[var(--color-fg-muted)]">
         <Link
           to="/login"
           search={EMPTY_LOGIN_SEARCH}
-          className="text-[var(--color-accent)] hover:underline font-medium"
+          className="font-medium text-[var(--color-accent)] hover:underline"
         >
           {t("log-in")}
         </Link>{" "}
@@ -315,9 +315,9 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
   return (
     <div>
       {replyToMessage && (
-        <div className="flex items-center gap-2 px-2 py-1 mb-1 rounded bg-[var(--color-bg-overlay)] border border-[var(--color-border)] text-xs">
-          <Reply className="w-3 h-3 text-[var(--color-fg-muted)] flex-shrink-0" />
-          <span className="text-[var(--color-fg-muted)] flex-1 truncate">
+        <div className="mb-1 flex items-center gap-2 rounded border border-[var(--color-border)] bg-[var(--color-bg-overlay)] px-2 py-1 text-xs">
+          <Reply className="h-3 w-3 flex-shrink-0 text-[var(--color-fg-muted)]" />
+          <span className="flex-1 truncate text-[var(--color-fg-muted)]">
             {t("chat-replying-to", {
               handle: replyToMessage.author.handle || replyToMessage.author.did,
             })}
@@ -329,7 +329,7 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
             }
             className="text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
           >
-            <X className="w-3 h-3" />
+            <X className="h-3 w-3" />
           </button>
         </div>
       )}
@@ -339,14 +339,14 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
           e.preventDefault();
           onSubmit();
         }}
-        className="flex gap-2 items-end"
+        className="flex items-end gap-2"
       >
-        <div className="flex-1 relative rounded-md bg-[var(--color-bg)] border border-[var(--color-border)] focus-within:border-[var(--color-accent)]">
+        <div className="relative flex-1 rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] focus-within:border-[var(--color-accent)]">
           {editor && <EditorContent editor={editor} />}
 
           {textLength > 200 && (
             <span
-              className={`absolute right-2 top-1/2 -translate-y-1/2 text-[10px] tabular-nums pointer-events-none ${textLength >= MAX_LENGTH ? "text-[var(--color-danger)]" : "text-[var(--color-fg-subtle)]"}`}
+              className={`pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-[10px] tabular-nums ${textLength >= MAX_LENGTH ? "text-[var(--color-danger)]" : "text-[var(--color-fg-subtle)]"}`}
             >
               {MAX_LENGTH - textLength}
             </span>
@@ -362,16 +362,16 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
               className="h-9 w-9 flex-shrink-0"
               aria-label={t("chat-insert-emoji")}
             >
-              <Smile className="w-4 h-4" />
+              <Smile className="h-4 w-4" />
             </Button>
           </PopoverTrigger>
           <PopoverContent
             align="end"
             side="top"
-            className="p-0 w-[280px] h-[320px] overflow-hidden"
+            className="h-[320px] w-[280px] overflow-hidden p-0"
           >
             <EmojiPicker.Root onEmojiSelect={handleEmojiSelect}>
-              <EmojiPicker.Search className="w-full px-3 py-2 text-sm border-b border-[var(--color-border)] outline-none bg-[var(--color-bg)]" />
+              <EmojiPicker.Search className="w-full border-b border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm outline-none" />
               <EmojiPicker.Viewport className="h-[280px] overflow-y-auto">
                 <EmojiPicker.List />
               </EmojiPicker.Viewport>
@@ -385,7 +385,7 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
       </form>
 
       {error && (
-        <div className="text-xs text-[var(--color-danger)] mt-1">{error}</div>
+        <div className="mt-1 text-xs text-[var(--color-danger)]">{error}</div>
       )}
     </div>
   );
diff --git a/js/web/src/components/stream/chat-panel.tsx b/js/web/src/components/stream/chat-panel.tsx
index 50a16c959..8b2098c25 100644
--- a/js/web/src/components/stream/chat-panel.tsx
+++ b/js/web/src/components/stream/chat-panel.tsx
@@ -90,15 +90,15 @@ export function ChatPanel({
   }, [chat, reversed]);
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 max-w-full relative">
+    <div className="relative flex min-h-0 max-w-full flex-1 flex-col">
       <div
         ref={scrollRef}
         onScroll={handleScroll}
-        className="flex-1 overflow-y-auto overflow-x-hidden p-3 space-y-0.5"
+        className="flex-1 space-y-0.5 overflow-x-hidden overflow-y-auto p-3"
       >
         {reversed && <div ref={anchorRef} />}
         {displayMessages.length === 0 ? (
-          <div className="text-center text-[var(--color-fg-muted)] text-sm py-8">
+          <div className="py-8 text-center text-sm text-[var(--color-fg-muted)]">
             {t("chat-no-messages")}
           </div>
         ) : (
@@ -118,18 +118,18 @@ export function ChatPanel({
       {!isAtAnchor && (
         <button
           onClick={scrollToAnchor}
-          className="absolute bottom-2 right-3 w-8 h-8 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-md flex items-center justify-center text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-overlay)] transition-colors z-10"
+          className="absolute right-3 bottom-2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-[var(--color-fg-muted)] shadow-md transition-colors hover:bg-[var(--color-bg-overlay)] hover:text-[var(--color-fg)]"
           aria-label={
             reversed ? t("chat-scroll-to-top") : t("chat-scroll-to-bottom")
           }
         >
           {reversed ? (
-            <ArrowUp className="w-4 h-4" />
+            <ArrowUp className="h-4 w-4" />
           ) : (
-            <ArrowDown className="w-4 h-4" />
+            <ArrowDown className="h-4 w-4" />
           )}
           {newMessageCount > 0 && (
-            <span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-[var(--color-accent)] text-white text-[10px] font-medium flex items-center justify-center">
+            <span className="absolute -top-1 -right-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-[var(--color-accent)] px-1 text-[10px] font-medium text-white">
               {newMessageCount}
             </span>
           )}
@@ -182,34 +182,34 @@ function ChatMessage({
 
   if (isSystem) {
     return (
-      <div className="py-1.5 px-2 rounded bg-[var(--color-bg-overlay)] border border-[var(--color-border)] my-1">
-        <p className="text-sm text-center">{message.record.text}</p>
+      <div className="my-1 rounded border border-[var(--color-border)] bg-[var(--color-bg-overlay)] px-2 py-1.5">
+        <p className="text-center text-sm">{message.record.text}</p>
       </div>
     );
   }
 
   return (
-    <div className="py-0.5 group hover:bg-[var(--color-bg-overlay)] rounded px-2 -mx-2 leading-snug relative">
+    <div className="group relative -mx-2 rounded px-2 py-0.5 leading-snug hover:bg-[var(--color-bg-overlay)]">
       {/* Hover actions — visible on group hover */}
-      <div className="absolute right-0 top-0 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+      <div className="absolute top-0 right-0 z-10 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
         {state.status === "authenticated" && !isOwn && (
           <button
             type="button"
             onClick={handleReply}
-            className="p-1 rounded bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-sm text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+            className="rounded border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-1 text-[var(--color-fg-muted)] shadow-sm transition-colors hover:bg-[var(--color-bg-overlay)] hover:text-[var(--color-fg)]"
             aria-label={t("chat-reply-to-message")}
           >
-            <Reply className="w-3.5 h-3.5" />
+            <Reply className="h-3.5 w-3.5" />
           </button>
         )}
         {canPin && (
           <button
             type="button"
             onClick={handlePin}
-            className="p-1 rounded bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-sm text-[var(--color-fg-muted)] hover:text-[var(--color-accent)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+            className="rounded border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-1 text-[var(--color-fg-muted)] shadow-sm transition-colors hover:bg-[var(--color-bg-overlay)] hover:text-[var(--color-accent)]"
             aria-label={t("chat-pin-message")}
           >
-            <Pin className="w-3.5 h-3.5" />
+            <Pin className="h-3.5 w-3.5" />
           </button>
         )}
       </div>
@@ -224,11 +224,11 @@ function ChatMessage({
         <span className="text tabular-nums">
           {formatTime(message.record.createdAt)}
         </span>
-        <div className="flex-1 min-w-0 flex-wrap items-center gap-1">
+        <div className="min-w-0 flex-1 flex-wrap items-center gap-1">
           {message.badges?.map((badge, i) => (
             <span
               key={i}
-              className="items-end justify-end gap-0.5 inline-block"
+              className="inline-block items-end justify-end gap-0.5"
             >
               <BadgeIcon key={i} badge={badge} />
             </span>
@@ -293,7 +293,7 @@ function RichTextMessage({
               href={linkFtr.uri}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[var(--color-accent)] hover:underline break-all"
+              className="break-all text-[var(--color-accent)] hover:underline"
             >
               {seg.text}
             </a>
@@ -353,7 +353,7 @@ function UserHandle({
     <HoverCard trigger="click">
       <HoverCardTrigger>
         <span
-          className="font-medium cursor-pointer hover:underline"
+          className="cursor-pointer font-medium hover:underline"
           style={
             color
               ? { color: `rgb(${color.red}, ${color.green}, ${color.blue})` }
@@ -366,11 +366,11 @@ function UserHandle({
       <HoverCardContent
         side="top"
         align="start"
-        className="w-72 p-0 overflow-hidden"
+        className="w-72 overflow-hidden p-0"
       >
         {/* Banner — gradient tinted with the user's chat color */}
         <div
-          className="h-20 relative"
+          className="relative h-20"
           style={
             color
               ? {
@@ -380,23 +380,23 @@ function UserHandle({
           }
         />
 
-        <div className="px-3 pt-1 relative">
+        <div className="relative px-3 pt-1">
           {/* Avatar overlapping the banner */}
           <img
             src={author.avatar ?? undefined}
             alt=""
-            className="w-12 h-12 rounded-full border-2 border-[var(--color-bg-elevated)] bg-[var(--color-bg)] absolute -top-6 left-3"
+            className="absolute -top-6 left-3 h-12 w-12 rounded-full border-2 border-[var(--color-bg-elevated)] bg-[var(--color-bg)]"
             onError={(e) => {
               (e.currentTarget as HTMLImageElement).style.display = "none";
             }}
           />
 
           {/* Handle row */}
-          <div className="pt-7 pb-2 flex items-center justify-between gap-2">
+          <div className="flex items-center justify-between gap-2 pt-7 pb-2">
             <div className="min-w-0">
               {name !== handle && (
                 <div
-                  className="font-medium truncate"
+                  className="truncate font-medium"
                   style={
                     color
                       ? {
@@ -425,7 +425,7 @@ function UserHandle({
 
           {/* Badges */}
           {badges && badges.length > 0 && (
-            <div className="pb-2 space-y-1">
+            <div className="space-y-1 pb-2">
               {badges.map((badge, i) => (
                 <BadgeRow key={i} badge={badge} />
               ))}
@@ -473,9 +473,9 @@ function ReplyBanner({
     | undefined;
 
   return (
-    <div className="flex items-center gap-1 text-[11px] text-[var(--color-fg-subtle)] mb-0.5 truncate">
-      <Reply className="w-3 h-3 flex-shrink-0" />
-      <span className="font-medium flex-shrink-0">@{handle}</span>
+    <div className="mb-0.5 flex items-center gap-1 truncate text-[11px] text-[var(--color-fg-subtle)]">
+      <Reply className="h-3 w-3 flex-shrink-0" />
+      <span className="flex-shrink-0 font-medium">@{handle}</span>
       <span className="truncate">
         <RichTextMessage text={text} facets={facets} authors={authors} />
       </span>
@@ -525,7 +525,7 @@ function BadgeIcon({ badge }: { badge: PlaceStreamBadgeDefs.BadgeView }) {
     <img
       src={src}
       alt={badge.badgeType}
-      className="inline-block w-4 h-4 rounded-xs align-middle relative top-0.5 mr-1"
+      className="relative top-0.5 mr-1 inline-block h-4 w-4 rounded-xs align-middle"
     />
   );
 }
@@ -545,19 +545,19 @@ function BadgeRow({ badge }: { badge: PlaceStreamBadgeDefs.BadgeView }) {
     : issuerLabel(badge, t);
 
   return (
-    <div className="flex items-center gap-2 p-2 rounded-md bg-[var(--color-bg-overlay)] border border-[var(--color-border)]">
+    <div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-overlay)] p-2">
       {src ? (
         <img
           src={src}
           alt={badge.badgeType}
-          className="w-6 h-6 rounded-xs flex-shrink-0"
+          className="h-6 w-6 flex-shrink-0 rounded-xs"
         />
       ) : (
-        <div className="w-6 h-6 rounded-xs flex-shrink-0 bg-[var(--color-bg)]" />
+        <div className="h-6 w-6 flex-shrink-0 rounded-xs bg-[var(--color-bg)]" />
       )}
       <div className="min-w-0 flex-1">
-        <div className="font-medium leading-tight">{label}</div>
-        <div className="text-sm text-[var(--color-fg-muted)] leading-tight">
+        <div className="leading-tight font-medium">{label}</div>
+        <div className="text-sm leading-tight text-[var(--color-fg-muted)]">
           {issuedBy}
         </div>
       </div>
diff --git a/js/web/src/components/stream/chat-sidebar.tsx b/js/web/src/components/stream/chat-sidebar.tsx
index 63a0bf31a..cc2fea816 100644
--- a/js/web/src/components/stream/chat-sidebar.tsx
+++ b/js/web/src/components/stream/chat-sidebar.tsx
@@ -29,19 +29,19 @@ export function ChatSidebar({
   const viewers = formatViewers(state.viewers);
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 border-l">
+    <div className="flex min-h-0 flex-1 flex-col border-l">
       <SidebarHeader>
         <div className="flex items-center gap-3 py-1">
           <img
             src={author?.avatar ?? undefined}
             alt=""
-            className="w-8 h-8 rounded-full bg-[var(--color-bg)] flex-shrink-0"
+            className="h-8 w-8 flex-shrink-0 rounded-full bg-[var(--color-bg)]"
             onError={(e) => {
               (e.currentTarget as HTMLImageElement).style.display = "none";
             }}
           />
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium truncate">
+            <div className="truncate text-sm font-medium">
               {author?.displayName || author?.handle || t("streamer-fallback")}
             </div>
             {viewers && (
@@ -56,21 +56,21 @@ export function ChatSidebar({
               href={`/chat-popout/${encodeURIComponent(author?.handle || "")}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="p-1 rounded hover:bg-[var(--color-bg-overlay)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+              className="rounded p-1 text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-bg-overlay)] hover:text-[var(--color-fg)]"
               title={t("chat-pop-out")}
             >
-              <ExternalLink className="w-3.5 h-3.5" />
+              <ExternalLink className="h-3.5 w-3.5" />
             </a>
 
             {onClose && (
               <button
                 type="button"
                 onClick={onClose}
-                className="p-1 rounded hover:bg-[var(--color-bg-overlay)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors flex-shrink-0"
+                className="flex-shrink-0 rounded p-1 text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-bg-overlay)] hover:text-[var(--color-fg)]"
                 aria-label={t("chat-close")}
               >
                 <svg
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -90,7 +90,7 @@ export function ChatSidebar({
 
       <StreamNotifications store={store} />
 
-      <SidebarContent className="p-0! overflow-hidden">
+      <SidebarContent className="overflow-hidden p-0!">
         <ChatPanel store={store} />
       </SidebarContent>
 
diff --git a/js/web/src/components/stream/danmu-overlay.tsx b/js/web/src/components/stream/danmu-overlay.tsx
index b0bd2902e..abc3879a0 100644
--- a/js/web/src/components/stream/danmu-overlay.tsx
+++ b/js/web/src/components/stream/danmu-overlay.tsx
@@ -203,7 +203,7 @@ export function DanmuOverlay({
 
   return (
     <div
-      className="absolute inset-0 overflow-hidden pointer-events-none"
+      className="pointer-events-none absolute inset-0 overflow-hidden"
       style={{ opacity: opacity / 100 }}
       ref={(el) => {
         if (el) {
@@ -280,7 +280,7 @@ const DanmuMessageElement = memo(
     return (
       <div
         ref={ref}
-        className="absolute left-0 whitespace-nowrap font-semibold"
+        className="absolute left-0 font-semibold whitespace-nowrap"
         style={
           {
             top: videoTop + lane * laneHeight,
diff --git a/js/web/src/components/stream/livestream-provider.tsx b/js/web/src/components/stream/livestream-provider.tsx
index fa18fd71a..6985d6d9c 100644
--- a/js/web/src/components/stream/livestream-provider.tsx
+++ b/js/web/src/components/stream/livestream-provider.tsx
@@ -108,8 +108,8 @@ export function LivestreamProvider({
 
   if (!initialized || !store.current) {
     return (
-      <div className="flex items-center justify-center h-full">
-        <div className="w-5 h-5 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+      <div className="flex h-full items-center justify-center">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-[var(--color-border)] border-t-[var(--color-accent)]" />
       </div>
     );
   }
diff --git a/js/web/src/components/stream/mention-list.tsx b/js/web/src/components/stream/mention-list.tsx
index ed76f45bd..01541f187 100644
--- a/js/web/src/components/stream/mention-list.tsx
+++ b/js/web/src/components/stream/mention-list.tsx
@@ -103,7 +103,7 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
     return (
       <div
         ref={listRef}
-        className="bg-[var(--color-bg-elevated)] border border-[var(--color-border)] rounded-lg shadow-lg overflow-hidden max-h-64 overflow-y-auto"
+        className="max-h-64 overflow-hidden overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-lg"
       >
         {items.map((item, i) => {
           const colorStr = item.color
@@ -117,7 +117,7 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
               data-selected={isSelected}
               role="option"
               aria-selected={isSelected}
-              className={`flex items-center gap-2 w-full px-3 py-2 text-left text-sm hover:bg-[var(--color-bg-overlay)] focus:bg-[var(--color-bg-overlay)] outline-none ${isSelected ? "bg-[var(--color-bg-overlay)]" : ""}`}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm outline-none hover:bg-[var(--color-bg-overlay)] focus:bg-[var(--color-bg-overlay)] ${isSelected ? "bg-[var(--color-bg-overlay)]" : ""}`}
               // mousedown (not click) keeps the editor focused so the
               // suggestion plugin stays alive; click fires after blur and
               // would close the popup before command() runs.
@@ -131,23 +131,23 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
                 <img
                   src={item.avatar}
                   alt=""
-                  className="w-6 h-6 rounded-full flex-shrink-0"
+                  className="h-6 w-6 flex-shrink-0 rounded-full"
                   onError={(e) => {
                     (e.currentTarget as HTMLImageElement).style.display =
                       "none";
                   }}
                 />
               ) : (
-                <div className="w-6 h-6 rounded-full bg-[var(--color-muted)] flex-shrink-0" />
+                <div className="h-6 w-6 flex-shrink-0 rounded-full bg-[var(--color-muted)]" />
               )}
               <span
-                className="font-medium text-sm truncate"
+                className="truncate text-sm font-medium"
                 style={colorStr ? { color: colorStr } : undefined}
               >
                 {item.displayName || item.handle}
               </span>
               {item.displayName && item.handle && (
-                <span className="text-xs text-[var(--color-fg-muted)] truncate">
+                <span className="truncate text-xs text-[var(--color-fg-muted)]">
                   @{item.handle}
                 </span>
               )}
diff --git a/js/web/src/components/stream/stream-card.tsx b/js/web/src/components/stream/stream-card.tsx
index fb0d35b2b..c8dfb4d48 100644
--- a/js/web/src/components/stream/stream-card.tsx
+++ b/js/web/src/components/stream/stream-card.tsx
@@ -68,26 +68,26 @@ export function StreamCard({ stream, avatarUrl }: StreamCardProps) {
     <Link
       to="/$user"
       params={{ user }}
-      className="group flex flex-col rounded-xl overflow-hidden border border-[var(--color-border)] bg-[var(--color-bg-elevated)] hover:border-[var(--color-border-strong)] transition-colors"
+      className="group flex flex-col overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-colors hover:border-[var(--color-border-strong)]"
     >
       {/* Thumbnail */}
       <div className="relative aspect-video bg-black">
         <img
           src={`/api/playback/${user}/stream.jpg?ts=${(Date.now() / 120000).toFixed(0)}`}
           alt=""
-          className="absolute inset-0 w-full h-full object-cover"
+          className="absolute inset-0 h-full w-full object-cover"
           onError={(e) => {
             (e.currentTarget as HTMLImageElement).style.visibility = "hidden";
           }}
         />
         {/* Live dot */}
-        <div className="absolute top-2 left-2 flex items-center gap-1.5 bg-red-600 px-2 py-0.5 rounded text-white text-xs font-bold uppercase tracking-wide">
-          <div className="w-1.5 h-1.5 rounded-full bg-white" />
+        <div className="absolute top-2 left-2 flex items-center gap-1.5 rounded bg-red-600 px-2 py-0.5 text-xs font-bold tracking-wide text-white uppercase">
+          <div className="h-1.5 w-1.5 rounded-full bg-white" />
           {t("live-badge")}
         </div>
         {/* Viewer count */}
         {viewers !== undefined && viewers !== null && (
-          <div className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-medium">
+          <div className="absolute top-2 right-2 rounded bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur-sm">
             {formatViewers(viewers)}
           </div>
         )}
@@ -96,42 +96,42 @@ export function StreamCard({ stream, avatarUrl }: StreamCardProps) {
       {/* Content */}
       <div className="flex items-start gap-3 px-3 py-2.5">
         {/* Avatar */}
-        <div className="w-9 h-9 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] overflow-hidden flex-shrink-0">
+        <div className="h-9 w-9 flex-shrink-0 overflow-hidden rounded-full border border-[var(--color-border)] bg-[var(--color-bg-overlay)]">
           {avatarUrl ? (
             <img
               src={avatarUrl}
               alt=""
-              className="w-full h-full object-cover"
+              className="h-full w-full object-cover"
               onError={(e) => {
                 (e.currentTarget as HTMLImageElement).style.display = "none";
               }}
             />
           ) : (
-            <div className="w-full h-full flex items-center justify-center text-xs font-medium text-[var(--color-fg-muted)]">
+            <div className="flex h-full w-full items-center justify-center text-xs font-medium text-[var(--color-fg-muted)]">
               {handle[0]?.toUpperCase() ?? "?"}
             </div>
           )}
         </div>
 
         {/* Text */}
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-[var(--color-fg)] truncate">
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-[var(--color-fg)]">
             {title}
           </div>
-          <div className="text-xs text-[var(--color-fg-muted)] truncate mt-0.5">
+          <div className="mt-0.5 truncate text-xs text-[var(--color-fg-muted)]">
             @{handle}
           </div>
           {(activity || tags.length > 0) && (
-            <div className="flex items-center gap-1.5 mt-1.5 flex-wrap overflow-hidden">
+            <div className="mt-1.5 flex flex-wrap items-center gap-1.5 overflow-hidden">
               {activity && (
-                <span className="text-xs text-[var(--color-fg-muted)] flex-shrink-0">
+                <span className="flex-shrink-0 text-xs text-[var(--color-fg-muted)]">
                   {activity}
                 </span>
               )}
               {tags.slice(0, 3).map((tag) => (
                 <span
                   key={tag}
-                  className="text-xs px-2 py-0.5 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] text-[var(--color-fg-subtle)] flex-shrink-0"
+                  className="flex-shrink-0 rounded-full border border-[var(--color-border)] bg-[var(--color-bg-overlay)] px-2 py-0.5 text-xs text-[var(--color-fg-subtle)]"
                 >
                   {displayTag(tag)}
                 </span>
diff --git a/js/web/src/components/stream/stream-info.tsx b/js/web/src/components/stream/stream-info.tsx
index 26d50ad98..92336ae8a 100644
--- a/js/web/src/components/stream/stream-info.tsx
+++ b/js/web/src/components/stream/stream-info.tsx
@@ -81,43 +81,43 @@ export function StreamInfo({
   const node = useStreamplaceUrl();
 
   return (
-    <div className="mt-3 space-y-3 mx-3">
+    <div className="mx-3 mt-3 space-y-3">
       <div className="flex items-start gap-3">
         <img
           src={author?.avatar ?? undefined}
           alt=""
-          className="w-10 h-10 rounded-full bg-[var(--color-bg-elevated)] flex-shrink-0"
+          className="h-10 w-10 flex-shrink-0 rounded-full bg-[var(--color-bg-elevated)]"
           onError={(e) => {
             (e.currentTarget as HTMLImageElement).style.display = "none";
           }}
         />
 
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
             <span className="truncate">
               {author?.displayName || author?.handle || user}
             </span>
             {isLive && viewers && (
-              <span className="text-xs text-[var(--color-fg-muted)] flex-shrink-0">
+              <span className="flex-shrink-0 text-xs text-[var(--color-fg-muted)]">
                 {t("watching-count", { count: state.viewers ?? 0 })}
               </span>
             )}
           </div>
 
-          <h2 className="font-display font-semibold text-[var(--color-fg)] mt-0.5 line-clamp-2">
+          <h2 className="font-display mt-0.5 line-clamp-2 font-semibold text-[var(--color-fg)]">
             {title}
           </h2>
 
-          <div className="flex items-center gap-1.5 mt-1.5 flex-wrap">
+          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
             {activity && (
-              <span className="text-xs px-2 py-0.5 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] text-[var(--color-fg-muted)]">
+              <span className="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-2 py-0.5 text-xs text-[var(--color-fg-muted)]">
                 {activity}
               </span>
             )}
             {tags?.map((tag) => (
               <span
                 key={tag}
-                className="text-xs px-2 py-0.5 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] text-[var(--color-fg-subtle)]"
+                className="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-2 py-0.5 text-xs text-[var(--color-fg-subtle)]"
               >
                 {tag.startsWith("lang:") ? tag.slice(5).toUpperCase() : tag}
               </span>
@@ -125,7 +125,7 @@ export function StreamInfo({
           </div>
         </div>
 
-        <div className="flex items-center gap-2 flex-shrink-0">
+        <div className="flex flex-shrink-0 items-center gap-2">
           {sessionState.status === "authenticated" &&
             sessionState.session.did !== author?.did && (
               <Button type="button">
diff --git a/js/web/src/components/stream/stream-notifications.tsx b/js/web/src/components/stream/stream-notifications.tsx
index 21cdd60d3..f21daa599 100644
--- a/js/web/src/components/stream/stream-notifications.tsx
+++ b/js/web/src/components/stream/stream-notifications.tsx
@@ -112,19 +112,19 @@ function PinnedNotification({
   if (dismissed) return null;
 
   return (
-    <div className="bg-neutral-900 rounded-lg overflow-hidden">
+    <div className="overflow-hidden rounded-lg bg-neutral-900">
       <div className="flex items-center gap-2 px-3 py-2">
         <div style={{ transform: "rotate(-25deg)" }} className="flex-shrink-0">
           <Pin
-            className="w-5 h-5"
+            className="h-5 w-5"
             style={{ color: authorColor || "var(--color-accent)" }}
             fill={authorColor || "var(--color-accent)"}
           />
         </div>
-        <div className="flex-1 min-w-0 flex flex-col gap-1">
-          <div className="flex items-center gap-1 flex-wrap">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex flex-wrap items-center gap-1">
             <span
-              className="font-semibold text-sm"
+              className="text-sm font-semibold"
               style={{ color: authorColor || "var(--color-fg)" }}
             >
               {authorName}
@@ -138,24 +138,24 @@ function PinnedNotification({
             </span>
           </div>
         </div>
-        <div className="flex items-center gap-1 flex-shrink-0">
+        <div className="flex flex-shrink-0 items-center gap-1">
           {canUnpin && (
             <button
               type="button"
               onClick={handleUnpin}
-              className="p-1 rounded hover:bg-white/10 text-neutral-400 hover:text-neutral-200 transition-colors"
+              className="rounded p-1 text-neutral-400 transition-colors hover:bg-white/10 hover:text-neutral-200"
               aria-label={t("chat-unpin-message")}
             >
-              <X className="w-4 h-4" />
+              <X className="h-4 w-4" />
             </button>
           )}
           <button
             type="button"
             onClick={handleDismiss}
-            className="p-1 rounded hover:bg-white/10 text-neutral-400 hover:text-neutral-200 transition-colors"
+            className="rounded p-1 text-neutral-400 transition-colors hover:bg-white/10 hover:text-neutral-200"
             aria-label={t("chat-dismiss-pinned")}
           >
-            <EyeOff className="w-4 h-4" />
+            <EyeOff className="h-4 w-4" />
           </button>
         </div>
       </div>
@@ -179,7 +179,7 @@ function PinnedRichText({
         href={linkFtr.uri}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-blue-400 hover:underline break-all"
+        className="break-all text-blue-400 hover:underline"
       >
         {segment.text}
       </a>
@@ -213,7 +213,7 @@ function TeleportNotification({ teleport }: { teleport: any }) {
       : `0:${String(secs).padStart(2, "0")}`;
 
   return (
-    <div className="px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-info)]/10">
+    <div className="border-b border-[var(--color-border)] bg-[var(--color-info)]/10 px-3 py-2">
       <p className="text-xs text-[var(--color-fg-muted)]">
         {t("teleporting-in")}{" "}
         <span className="font-mono font-medium text-[var(--color-fg)]">
diff --git a/js/web/src/components/stream/user-offline.tsx b/js/web/src/components/stream/user-offline.tsx
index 55a12b825..e999866a0 100644
--- a/js/web/src/components/stream/user-offline.tsx
+++ b/js/web/src/components/stream/user-offline.tsx
@@ -9,11 +9,11 @@ export function UserOffline({ user }: { user: string }) {
   const { t } = useTranslation("common");
   return (
     <div className="absolute inset-0 flex items-center justify-center bg-black/60">
-      <div className="text-center px-6">
+      <div className="px-6 text-center">
         <div className="text-lg font-medium text-white/90">
           {t("stream-offline")}
         </div>
-        <div className="text-sm text-white/60 mt-1">
+        <div className="mt-1 text-sm text-white/60">
           {t("user-not-streaming", { user })}
         </div>
       </div>
diff --git a/js/web/src/components/stream/video-section.tsx b/js/web/src/components/stream/video-section.tsx
index 5387da387..c24f32289 100644
--- a/js/web/src/components/stream/video-section.tsx
+++ b/js/web/src/components/stream/video-section.tsx
@@ -128,12 +128,12 @@ export function VideoSectionInner({
             }),
       }}
     >
-      <div className="relative h-full bg-green-400 mx-auto">
+      <div className="relative mx-auto h-full bg-green-400">
         {neverLive ? (
           <img
             src={thumbnailUrl}
             alt=""
-            className="absolute inset-0 w-full h-full object-contain bg-black"
+            className="absolute inset-0 h-full w-full bg-black object-contain"
             onError={(e) => {
               (e.currentTarget as HTMLImageElement).style.visibility = "hidden";
             }}
@@ -155,20 +155,20 @@ export function VideoSectionInner({
         )}
 
         {liveness === "live" && (
-          <div className="absolute top-3 left-3 pointer-events-none z-10">
-            <div className="flex items-center gap-1.5 bg-red-600 px-2 py-0.5 rounded text-white text-xs font-bold uppercase tracking-wide">
-              <div className="w-1.5 h-1.5 rounded-full bg-white" />
+          <div className="pointer-events-none absolute top-3 left-3 z-10">
+            <div className="flex items-center gap-1.5 rounded bg-red-600 px-2 py-0.5 text-xs font-bold tracking-wide text-white uppercase">
+              <div className="h-1.5 w-1.5 rounded-full bg-white" />
               {t("live-badge")}
             </div>
           </div>
         )}
 
         {liveness === "stale" && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black/60 z-10">
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/60">
             <div className="text-center">
-              <div className="w-10 h-10 mx-auto mb-3 rounded-full border-2 border-amber-400 border-t-transparent animate-spin" />
-              <p className="text-amber-400 font-medium">{t("reconnecting")}</p>
-              <p className="text-white/60 text-sm mt-1">
+              <div className="mx-auto mb-3 h-10 w-10 animate-spin rounded-full border-2 border-amber-400 border-t-transparent" />
+              <p className="font-medium text-amber-400">{t("reconnecting")}</p>
+              <p className="mt-1 text-sm text-white/60">
                 {t("stream-may-resume")}
               </p>
             </div>
@@ -182,7 +182,7 @@ export function VideoSectionInner({
           .map((p) => (
             <div
               key={p.code}
-              className="absolute bottom-3 left-3 bg-red-500/90 text-white text-xs px-3 py-1.5 rounded"
+              className="absolute bottom-3 left-3 rounded bg-red-500/90 px-3 py-1.5 text-xs text-white"
             >
               {p.message}
             </div>
diff --git a/js/web/src/components/ui/admonition.tsx b/js/web/src/components/ui/admonition.tsx
index e8069fa28..e555438fb 100644
--- a/js/web/src/components/ui/admonition.tsx
+++ b/js/web/src/components/ui/admonition.tsx
@@ -144,7 +144,7 @@ function AdmonitionLink({
       target={external ? "_blank" : undefined}
       rel={external ? "noopener noreferrer" : undefined}
       className={cn(
-        "hover:underline font-medium",
+        "font-medium hover:underline",
         colors[ctx.type as keyof typeof colors],
         size,
       )}
diff --git a/js/web/src/components/ui/card.tsx b/js/web/src/components/ui/card.tsx
index c1d429119..23ebecfa9 100644
--- a/js/web/src/components/ui/card.tsx
+++ b/js/web/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className,
       )}
       {...props}
@@ -24,7 +24,7 @@ function CardMenuSection({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]",
+        "divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]",
         className,
       )}
       {...props}
@@ -66,7 +66,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -100,7 +100,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        "bg-muted/50 flex items-center rounded-b-xl border-t p-(--card-spacing)",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/dialog.tsx b/js/web/src/components/ui/dialog.tsx
index baa8fcabc..dfa831c53 100644
--- a/js/web/src/components/ui/dialog.tsx
+++ b/js/web/src/components/ui/dialog.tsx
@@ -53,7 +53,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-6 shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0",
+          "fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-6 shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0",
           className as string,
         )}
         {...props}
@@ -83,7 +83,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-1 mb-4", className)}
+      className={cn("mb-4 flex flex-col gap-1", className)}
       {...props}
     />
   );
@@ -93,7 +93,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn("flex justify-end gap-2 mt-6", className)}
+      className={cn("mt-6 flex justify-end gap-2", className)}
       {...props}
     />
   );
@@ -104,7 +104,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "text-lg font-semibold font-display text-foreground",
+        "font-display text-foreground text-lg font-semibold",
         className as string,
       )}
       {...props}
@@ -119,7 +119,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className as string)}
+      className={cn("text-muted-foreground text-sm", className as string)}
       {...props}
     />
   );
diff --git a/js/web/src/components/ui/dropdown-menu.tsx b/js/web/src/components/ui/dropdown-menu.tsx
index 1c5232efe..9b2f48b29 100644
--- a/js/web/src/components/ui/dropdown-menu.tsx
+++ b/js/web/src/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
             className,
           )}
           {...props}
@@ -68,7 +68,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className,
       )}
       {...props}
@@ -91,7 +91,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -139,7 +139,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100",
         className,
       )}
       align={align}
@@ -165,7 +165,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -206,7 +206,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -231,7 +231,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
   );
@@ -245,7 +245,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground",
+        "text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/input-group.tsx b/js/web/src/components/ui/input-group.tsx
index 3ef421328..887ba4f1e 100644
--- a/js/web/src/components/ui/input-group.tsx
+++ b/js/web/src/components/ui/input-group.tsx
@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className,
       )}
       {...props}
@@ -108,7 +108,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/input.tsx b/js/web/src/components/ui/input.tsx
index 008208200..cb6f0dd7c 100644
--- a/js/web/src/components/ui/input.tsx
+++ b/js/web/src/components/ui/input.tsx
@@ -9,10 +9,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "border-input file:text-foreground placeholder:text-muted-foreground disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         // i don't get it
         !className?.includes("focus-visible:ring-0") &&
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/sheet.tsx b/js/web/src/components/ui/sheet.tsx
index 0c934e81f..57f3b12b6 100644
--- a/js/web/src/components/ui/sheet.tsx
+++ b/js/web/src/components/ui/sheet.tsx
@@ -53,7 +53,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className as string,
         )}
         {...props}
@@ -104,7 +104,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
     <SheetPrimitive.Title
       data-slot="sheet-title"
       className={cn(
-        "text-base font-medium font-display text-foreground",
+        "font-display text-foreground text-base font-medium",
         className as string,
       )}
       {...props}
@@ -119,7 +119,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className as string)}
+      className={cn("text-muted-foreground text-sm", className as string)}
       {...props}
     />
   );
diff --git a/js/web/src/components/ui/sidebar.tsx b/js/web/src/components/ui/sidebar.tsx
index 41418dc31..c2ba7a617 100644
--- a/js/web/src/components/ui/sidebar.tsx
+++ b/js/web/src/components/ui/sidebar.tsx
@@ -138,7 +138,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
           className,
         )}
         {...props}
@@ -169,7 +169,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className,
         )}
         {...props}
@@ -187,7 +187,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -207,7 +207,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden text-sidebar-foreground md:block"
+      className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -242,7 +242,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
         >
           {children}
         </div>
@@ -289,10 +289,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className,
@@ -307,7 +307,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
       {...props}
@@ -323,7 +323,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("h-8 w-full bg-background shadow-none", className)}
+      className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
   );
@@ -359,7 +359,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
   );
@@ -589,7 +589,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
         className,
       )}
       {...props}
@@ -641,7 +641,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/skeleton.tsx b/js/web/src/components/ui/skeleton.tsx
index 26bc059db..42e237bfe 100644
--- a/js/web/src/components/ui/skeleton.tsx
+++ b/js/web/src/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("bg-muted animate-pulse rounded-md", className)}
       {...props}
     />
   );
diff --git a/js/web/src/components/ui/slider.tsx b/js/web/src/components/ui/slider.tsx
index 700e8faae..7da114d51 100644
--- a/js/web/src/components/ui/slider.tsx
+++ b/js/web/src/components/ui/slider.tsx
@@ -30,18 +30,18 @@ function Slider({
       <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
         <SliderPrimitive.Track
           data-slot="slider-track"
-          className="relative grow h-1 w-full overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+          className="bg-muted relative h-1 w-full grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
         >
           <SliderPrimitive.Indicator
             data-slot="slider-range"
-            className="bg-primary select-none h-1 data-horizontal:h-full data-vertical:w-full"
+            className="bg-primary h-1 select-none data-horizontal:h-full data-vertical:w-full"
           />
         </SliderPrimitive.Track>
         {Array.from({ length: _values.length }, (_, index) => (
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="relative block size-3 shrink-0 rounded-full border border-ring bg-foreground ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+            className="border-ring bg-foreground ring-ring/50 relative block size-3 shrink-0 rounded-full border transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
diff --git a/js/web/src/components/ui/switch.tsx b/js/web/src/components/ui/switch.tsx
index a92232e62..af2e20b45 100644
--- a/js/web/src/components/ui/switch.tsx
+++ b/js/web/src/components/ui/switch.tsx
@@ -24,7 +24,7 @@ function Switch({
       disabled={disabled}
       onClick={() => onCheckedChange(!checked)}
       className={cn(
-        "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+        "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         checked ? "bg-info" : "bg-danger",
         isSmall ? "h-4 w-7" : "h-5 w-9",
         className,
diff --git a/js/web/src/components/ui/textarea.tsx b/js/web/src/components/ui/textarea.tsx
index d102c701b..416880539 100644
--- a/js/web/src/components/ui/textarea.tsx
+++ b/js/web/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className,
       )}
       {...props}
diff --git a/js/web/src/components/ui/tooltip.tsx b/js/web/src/components/ui/tooltip.tsx
index 30bcda520..75aa20118 100644
--- a/js/web/src/components/ui/tooltip.tsx
+++ b/js/web/src/components/ui/tooltip.tsx
@@ -50,13 +50,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
             className as string,
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
diff --git a/js/web/src/components/video/video-card.tsx b/js/web/src/components/video/video-card.tsx
index c423fe281..4afcc3756 100644
--- a/js/web/src/components/video/video-card.tsx
+++ b/js/web/src/components/video/video-card.tsx
@@ -38,17 +38,17 @@ export function VideoCard({
       className="group flex flex-col gap-2"
     >
       {/* Thumbnail */}
-      <div className="relative aspect-video rounded-xl overflow-hidden bg-[var(--color-bg-elevated)]">
+      <div className="relative aspect-video overflow-hidden rounded-xl bg-[var(--color-bg-elevated)]">
         {thumbnailUrl ? (
           <img
             src={thumbnailUrl}
             alt=""
-            className="absolute inset-0 w-full h-full object-cover"
+            className="absolute inset-0 h-full w-full object-cover"
           />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center text-[var(--color-fg-muted)]">
             <svg
-              className="w-8 h-8 opacity-40"
+              className="h-8 w-8 opacity-40"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -63,7 +63,7 @@ export function VideoCard({
           </div>
         )}
         {duration && (
-          <div className="absolute bottom-1.5 right-1.5 bg-black/80 rounded px-1.5 py-0.5 text-white text-xs font-medium tabular-nums">
+          <div className="absolute right-1.5 bottom-1.5 rounded bg-black/80 px-1.5 py-0.5 text-xs font-medium text-white tabular-nums">
             {duration}
           </div>
         )}
@@ -71,27 +71,27 @@ export function VideoCard({
 
       {/* Metadata */}
       <div className="flex items-start gap-2.5 px-0.5">
-        <div className="w-8 h-8 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] overflow-hidden flex-shrink-0">
+        <div className="h-8 w-8 flex-shrink-0 overflow-hidden rounded-full border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
           {avatarUrl ? (
             <img
               src={avatarUrl}
               alt=""
-              className="w-full h-full object-cover"
+              className="h-full w-full object-cover"
               onError={(e) => {
                 (e.currentTarget as HTMLImageElement).style.display = "none";
               }}
             />
           ) : (
-            <div className="w-full h-full flex items-center justify-center text-xs font-medium text-[var(--color-fg-muted)]">
+            <div className="flex h-full w-full items-center justify-center text-xs font-medium text-[var(--color-fg-muted)]">
               {user[0]?.toUpperCase() ?? "?"}
             </div>
           )}
         </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-semibold text-[var(--color-fg)] line-clamp-2 leading-tight">
+        <div className="min-w-0 flex-1">
+          <div className="line-clamp-2 text-sm leading-tight font-semibold text-[var(--color-fg)]">
             {title}
           </div>
-          <div className="text-xs text-[var(--color-fg-muted)] mt-0.5 truncate">
+          <div className="mt-0.5 truncate text-xs text-[var(--color-fg-muted)]">
             @{user}
           </div>
           <div className="text-xs text-[var(--color-fg-muted)]">
diff --git a/js/web/src/routes/$user/index.tsx b/js/web/src/routes/$user/index.tsx
index 2368547e4..ace6d306e 100644
--- a/js/web/src/routes/$user/index.tsx
+++ b/js/web/src/routes/$user/index.tsx
@@ -102,10 +102,10 @@ function StreamPage() {
 
   if (!initialized || !store.current) {
     return (
-      <div className="max-w-6xl mx-auto px-6 py-12">
+      <div className="mx-auto max-w-6xl px-6 py-12">
         <div className="animate-pulse">
-          <div className="h-8 bg-[var(--color-bg-elevated)] rounded w-48 mb-4" />
-          <div className="aspect-video bg-[var(--color-bg-elevated)] rounded" />
+          <div className="mb-4 h-8 w-48 rounded bg-[var(--color-bg-elevated)]" />
+          <div className="aspect-video rounded bg-[var(--color-bg-elevated)]" />
         </div>
       </div>
     );
@@ -135,11 +135,11 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
   }
 
   return (
-    <div className="flex flex-col gap-3 h-full">
+    <div className="flex h-full flex-col gap-3">
       <div
-        className={`flex-1 flex min-h-0 gap-4 transition-[margin] duration-300 ease-in-out ${chatOpen ? "mr-[360px]" : "mr-0"}`}
+        className={`flex min-h-0 flex-1 gap-4 transition-[margin] duration-300 ease-in-out ${chatOpen ? "mr-[360px]" : "mr-0"}`}
       >
-        <div className="flex-1 min-w-0 overflow-y-auto">
+        <div className="min-w-0 flex-1 overflow-y-auto">
           <VideoSection store={store} user={user} liveness={liveness} />
           {!theatre && (
             <StreamInfo
@@ -154,7 +154,7 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
       </div>
 
       <div
-        className={`fixed ${theatre ? "top-0" : "top-12"} bottom-0 right-0 w-[360px] max-w-90 flex flex-col overflow-hidden transition-transform duration-300 ease-in-out z-20 ${
+        className={`fixed ${theatre ? "top-0" : "top-12"} right-0 bottom-0 z-20 flex w-[360px] max-w-90 flex-col overflow-hidden transition-transform duration-300 ease-in-out ${
           chatOpen ? "translate-x-0" : "translate-x-full"
         }`}
       >
@@ -167,10 +167,10 @@ function StreamBody({ store, user }: { store: LivestreamStore; user: string }) {
 function OfflinePage({ user }: { user: string }) {
   const { t } = useTranslation("common");
   return (
-    <div className="max-w-2xl mx-auto px-6 py-20 text-center">
-      <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] mb-6">
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
         <svg
-          className="w-5 h-5 text-[var(--color-fg-subtle)]"
+          className="h-5 w-5 text-[var(--color-fg-subtle)]"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -183,23 +183,23 @@ function OfflinePage({ user }: { user: string }) {
           />
         </svg>
       </div>
-      <h1 className="text-2xl font-semibold font-display">
+      <h1 className="font-display text-2xl font-semibold">
         {t("stream-is-offline-title")}
       </h1>
-      <p className="text-sm text-[var(--color-fg-muted)] mt-2">
+      <p className="mt-2 text-sm text-[var(--color-fg-muted)]">
         {t("user-not-streaming-check-back", { user })}
       </p>
       <div className="mt-8 flex items-center justify-center gap-3">
         <Link
           to="/"
-          className="h-9 inline-flex items-center px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] text-sm font-medium"
+          className="inline-flex h-9 items-center rounded-md bg-[var(--color-accent)] px-4 text-sm font-medium text-[var(--color-accent-fg)] hover:bg-[var(--color-accent-hover)]"
         >
           {t("back-to-home")}
         </Link>
         <button
           type="button"
           onClick={() => window.location.reload()}
-          className="h-9 px-4 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-sm"
+          className="h-9 rounded-md border border-[var(--color-border)] px-4 text-sm hover:border-[var(--color-border-strong)]"
         >
           {t("refresh")}
         </button>
diff --git a/js/web/src/routes/$user/video/$tid.tsx b/js/web/src/routes/$user/video/$tid.tsx
index 4b0cfe39a..79cc02bfb 100644
--- a/js/web/src/routes/$user/video/$tid.tsx
+++ b/js/web/src/routes/$user/video/$tid.tsx
@@ -97,9 +97,9 @@ function VodPage() {
     : null;
 
   return (
-    <div className="flex flex-col gap-3 h-full">
-      <div className="flex-1 flex min-h-0 gap-4">
-        <div className="flex-1 min-w-0 overflow-y-auto">
+    <div className="flex h-full flex-col gap-3">
+      <div className="flex min-h-0 flex-1 gap-4">
+        <div className="min-w-0 flex-1 overflow-y-auto">
           <VideoSectionInner
             user={user}
             liveness="live"
@@ -110,25 +110,25 @@ function VodPage() {
             mode="vod"
           />
           {!theatre && (
-            <div className="mt-3 space-y-3 mx-3">
+            <div className="mx-3 mt-3 space-y-3">
               <div className="flex items-start gap-3">
-                <div className="flex-1 min-w-0">
+                <div className="min-w-0 flex-1">
                   <div className="flex items-start gap-2">
-                    <h2 className="flex-1 font-display font-semibold text-[var(--color-fg)] line-clamp-2">
+                    <h2 className="font-display line-clamp-2 flex-1 font-semibold text-[var(--color-fg)]">
                       {loading ? t("loading") : title}
                     </h2>
                     <button
                       type="button"
                       onClick={handleDownload}
                       disabled={downloading}
-                      className="flex-shrink-0 p-2 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors disabled:opacity-50"
+                      className="flex-shrink-0 rounded-md border border-[var(--color-border)] p-2 text-[var(--color-fg-muted)] transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg)] disabled:opacity-50"
                       title={t("download-video")}
                     >
-                      <Download className="w-4 h-4" />
+                      <Download className="h-4 w-4" />
                     </button>
                   </div>
 
-                  <div className="flex items-center gap-2 mt-1 text-sm text-[var(--color-fg-muted)]">
+                  <div className="mt-1 flex items-center gap-2 text-sm text-[var(--color-fg-muted)]">
                     <span className="truncate">
                       {author?.displayName || author?.handle || user}
                     </span>
@@ -139,7 +139,7 @@ function VodPage() {
                   </div>
 
                   {duration && (
-                    <span className="text-xs text-[var(--color-fg-muted)] mt-1 block">
+                    <span className="mt-1 block text-xs text-[var(--color-fg-muted)]">
                       {duration}
                     </span>
                   )}
@@ -151,13 +151,13 @@ function VodPage() {
                   )}
 
                   {description && (
-                    <p className="text-sm text-[var(--color-fg)] mt-3 whitespace-pre-wrap">
+                    <p className="mt-3 text-sm whitespace-pre-wrap text-[var(--color-fg)]">
                       {description}
                     </p>
                   )}
 
                   {error && (
-                    <p className="text-sm text-[var(--color-danger)] mt-2">
+                    <p className="mt-2 text-sm text-[var(--color-danger)]">
                       {error}
                     </p>
                   )}
diff --git a/js/web/src/routes/__root.tsx b/js/web/src/routes/__root.tsx
index 446afab6d..5b660e062 100644
--- a/js/web/src/routes/__root.tsx
+++ b/js/web/src/routes/__root.tsx
@@ -51,17 +51,17 @@ class ErrorBoundary extends Component<
   render() {
     if (this.state.error) {
       return (
-        <div className="flex flex-col items-center justify-center min-h-svh px-6 text-center">
-          <h1 className="text-2xl font-semibold font-display mb-2">
+        <div className="flex min-h-svh flex-col items-center justify-center px-6 text-center">
+          <h1 className="font-display mb-2 text-2xl font-semibold">
             {i18next.t("something-went-wrong")}
           </h1>
-          <p className="text-[var(--color-fg-muted)] mb-6 max-w-md">
+          <p className="mb-6 max-w-md text-[var(--color-fg-muted)]">
             {this.state.error.message || i18next.t("unexpected-error")}
           </p>
           <button
             type="button"
             onClick={() => this.setState({ error: null })}
-            className="h-10 px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] font-medium transition-colors"
+            className="h-10 rounded-md bg-[var(--color-accent)] px-4 font-medium text-[var(--color-accent-fg)] transition-colors hover:bg-[var(--color-accent-hover)]"
           >
             {i18next.t("try-again")}
           </button>
@@ -76,7 +76,7 @@ class ErrorBoundary extends Component<
 
 function RouteLoadingSkeleton() {
   return (
-    <div className="flex items-center justify-center min-h-svh">
+    <div className="flex min-h-svh items-center justify-center">
       <Loader className="animate-spin text-[var(--color-fg-muted)]" />
     </div>
   );
@@ -189,7 +189,7 @@ function ChromeLayout() {
       {!theatre && <SidebarComponent />}
       <SidebarInset>
         {!theatre && <Header />}
-        <div className="flex flex-1 flex-col min-h-0 mx-auto w-full">
+        <div className="mx-auto flex min-h-0 w-full flex-1 flex-col">
           <Outlet />
         </div>
       </SidebarInset>
diff --git a/js/web/src/routes/chat-popout.$user.tsx b/js/web/src/routes/chat-popout.$user.tsx
index d1fc8a37c..0affd60a9 100644
--- a/js/web/src/routes/chat-popout.$user.tsx
+++ b/js/web/src/routes/chat-popout.$user.tsx
@@ -156,21 +156,21 @@ function ChatPopoutPage() {
 
   if (!initialized || !store.current) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="w-5 h-5 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+      <div className="flex h-screen items-center justify-center">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-[var(--color-border)] border-t-[var(--color-accent)]" />
       </div>
     );
   }
 
   return (
     <div
-      className="flex flex-col h-screen bg-[var(--color-background)]"
+      className="flex h-screen flex-col bg-[var(--color-background)]"
       style={
         hidden ? { opacity: 0, pointerEvents: "none" as const } : undefined
       }
     >
       {!hidePinnedCommentsVal && <StreamNotifications store={store.current} />}
-      <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex min-h-0 flex-1 flex-col">
         <ChatPanel store={store.current} reversed={reverseVal} />
       </div>
       {!hideChatBoxVal && (
diff --git a/js/web/src/routes/dashboard/index.tsx b/js/web/src/routes/dashboard/index.tsx
index ca6bb31b4..89955d75d 100644
--- a/js/web/src/routes/dashboard/index.tsx
+++ b/js/web/src/routes/dashboard/index.tsx
@@ -44,7 +44,7 @@ function DashboardInner() {
 
 function DashboardLoadingSkeleton() {
   return (
-    <div className="flex items-center justify-center h-full">
+    <div className="flex h-full items-center justify-center">
       <Loader className="animate-spin" />
     </div>
   );
diff --git a/js/web/src/routes/dashboard/keys/index.tsx b/js/web/src/routes/dashboard/keys/index.tsx
index 0516eb693..a86d81328 100644
--- a/js/web/src/routes/dashboard/keys/index.tsx
+++ b/js/web/src/routes/dashboard/keys/index.tsx
@@ -56,7 +56,7 @@ function KeyManager() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("key-manager")}</h1>
+      <h1 className="font-display text-xl font-semibold">{t("key-manager")}</h1>
 
       {keyRecords === null || keyObj === null ? (
         <div className="text-sm text-[var(--color-fg-muted)]">Loading…</div>
@@ -66,7 +66,7 @@ function KeyManager() {
           <button
             type="button"
             onClick={() => getStreamKeyRecords()}
-            className="h-8 px-3 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-sm"
+            className="h-8 rounded-md border border-[var(--color-border)] px-3 text-sm hover:border-[var(--color-border-strong)]"
           >
             {t("refresh")}
           </button>
@@ -75,12 +75,12 @@ function KeyManager() {
         <div className="space-y-4">
           <div>
             <p className="text-sm font-medium">{t("your-stream-pubkeys")}</p>
-            <p className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+            <p className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
               {t("pubkey-description")}
             </p>
           </div>
 
-          <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+          <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
             {keyRecords.records.map((keyRecord) => {
               const rkey = keyRecord.uri.split("/").pop() as string;
               const value = keyRecord.value as {
@@ -98,7 +98,7 @@ function KeyManager() {
                 >
                   <div className="min-w-0 flex-1 space-y-0.5">
                     {value.signingKey && (
-                      <div className="text-xs font-mono truncate">
+                      <div className="truncate font-mono text-xs">
                         {value.signingKey}
                       </div>
                     )}
@@ -113,7 +113,7 @@ function KeyManager() {
                     type="button"
                     onClick={() => handleDelete(rkey)}
                     disabled={isDeleting}
-                    className="shrink-0 w-6 h-6 rounded flex items-center justify-center bg-[var(--color-bg)] hover:bg-[var(--color-border)] transition-colors disabled:opacity-50"
+                    className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-[var(--color-bg)] transition-colors hover:bg-[var(--color-border)] disabled:opacity-50"
                   >
                     <X size={14} />
                   </button>
diff --git a/js/web/src/routes/dashboard/multistream/index.tsx b/js/web/src/routes/dashboard/multistream/index.tsx
index 425ecc928..2ff85c858 100644
--- a/js/web/src/routes/dashboard/multistream/index.tsx
+++ b/js/web/src/routes/dashboard/multistream/index.tsx
@@ -206,10 +206,10 @@ function MultistreamManager() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-semibold font-display">
+        <h1 className="font-display text-xl font-semibold">
           {t("multistream-targets")}
         </h1>
-        <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+        <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
           {t("multistream-description")}
         </p>
       </div>
@@ -238,18 +238,18 @@ function MultistreamManager() {
           {t("failed-load-multistream-targets")}
         </div>
       ) : targets.length === 0 ? (
-        <div className="text-center py-8 text-sm text-[var(--color-fg-muted)]">
+        <div className="py-8 text-center text-sm text-[var(--color-fg-muted)]">
           {t("no-multistream-targets-yet")}
         </div>
       ) : (
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+        <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
           {targets.map((target) => {
             const isDeleting = deletingUris.has(target.uri);
             const isToggling = togglingUris.has(target.uri);
             return (
               <div
                 key={target.uri}
-                className="px-3 py-3 flex items-start justify-between gap-3"
+                className="flex items-start justify-between gap-3 px-3 py-3"
                 style={{ opacity: isDeleting ? 0.5 : 1 }}
               >
                 <div className="min-w-0 flex-1 space-y-1">
@@ -258,12 +258,12 @@ function MultistreamManager() {
                       {targetTitle(target)}
                     </span>
                     {!target.record.active && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-bg)] text-[var(--color-fg-muted)]">
+                      <span className="rounded bg-[var(--color-bg)] px-1.5 py-0.5 text-xs text-[var(--color-fg-muted)]">
                         inactive
                       </span>
                     )}
                   </div>
-                  <div className="text-xs text-[var(--color-fg-muted)] font-mono truncate">
+                  <div className="truncate font-mono text-xs text-[var(--color-fg-muted)]">
                     {redactUrl(target.record.url)}
                   </div>
                   <div className="text-xs text-[var(--color-fg-muted)]">
@@ -276,7 +276,7 @@ function MultistreamManager() {
                     </div>
                   )}
                 </div>
-                <div className="flex gap-1 shrink-0 items-center">
+                <div className="flex shrink-0 items-center gap-1">
                   {/* Active toggle */}
                   <Switch
                     size="sm"
@@ -287,7 +287,7 @@ function MultistreamManager() {
                   <button
                     type="button"
                     onClick={() => handleEdit(target)}
-                    className="p-1.5 rounded hover:bg-[var(--color-bg)] transition-colors"
+                    className="rounded p-1.5 transition-colors hover:bg-[var(--color-bg)]"
                   >
                     <Edit2 size={16} className="text-[var(--color-fg-muted)]" />
                   </button>
@@ -295,7 +295,7 @@ function MultistreamManager() {
                     type="button"
                     onClick={() => setDeleteTarget(target)}
                     disabled={isDeleting}
-                    className="p-1.5 rounded hover:bg-[var(--color-bg)] transition-colors disabled:opacity-50"
+                    className="rounded p-1.5 transition-colors hover:bg-[var(--color-bg)] disabled:opacity-50"
                   >
                     <Trash2 size={16} className="text-destructive" />
                   </button>
@@ -335,7 +335,7 @@ function MultistreamManager() {
               target: deleteTarget ? targetTitle(deleteTarget) : "",
             })}
           </p>
-          <p className="text-xs text-destructive mt-2 font-semibold">
+          <p className="text-destructive mt-2 text-xs font-semibold">
             {t("this-action-cannot-be-undone")}
           </p>
           <DialogFooter>
@@ -421,7 +421,7 @@ function MultistreamFormDialog({
         <div className="space-y-4">
           {/* Name */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("rtmp-target-name")} ({t("optional")})
             </label>
             <Input
@@ -435,7 +435,7 @@ function MultistreamFormDialog({
 
           {/* URL */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("rtmp-target-url")} *
             </label>
             <Input
@@ -454,7 +454,7 @@ function MultistreamFormDialog({
               }
             />
             {errors.url && (
-              <p className="text-xs text-destructive mt-1">{errors.url}</p>
+              <p className="text-destructive mt-1 text-xs">{errors.url}</p>
             )}
           </div>
 
@@ -469,7 +469,7 @@ function MultistreamFormDialog({
             />
           </div>
 
-          {error && <p className="text-xs text-destructive">{error}</p>}
+          {error && <p className="text-destructive text-xs">{error}</p>}
         </div>
 
         <DialogFooter>
diff --git a/js/web/src/routes/dashboard/recommendations/index.tsx b/js/web/src/routes/dashboard/recommendations/index.tsx
index ddafca561..aa083a5fe 100644
--- a/js/web/src/routes/dashboard/recommendations/index.tsx
+++ b/js/web/src/routes/dashboard/recommendations/index.tsx
@@ -77,14 +77,14 @@ function SortableStreamerRow({
   return (
     <div
       ref={ref}
-      className={`flex items-center gap-2 px-3 py-2 border-b border-[var(--color-border)] last:border-b-0 ${
-        isDragging ? "bg-[var(--color-bg-elevated)] shadow-lg rounded-md" : ""
+      className={`flex items-center gap-2 border-b border-[var(--color-border)] px-3 py-2 last:border-b-0 ${
+        isDragging ? "rounded-md bg-[var(--color-bg-elevated)] shadow-lg" : ""
       }`}
     >
       {/* Drag handle */}
       <div
         ref={handleRef}
-        className="shrink-0 cursor-grab active:cursor-grabbing p-0.5"
+        className="shrink-0 cursor-grab p-0.5 active:cursor-grabbing"
       >
         <GripVertical
           size={16}
@@ -105,14 +105,14 @@ function SortableStreamerRow({
           <button
             type="button"
             onClick={onSaveEdit}
-            className="p-1.5 rounded hover:bg-[var(--color-bg)]"
+            className="rounded p-1.5 hover:bg-[var(--color-bg)]"
           >
             <Check size={16} className="text-[var(--color-accent)]" />
           </button>
           <button
             type="button"
             onClick={() => onCancelEdit(index, !!streamer)}
-            className="p-1.5 rounded hover:bg-[var(--color-bg)]"
+            className="rounded p-1.5 hover:bg-[var(--color-bg)]"
           >
             <X size={16} className="text-[var(--color-fg-muted)]" />
           </button>
@@ -123,13 +123,13 @@ function SortableStreamerRow({
             <img
               src={resolvedAvatar}
               alt=""
-              className="w-6 h-6 rounded-full bg-[var(--color-bg)] flex-shrink-0"
+              className="h-6 w-6 flex-shrink-0 rounded-full bg-[var(--color-bg)]"
               onError={(e) => {
                 (e.currentTarget as HTMLImageElement).style.display = "none";
               }}
             />
           ) : (
-            <div className="w-6 h-6 rounded-full bg-[var(--color-bg)] flex-shrink-0" />
+            <div className="h-6 w-6 flex-shrink-0 rounded-full bg-[var(--color-bg)]" />
           )}
           <span
             className={cn(
@@ -143,14 +143,14 @@ function SortableStreamerRow({
           <button
             type="button"
             onClick={() => onStartEdit(index, streamer)}
-            className="p-1.5 rounded hover:bg-[var(--color-bg)]"
+            className="rounded p-1.5 hover:bg-[var(--color-bg)]"
           >
             <Pencil size={16} className="text-[var(--color-fg-muted)]" />
           </button>
           <button
             type="button"
             onClick={() => onDelete(index)}
-            className="p-1.5 rounded hover:bg-[var(--color-bg)]"
+            className="rounded p-1.5 hover:bg-[var(--color-bg)]"
           >
             <X size={16} className="text-destructive" />
           </button>
@@ -358,10 +358,10 @@ function RecommendationsManager() {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-display font-semibold">
+          <h1 className="font-display text-xl font-semibold">
             {t("recommendations-to-others")}
           </h1>
-          <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+          <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
             {t("recommendations-description")}
           </p>
         </div>
@@ -407,7 +407,7 @@ function RecommendationsManager() {
                     type="button"
                     onClick={() => !alreadyAdded && handleSelectActor(actor)}
                     disabled={alreadyAdded}
-                    className="flex items-center justify-between w-full px-3 py-2 text-left hover:bg-[var(--color-bg)] transition-colors disabled:opacity-50"
+                    className="flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-[var(--color-bg)] disabled:opacity-50"
                   >
                     <span className="text-sm">@{actor.handle}</span>
                     {alreadyAdded && (
@@ -474,7 +474,7 @@ function RecommendationsManager() {
             <button
               type="button"
               onClick={handleAddManual}
-              className="flex items-center gap-2 px-3 py-2.5 w-full hover:bg-[var(--color-bg)] transition-colors"
+              className="flex w-full items-center gap-2 px-3 py-2.5 transition-colors hover:bg-[var(--color-bg)]"
             >
               <Plus size={16} className="text-[var(--color-fg-muted)]" />
               <span className="text-sm">Add DID manually</span>
@@ -501,7 +501,7 @@ function RecommendationsManager() {
             <DialogTitle>{t("delete")}</DialogTitle>
           </DialogHeader>
           <p className="text-sm">{t("confirm-delete")}</p>
-          <p className="text-xs text-[var(--color-fg-muted)] mt-1">
+          <p className="mt-1 text-xs text-[var(--color-fg-muted)]">
             {t("action-cannot-be-undone")}
           </p>
           <DialogFooter>
diff --git a/js/web/src/routes/dashboard/stream/index.tsx b/js/web/src/routes/dashboard/stream/index.tsx
index 8aa250b2c..e9e0c6d0c 100644
--- a/js/web/src/routes/dashboard/stream/index.tsx
+++ b/js/web/src/routes/dashboard/stream/index.tsx
@@ -43,19 +43,19 @@ export function StreamSettingsPage() {
   const { t } = useTranslation("common");
 
   return (
-    <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 px-4 lg:px-6 py-6 lg:py-10 mx-auto max-w-screen">
+    <div className="mx-auto flex max-w-screen flex-col gap-6 px-4 py-6 lg:flex-row lg:gap-8 lg:px-6 lg:py-10">
       {/* Mobile: floating sticky nav */}
-      <div className="lg:hidden sticky top-0 z-30 -mx-4 px-4 py-2 bg-[var(--color-bg)]/80 backdrop-blur-md">
-        <h2 className="text-lg font-semibold tracking-tight mb-2 font-display">
+      <div className="sticky top-0 z-30 -mx-4 bg-[var(--color-bg)]/80 px-4 py-2 backdrop-blur-md lg:hidden">
+        <h2 className="font-display mb-2 text-lg font-semibold tracking-tight">
           {t("stream-settings", { defaultValue: "Stream Settings" })}
         </h2>
 
         <div className="relative -mx-4 px-4">
-          <div className="pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-[var(--color-bg)] to-transparent z-10" />
-          <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-[var(--color-bg)] to-transparent z-10" />
+          <div className="pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-5 bg-gradient-to-r from-[var(--color-bg)] to-transparent" />
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-5 bg-gradient-to-l from-[var(--color-bg)] to-transparent" />
 
           <nav
-            className="flex gap-0.5 overflow-x-auto scrollbar-none -mx-5 px-5"
+            className="-mx-5 flex scrollbar-none gap-0.5 overflow-x-auto px-5"
             style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
           >
             {NAV_ITEMS.map((item) => {
@@ -72,9 +72,9 @@ export function StreamSettingsPage() {
       </div>
 
       {/* Desktop: sidebar */}
-      <div className="hidden lg:block lg:w-52 shrink-0">
-        <nav className="flex flex-col gap-0.5 sticky top-6 self-start">
-          <p className="text-2xl font-semibold px-2 pb-3 font-display">
+      <div className="hidden shrink-0 lg:block lg:w-52">
+        <nav className="sticky top-6 flex flex-col gap-0.5 self-start">
+          <p className="font-display px-2 pb-3 text-2xl font-semibold">
             {t("stream-settings", { defaultValue: "Stream Settings" })}
           </p>
           {NAV_ITEMS.map((item) => {
@@ -90,7 +90,7 @@ export function StreamSettingsPage() {
       </div>
 
       {/* Content: both sections stacked */}
-      <div className="flex-1 min-w-0 md:max-w-md xl:max-w-xl w-full md:w-screen mt-0.75 space-y-10">
+      <div className="mt-0.75 w-full min-w-0 flex-1 space-y-10 md:w-screen md:max-w-md xl:max-w-xl">
         <section id="metadata" className="scroll-mt-20">
           <MetadataSection />
         </section>
@@ -306,7 +306,7 @@ function MetadataSection() {
 
   return (
     <div className="space-y-6">
-      <h2 className="text-lg font-semibold font-display">
+      <h2 className="font-display text-lg font-semibold">
         {t("metadata", { defaultValue: "Metadata" })}
       </h2>
 
@@ -328,16 +328,16 @@ function MetadataSection() {
                 "You're required to flag your stream with themes that viewers may want a heads-up about.",
             })}
           >
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
               {CONTENT_WARNINGS.map((cw) => {
                 const checked = selectedWarnings.has(cw.value);
                 return (
                   <label
                     key={cw.value}
                     className={cn(
-                      "flex items-start gap-2 p-3 rounded-md border cursor-pointer transition-colors",
+                      "flex cursor-pointer items-start gap-2 rounded-md border p-3 transition-colors",
                       checked
-                        ? "bg-[var(--color-accent)]/10 border-[var(--color-accent)]"
+                        ? "border-[var(--color-accent)] bg-[var(--color-accent)]/10"
                         : "border-[var(--color-border)] hover:border-[var(--color-border-strong)]",
                     )}
                   >
@@ -387,14 +387,14 @@ function MetadataSection() {
                   })
                 }
                 placeholder={currentYear.toString()}
-                className="w-full h-9 px-3 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                className="h-9 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 text-sm text-[var(--color-fg)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
               />
             </Field>
             <Field label={t("license", { defaultValue: "License" })}>
               <select
                 value={licenseSelect}
                 onChange={(e) => setLicenseSelect(e.target.value)}
-                className="w-full h-9 px-3 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                className="h-9 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 text-sm text-[var(--color-fg)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
               >
                 <option value="">
                   {t("select-license", { defaultValue: "Select a license…" })}
@@ -420,7 +420,7 @@ function MetadataSection() {
                   value={customLicense}
                   onChange={(e) => setCustomLicense(e.target.value)}
                   placeholder="https://… or text"
-                  className="w-full h-9 px-3 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                  className="h-9 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 text-sm text-[var(--color-fg)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
                 />
               </Field>
             )}
@@ -439,7 +439,7 @@ function MetadataSection() {
                 }
                 placeholder="© 2025 Your Name"
                 rows={2}
-                className="w-full px-3 py-2 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] resize-none"
+                className="w-full resize-none rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-fg)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
               />
             </Field>
             <Field label={t("credit-line", { defaultValue: "Credit Line" })}>
@@ -490,7 +490,7 @@ function MetadataSection() {
                   onChange={(e) => setAllowedBroadcasters(e.target.value)}
                   placeholder="did:plc:abc123…&#10;did:plc:def456…"
                   rows={4}
-                  className="w-full px-3 py-2 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] resize-none font-mono"
+                  className="w-full resize-none rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 font-mono text-sm text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
                 />
               </Field>
             )}
@@ -515,7 +515,7 @@ function MetadataSection() {
                   type="number"
                   value={deleteAfter}
                   onChange={(e) => setDeleteAfter(e.target.value)}
-                  className="w-full h-9 px-3 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+                  className="h-9 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 text-sm text-[var(--color-fg)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
                 />
               </Field>
             )}
@@ -525,13 +525,13 @@ function MetadataSection() {
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className="h-9 px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            className="flex h-9 items-center gap-2 rounded-md bg-[var(--color-accent)] px-4 font-medium text-[var(--color-accent-fg)] transition-colors hover:bg-[var(--color-accent-hover)] disabled:cursor-not-allowed disabled:opacity-50"
           >
             {saving && <Loader2 className="size-4 animate-spin" />}
             {t("save", { defaultValue: "Save" })}
           </button>
 
-          <p className="text-xs text-[var(--color-fg-muted)] flex items-center gap-1">
+          <p className="flex items-center gap-1 text-xs text-[var(--color-fg-muted)]">
             <ExternalLink className="size-3" />
             {t("metadata-learn-more", {
               defaultValue: "Learn more about content metadata",
@@ -547,11 +547,11 @@ function ModerationSection() {
   const { t } = useTranslation("common");
   return (
     <div className="space-y-6">
-      <h2 className="text-lg font-semibold font-display">
+      <h2 className="font-display text-lg font-semibold">
         {t("moderation", { defaultValue: "Moderation" })}
       </h2>
       <div>
-        <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+        <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
           {t("moderation-help", {
             defaultValue:
               "Add/remove stream moderators. Moderators can hide chat messages and time out users in your chat.",
@@ -585,21 +585,21 @@ function SubSection({
   return (
     <div className="space-y-3">
       <div>
-        <h3 className="text-sm font-semibold flex items-center gap-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
           {title}
           {required && (
-            <span className="text-xs px-1.5 rounded-full bg-muted text-foreground">
+            <span className="bg-muted text-foreground rounded-full px-1.5 text-xs">
               {t("required", { defaultValue: "Required" })}
             </span>
           )}
           {optional && (
-            <span className="text-xs px-1.5 bg-muted rounded-full text-muted-foreground">
+            <span className="bg-muted text-muted-foreground rounded-full px-1.5 text-xs">
               {t("optional", { defaultValue: "Optional" })}
             </span>
           )}
         </h3>
         {help && (
-          <p className="text-xs text-[var(--color-fg-muted)] mt-1">{help}</p>
+          <p className="mt-1 text-xs text-[var(--color-fg-muted)]">{help}</p>
         )}
       </div>
       <div className="space-y-3">{children}</div>
@@ -639,7 +639,7 @@ function Toggle({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 text-sm cursor-pointer">
+    <label className="flex cursor-pointer items-center gap-2 text-sm">
       <input
         type="checkbox"
         checked={checked}
diff --git a/js/web/src/routes/dashboard/webhooks/index.tsx b/js/web/src/routes/dashboard/webhooks/index.tsx
index 38f4c9674..3270fdd31 100644
--- a/js/web/src/routes/dashboard/webhooks/index.tsx
+++ b/js/web/src/routes/dashboard/webhooks/index.tsx
@@ -169,10 +169,10 @@ function WebhookManager() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-semibold font-display">
+        <h1 className="font-display text-xl font-semibold">
           {t("webhook-integrations")}
         </h1>
-        <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+        <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
           {t("webhook-integrations-description")}
         </p>
       </div>
@@ -201,7 +201,7 @@ function WebhookManager() {
           {t("failed-load-webhooks")}
         </div>
       ) : webhooks.length === 0 ? (
-        <div className="text-center py-8 text-sm text-[var(--color-fg-muted)]">
+        <div className="py-8 text-center text-sm text-[var(--color-fg-muted)]">
           {t("no-webhooks-yet")}
         </div>
       ) : (
@@ -209,7 +209,7 @@ function WebhookManager() {
           {webhooks.map((webhook) => (
             <div
               key={webhook.id}
-              className="px-3 py-3 flex items-start justify-between gap-3"
+              className="flex items-start justify-between gap-3 px-3 py-3"
             >
               <div className="min-w-0 flex-1 space-y-1">
                 <div className="flex items-center gap-2">
@@ -217,7 +217,7 @@ function WebhookManager() {
                     {webhook.name || t("untitled-webhook")}
                   </span>
                   {!webhook.active && (
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-bg)] text-[var(--color-fg-muted)]">
+                    <span className="rounded bg-[var(--color-bg)] px-1.5 py-0.5 text-xs text-[var(--color-fg-muted)]">
                       {t("inactive")}
                     </span>
                   )}
@@ -227,25 +227,25 @@ function WebhookManager() {
                     {webhook.description}
                   </div>
                 )}
-                <div className="text-xs text-[var(--color-fg-muted)] font-mono truncate">
+                <div className="truncate font-mono text-xs text-[var(--color-fg-muted)]">
                   {webhook.url}
                 </div>
-                <div className="flex gap-1 flex-wrap">
+                <div className="flex flex-wrap gap-1">
                   {webhook.events.map((event) => (
                     <span
                       key={event}
-                      className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-bg)]"
+                      className="rounded bg-[var(--color-bg)] px-1.5 py-0.5 text-xs"
                     >
                       {event}
                     </span>
                   ))}
                 </div>
               </div>
-              <div className="flex gap-1 shrink-0">
+              <div className="flex shrink-0 gap-1">
                 <button
                   type="button"
                   onClick={() => handleEdit(webhook)}
-                  className="p-1.5 rounded hover:bg-[var(--color-bg)] transition-colors"
+                  className="rounded p-1.5 transition-colors hover:bg-[var(--color-bg)]"
                 >
                   <Edit2 size={16} className="text-[var(--color-fg-muted)]" />
                 </button>
@@ -253,7 +253,7 @@ function WebhookManager() {
                   type="button"
                   onClick={() => setDeleteTarget(webhook)}
                   disabled={deletingIds.has(webhook.id)}
-                  className="p-1.5 rounded hover:bg-[var(--color-bg)] transition-colors disabled:opacity-50"
+                  className="rounded p-1.5 transition-colors hover:bg-[var(--color-bg)] disabled:opacity-50"
                 >
                   <Trash2 size={16} className="text-destructive" />
                 </button>
@@ -291,7 +291,7 @@ function WebhookManager() {
               name: deleteTarget?.name || t("untitled-webhook"),
             })}
           </p>
-          <p className="text-xs text-destructive mt-2">
+          <p className="text-destructive mt-2 text-xs">
             {t("action-cannot-be-undone")}
           </p>
           <DialogFooter>
@@ -375,7 +375,7 @@ function WebhookFormDialog({
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
+      <DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
             {webhook ? t("edit-webhook") : t("create-webhook")}
@@ -385,7 +385,7 @@ function WebhookFormDialog({
         <div className="space-y-4">
           {/* Name */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("name-optional")}
             </label>
             <Input
@@ -399,7 +399,7 @@ function WebhookFormDialog({
 
           {/* URL */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               Webhook URL *
             </label>
             <Input
@@ -410,13 +410,13 @@ function WebhookFormDialog({
               placeholder="https://discord.com/api/webhooks/..."
             />
             {errors.url && (
-              <p className="text-xs text-destructive mt-1">{errors.url}</p>
+              <p className="text-destructive mt-1 text-xs">{errors.url}</p>
             )}
           </div>
 
           {/* Description */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               Description (optional)
             </label>
             <Input
@@ -430,13 +430,13 @@ function WebhookFormDialog({
 
           {/* Events */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-2 block">
+            <label className="mb-2 block text-xs font-medium text-[var(--color-fg-muted)]">
               Events *
             </label>
             {EVENT_OPTIONS.map((opt) => (
               <label
                 key={opt.value}
-                className="flex items-center gap-2 mb-1.5 cursor-pointer"
+                className="mb-1.5 flex cursor-pointer items-center gap-2"
               >
                 <input
                   type="checkbox"
@@ -448,14 +448,14 @@ function WebhookFormDialog({
               </label>
             ))}
             {errors.events && (
-              <p className="text-xs text-destructive mt-1">{errors.events}</p>
+              <p className="text-destructive mt-1 text-xs">{errors.events}</p>
             )}
           </div>
 
           {/* Prefix & Suffix */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+              <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
                 Prefix
               </label>
               <Input
@@ -467,7 +467,7 @@ function WebhookFormDialog({
               />
             </div>
             <div>
-              <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+              <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
                 Suffix
               </label>
               <Input
@@ -482,7 +482,7 @@ function WebhookFormDialog({
 
           {/* Text Replacements */}
           <div>
-            <div className="flex items-center justify-between mb-2">
+            <div className="mb-2 flex items-center justify-between">
               <label className="text-xs font-medium text-[var(--color-fg-muted)]">
                 Text Replacements
               </label>
@@ -500,7 +500,7 @@ function WebhookFormDialog({
               </Button>
             </div>
             {form.rewrite.map((rule, i) => (
-              <div key={i} className="flex gap-2 mb-2 items-center">
+              <div key={i} className="mb-2 flex items-center gap-2">
                 <Input
                   value={rule.from}
                   onChange={(e) =>
@@ -514,7 +514,7 @@ function WebhookFormDialog({
                   placeholder="input text"
                   className="flex-1"
                 />
-                <span className="text-[var(--color-fg-muted)] text-xs">→</span>
+                <span className="text-xs text-[var(--color-fg-muted)]">→</span>
                 <Input
                   value={rule.to}
                   onChange={(e) =>
@@ -537,7 +537,7 @@ function WebhookFormDialog({
                         rewrite: prev.rewrite.filter((_, j) => j !== i),
                       }))
                     }
-                    className="p-1 rounded hover:bg-[var(--color-bg)]"
+                    className="rounded p-1 hover:bg-[var(--color-bg)]"
                   >
                     <X size={14} className="text-destructive" />
                   </button>
@@ -548,7 +548,7 @@ function WebhookFormDialog({
 
           {/* Mute Words */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               Mute Words (Chat Only)
             </label>
             <Input
diff --git a/js/web/src/routes/embed/$user/index.tsx b/js/web/src/routes/embed/$user/index.tsx
index 7b5013bb4..c6ba4a72d 100644
--- a/js/web/src/routes/embed/$user/index.tsx
+++ b/js/web/src/routes/embed/$user/index.tsx
@@ -19,7 +19,7 @@ function EmbedLive() {
   }, [user]);
 
   return (
-    <div className="w-screen h-screen bg-black flex items-center justify-center">
+    <div className="flex h-screen w-screen items-center justify-center bg-black">
       <Player src={playlistUrl} poster={thumbnailUrl} active mode="live" />
     </div>
   );
diff --git a/js/web/src/routes/embed/$user/video/$tid.tsx b/js/web/src/routes/embed/$user/video/$tid.tsx
index 36414b407..1e5372590 100644
--- a/js/web/src/routes/embed/$user/video/$tid.tsx
+++ b/js/web/src/routes/embed/$user/video/$tid.tsx
@@ -20,7 +20,7 @@ function EmbedVideo() {
   }, [user, tid]);
 
   return (
-    <div className="w-screen h-screen bg-black flex items-center justify-center">
+    <div className="flex h-screen w-screen items-center justify-center bg-black">
       <Player src={playlistUrl} poster={thumbnailUrl} active mode="vod" />
     </div>
   );
diff --git a/js/web/src/routes/embed/danmu-obs/$user.tsx b/js/web/src/routes/embed/danmu-obs/$user.tsx
index a03cfe87a..bd894db3c 100644
--- a/js/web/src/routes/embed/danmu-obs/$user.tsx
+++ b/js/web/src/routes/embed/danmu-obs/$user.tsx
@@ -106,7 +106,7 @@ function EmbedDanmuObs() {
   }, [user]);
 
   if (!initialized || !store.current) {
-    return <div className="w-screen h-screen bg-transparent" />;
+    return <div className="h-screen w-screen bg-transparent" />;
   }
 
   return (
@@ -201,13 +201,13 @@ function DanmuBody({
 
   return (
     <div
-      className="w-screen h-screen bg-transparent overflow-hidden relative pointer-events-none"
+      className="pointer-events-none relative h-screen w-screen overflow-hidden bg-transparent"
       style={{ opacity }}
     >
       {messages.map((msg) => (
         <div
           key={msg.id}
-          className="absolute whitespace-nowrap text-lg font-bold"
+          className="absolute text-lg font-bold whitespace-nowrap"
           style={{
             top: `${msg.lane * laneHeight}%`,
             color: msg.color,
diff --git a/js/web/src/routes/embed/info-widget/$user.tsx b/js/web/src/routes/embed/info-widget/$user.tsx
index 7dfce1569..61a6b2c36 100644
--- a/js/web/src/routes/embed/info-widget/$user.tsx
+++ b/js/web/src/routes/embed/info-widget/$user.tsx
@@ -92,8 +92,8 @@ function EmbedInfoWidget() {
 
   if (!initialized || !store.current) {
     return (
-      <div className="w-screen h-screen bg-transparent flex items-center justify-center">
-        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+      <div className="flex h-screen w-screen items-center justify-center bg-transparent">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
       </div>
     );
   }
@@ -127,13 +127,13 @@ function InfoWidgetBody({ store }: { store: LivestreamStore }) {
     : null;
 
   return (
-    <div className="w-screen h-screen bg-transparent flex items-start justify-end p-4">
-      <div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 text-white text-sm min-w-[200px] font-mono space-y-2">
+    <div className="flex h-screen w-screen items-start justify-end bg-transparent p-4">
+      <div className="min-w-[200px] space-y-2 rounded-lg bg-black/70 p-4 font-mono text-sm text-white backdrop-blur-sm">
         <div className="flex items-center gap-2">
           <div
-            className={`w-2 h-2 rounded-full ${state.websocketConnected ? "bg-green-400" : "bg-red-400"}`}
+            className={`h-2 w-2 rounded-full ${state.websocketConnected ? "bg-green-400" : "bg-red-400"}`}
           />
-          <span className="text-xs uppercase tracking-wider opacity-70">
+          <span className="text-xs tracking-wider uppercase opacity-70">
             {state.websocketConnected ? "connected" : "disconnected"}
           </span>
         </div>
diff --git a/js/web/src/routes/index.tsx b/js/web/src/routes/index.tsx
index daf49cc38..f5e68b0c1 100644
--- a/js/web/src/routes/index.tsx
+++ b/js/web/src/routes/index.tsx
@@ -18,17 +18,17 @@ function HomePage() {
 
   if (streams === undefined && isLoading) {
     return (
-      <div className="max-w-6xl mx-auto px-6 py-12">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div className="mx-auto max-w-6xl px-6 py-12">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {Array.from({ length: 4 }).map((_, i) => (
             <div
               key={i}
-              className="rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] animate-pulse"
+              className="animate-pulse rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)]"
             >
-              <div className="aspect-video bg-[var(--color-bg-overlay)] rounded-t-xl" />
-              <div className="p-3 space-y-2">
-                <div className="h-4 bg-[var(--color-bg-overlay)] rounded w-3/4" />
-                <div className="h-3 bg-[var(--color-bg-overlay)] rounded w-1/2" />
+              <div className="aspect-video rounded-t-xl bg-[var(--color-bg-overlay)]" />
+              <div className="space-y-2 p-3">
+                <div className="h-4 w-3/4 rounded bg-[var(--color-bg-overlay)]" />
+                <div className="h-3 w-1/2 rounded bg-[var(--color-bg-overlay)]" />
               </div>
             </div>
           ))}
@@ -38,29 +38,29 @@ function HomePage() {
   }
 
   return (
-    <div className="max-w-6xl mx-auto px-6 py-8">
+    <div className="mx-auto max-w-6xl px-6 py-8">
       {error && !streams && (
-        <div className="mb-6 p-4 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border)] text-sm text-[var(--color-fg-muted)]">
+        <div className="mb-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4 text-sm text-[var(--color-fg-muted)]">
           {t("could-not-load-streams")}
         </div>
       )}
 
       {streams && streams.length > 0 && (
-        <div className="flex items-center gap-2 mb-6">
-          <div className="w-2 h-2 rounded-full bg-red-500" />
-          <h2 className="text-lg font-semibold font-display text-[var(--color-fg)]">
+        <div className="mb-6 flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-red-500" />
+          <h2 className="font-display text-lg font-semibold text-[var(--color-fg)]">
             {t("live-now-count", { count: streams.length })}
           </h2>
         </div>
       )}
 
       {streams && streams.length === 0 && (
-        <div className="text-center py-20 pt-52">
+        <div className="py-20 pt-52 text-center">
           <svg
             width="100%"
             viewBox="0 0 680 360"
             role="img"
-            className="-rotate-3 scale-400 mb-6"
+            className="mb-6 scale-400 -rotate-3"
           >
             <g
               stroke="currentColor"
@@ -71,7 +71,7 @@ function HomePage() {
             >
               <g
                 opacity="0.35"
-                className="animate-scale delay-300 animate-fade-in-staggered"
+                className="animate-scale animate-fade-in-staggered delay-300"
               >
                 <circle
                   style={{ "--anim-order": 0 } as any}
@@ -226,7 +226,7 @@ function HomePage() {
                   r="2"
                 ></circle>
               </g>
-              <g className="scale-50 translate-x-43 translate-y-20">
+              <g className="translate-x-43 translate-y-20 scale-50">
                 <g className="animate-in-hubble">
                   <g id="scope" className="animate-scope-rock" stroke-width="2">
                     <g transform="rotate(90, 230, 180)">
@@ -271,17 +271,17 @@ function HomePage() {
               </g>
             </g>
           </svg>
-          <h2 className="text-lg font-semibold font-display text-[var(--color-fg)]">
+          <h2 className="font-display text-lg font-semibold text-[var(--color-fg)]">
             {t("no-one-streaming")}
           </h2>
-          <p className="text-[var(--color-fg-muted)] mt-1">
+          <p className="mt-1 text-[var(--color-fg-muted)]">
             {t("check-back-later")}
           </p>
         </div>
       )}
 
       {streams && streams.length > 0 && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {streams.map((stream) => (
             <StreamCard
               key={stream.uri}
@@ -293,24 +293,24 @@ function HomePage() {
       )}
 
       {!streams && !isLoading && !error && (
-        <div className="max-w-2xl mx-auto text-center">
-          <h1 className="text-4xl font-semibold font-display tracking-tight">
+        <div className="mx-auto max-w-2xl text-center">
+          <h1 className="font-display text-4xl font-semibold tracking-tight">
             {t("hero-title")}
           </h1>
           <p className="mt-4 text-lg text-[var(--color-fg-muted)]">
             {t("hero-description")}
           </p>
-          <div className="mt-8 flex gap-3 justify-center">
+          <div className="mt-8 flex justify-center gap-3">
             <Link
               to="/login"
               search={EMPTY_LOGIN_SEARCH}
-              className="inline-flex items-center px-4 h-10 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] font-medium transition-colors"
+              className="inline-flex h-10 items-center rounded-md bg-[var(--color-accent)] px-4 font-medium text-[var(--color-accent-fg)] transition-colors hover:bg-[var(--color-accent-hover)]"
             >
               {t("log-in")}
             </Link>
             <a
               href="https://stream.place"
-              className="inline-flex items-center px-4 h-10 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg)] transition-colors"
+              className="inline-flex h-10 items-center rounded-md border border-[var(--color-border)] px-4 text-[var(--color-fg)] transition-colors hover:border-[var(--color-border-strong)]"
             >
               {t("learn-more")}
             </a>
diff --git a/js/web/src/routes/login.tsx b/js/web/src/routes/login.tsx
index cf7da152a..45fec1c42 100644
--- a/js/web/src/routes/login.tsx
+++ b/js/web/src/routes/login.tsx
@@ -69,7 +69,7 @@ function LoginPage() {
 
   if (isCallbackInFlight && state.status !== "authenticated") {
     return (
-      <div className="max-w-md mx-auto px-6 py-16 text-center">
+      <div className="mx-auto max-w-md px-6 py-16 text-center">
         <p className="text-[var(--color-fg-muted)]">
           {t("completing-sign-in")}
         </p>
@@ -79,8 +79,8 @@ function LoginPage() {
 
   if (state.status === "authenticated") {
     return (
-      <div className="max-w-md mx-auto px-6 py-16 text-center">
-        <h1 className="text-2xl font-semibold font-display">
+      <div className="mx-auto max-w-md px-6 py-16 text-center">
+        <h1 className="font-display text-2xl font-semibold">
           {t("already-logged-in")}
         </h1>
         <p className="mt-2 text-[var(--color-fg-muted)]">
@@ -89,7 +89,7 @@ function LoginPage() {
         <button
           type="button"
           onClick={() => navigate({ to: "/" })}
-          className="mt-6 inline-flex items-center px-4 h-10 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] font-medium"
+          className="mt-6 inline-flex h-10 items-center rounded-md bg-[var(--color-accent)] px-4 font-medium text-[var(--color-accent-fg)] hover:bg-[var(--color-accent-hover)]"
         >
           {t("go-home")}
         </button>
@@ -98,8 +98,8 @@ function LoginPage() {
   }
 
   return (
-    <div className="max-w-md mx-auto px-6 py-16">
-      <h1 className="text-2xl font-semibold font-display">{t("log-in")}</h1>
+    <div className="mx-auto max-w-md px-6 py-16">
+      <h1 className="font-display text-2xl font-semibold">{t("log-in")}</h1>
       <p className="mt-2 text-[var(--color-fg-muted)]">
         {t("sign-in-description")}
       </p>
@@ -116,7 +116,7 @@ function LoginPage() {
             placeholder="you.bsky.social"
             autoComplete="username"
             required
-            className="mt-1 w-full h-10 px-3 rounded-md bg-[var(--color-bg-elevated)] border border-[var(--color-border)] focus:border-[var(--color-accent)] focus:outline-none transition-colors"
+            className="mt-1 h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3 transition-colors focus:border-[var(--color-accent)] focus:outline-none"
           />
         </label>
 
@@ -125,7 +125,7 @@ function LoginPage() {
         <button
           type="submit"
           disabled={submitting || state.status === "loading"}
-          className="w-full h-10 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-[var(--color-accent-fg)] font-medium transition-colors"
+          className="h-10 w-full rounded-md bg-[var(--color-accent)] font-medium text-[var(--color-accent-fg)] transition-colors hover:bg-[var(--color-accent-hover)] disabled:cursor-not-allowed disabled:opacity-50"
         >
           {submitting ? t("redirecting") : t("continue")}
         </button>
diff --git a/js/web/src/routes/search.tsx b/js/web/src/routes/search.tsx
index b04c80d63..9c146e6cb 100644
--- a/js/web/src/routes/search.tsx
+++ b/js/web/src/routes/search.tsx
@@ -88,27 +88,27 @@ function SearchPage() {
   };
 
   return (
-    <div className="max-w-2xl mx-auto w-full px-4 py-6">
+    <div className="mx-auto w-full max-w-2xl px-4 py-6">
       <div className="relative mb-6">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-fg-muted)]" />
+        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--color-fg-muted)]" />
         <input
           ref={inputRef}
           type="text"
           value={query}
           onChange={(e) => handleChange(e.target.value)}
           placeholder={t("search-for-streamers")}
-          className="w-full h-10 pl-9 pr-4 rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+          className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] pr-4 pl-9 text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:ring-1 focus:ring-[var(--color-ring)] focus:outline-none"
         />
       </div>
 
       {searching && results.length === 0 && (
         <div className="flex justify-center py-12">
-          <div className="w-5 h-5 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-[var(--color-border)] border-t-[var(--color-accent)]" />
         </div>
       )}
 
       {!searching && query.trim() && results.length === 0 && (
-        <div className="text-center py-12">
+        <div className="py-12 text-center">
           <p className="text-[var(--color-fg-muted)]">
             {t("no-results-for", { query })}
           </p>
@@ -122,16 +122,16 @@ function SearchPage() {
               key={actor.did}
               to="/$user"
               params={{ user: actor.handle }}
-              className="flex items-center gap-3 p-3 rounded-lg hover:bg-[var(--color-bg-elevated)] transition-colors"
+              className="flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-[var(--color-bg-elevated)]"
             >
               {avatars[actor.did]?.avatar ? (
                 <img
                   src={avatars[actor.did].avatar}
                   alt=""
-                  className="w-10 h-10 rounded-full bg-[var(--color-bg)] object-cover"
+                  className="h-10 w-10 rounded-full bg-[var(--color-bg)] object-cover"
                 />
               ) : (
-                <div className="w-10 h-10 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] flex items-center justify-center text-sm font-medium text-[var(--color-fg-muted)]">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-bg-overlay)] text-sm font-medium text-[var(--color-fg-muted)]">
                   {(
                     actor.displayName?.[0] ||
                     actor.handle[0] ||
@@ -140,10 +140,10 @@ function SearchPage() {
                 </div>
               )}
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-[var(--color-fg)] truncate">
+                <div className="truncate text-sm font-medium text-[var(--color-fg)]">
                   {actor.displayName || actor.handle}
                 </div>
-                <div className="text-xs text-[var(--color-fg-muted)] truncate">
+                <div className="truncate text-xs text-[var(--color-fg-muted)]">
                   @{actor.handle}
                 </div>
               </div>
@@ -153,8 +153,8 @@ function SearchPage() {
       )}
 
       {!query.trim() && (
-        <div className="text-center py-16">
-          <Search className="w-8 h-8 mx-auto text-[var(--color-fg-muted)] mb-3" />
+        <div className="py-16 text-center">
+          <Search className="mx-auto mb-3 h-8 w-8 text-[var(--color-fg-muted)]" />
           <p className="text-[var(--color-fg-muted)]">{t("find-streamers")}</p>
         </div>
       )}
diff --git a/js/web/src/routes/settings.tsx b/js/web/src/routes/settings.tsx
index 0462303d9..431735f0d 100644
--- a/js/web/src/routes/settings.tsx
+++ b/js/web/src/routes/settings.tsx
@@ -104,7 +104,7 @@ function NavGroupItem({ item }: { item: NavGroup }) {
           className={cn(
             linkClass,
             "w-full justify-between",
-            isChildActive && "text-(--color-fg) font-medium",
+            isChildActive && "font-medium text-(--color-fg)",
           )}
         >
           <span className="flex items-center gap-2">
@@ -119,7 +119,7 @@ function NavGroupItem({ item }: { item: NavGroup }) {
           />
         </button>
         {open && (
-          <div className="ml-4.5 border-l border-(--color-border) space-y-0.5 mt-0.5 mb-1">
+          <div className="mt-0.5 mb-1 ml-4.5 space-y-0.5 border-l border-(--color-border)">
             {item.children.map((child) => (
               <Link key={child.to} to={child.to} className={childLinkClass}>
                 <child.icon className="size-3.5" />
@@ -136,7 +136,7 @@ function NavGroupItem({ item }: { item: NavGroup }) {
 function DisplayNavItem({ item }: { item: NavItem }) {
   if (item.role === "divider") {
     return (
-      <div className="border-b border-(--color-border) my-0.5 lg:mx-2 lg:border-b-0 lg:my-2" />
+      <div className="my-0.5 border-b border-(--color-border) lg:mx-2 lg:my-2 lg:border-b-0" />
     );
   }
 
@@ -149,7 +149,7 @@ function DisplayNavItem({ item }: { item: NavItem }) {
 
   return (
     <Link to={item.to} className={linkClass}>
-      <Icon className="size-4 hidden lg:block" />
+      <Icon className="hidden size-4 lg:block" />
       {t(item.labelKey)}
     </Link>
   );
@@ -159,19 +159,19 @@ function SettingsLayout() {
   const { t } = useTranslation("settings");
 
   return (
-    <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 px-4 lg:px-6 py-6 lg:py-10 mx-auto max-w-screen">
+    <div className="mx-auto flex max-w-screen flex-col gap-6 px-4 py-6 lg:flex-row lg:gap-8 lg:px-6 lg:py-10">
       {/* Mobile: floating sticky nav */}
-      <div className="lg:hidden sticky top-0 z-30 -mx-4 px-4 py-2 bg-[var(--color-bg)]/80 backdrop-blur-md">
-        <h2 className="text-lg font-semibold tracking-tight mb-2 font-display">
+      <div className="sticky top-0 z-30 -mx-4 bg-[var(--color-bg)]/80 px-4 py-2 backdrop-blur-md lg:hidden">
+        <h2 className="font-display mb-2 text-lg font-semibold tracking-tight">
           {t("settings-title")}
         </h2>
 
         <div className="relative -mx-4 px-4">
-          <div className="pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-[var(--color-bg)] to-transparent z-10" />
-          <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-[var(--color-bg)] to-transparent z-10" />
+          <div className="pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-5 bg-gradient-to-r from-[var(--color-bg)] to-transparent" />
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-5 bg-gradient-to-l from-[var(--color-bg)] to-transparent" />
 
           <nav
-            className="flex gap-0.5 overflow-x-auto scrollbar-none -mx-5 px-5"
+            className="-mx-5 flex scrollbar-none gap-0.5 overflow-x-auto px-5"
             style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
           >
             {NAV_ITEMS.map((item, i) => (
@@ -185,9 +185,9 @@ function SettingsLayout() {
       </div>
 
       {/* Desktop: sidebar */}
-      <div className="hidden lg:block lg:w-52 shrink-0">
-        <nav className="flex flex-col gap-0.5 sticky top-6 self-start">
-          <p className="text-2xl font-semibold px-2 pb-3 font-display">
+      <div className="hidden shrink-0 lg:block lg:w-52">
+        <nav className="sticky top-6 flex flex-col gap-0.5 self-start">
+          <p className="font-display px-2 pb-3 text-2xl font-semibold">
             {t("settings-title")}
           </p>
           {NAV_ITEMS.map((item, i) => (
@@ -199,7 +199,7 @@ function SettingsLayout() {
         </nav>
       </div>
 
-      <div className="flex-1 min-w-0 md:max-w-md xl:max-w-xl w-full md:w-screen mt-0.75">
+      <div className="mt-0.75 w-full min-w-0 flex-1 md:w-screen md:max-w-md xl:max-w-xl">
         <Outlet />
       </div>
     </div>
diff --git a/js/web/src/routes/settings/about.tsx b/js/web/src/routes/settings/about.tsx
index ce11cb184..fe09c969b 100644
--- a/js/web/src/routes/settings/about.tsx
+++ b/js/web/src/routes/settings/about.tsx
@@ -32,7 +32,7 @@ function AboutSettings() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("about")}</h1>
+      <h1 className="font-display text-xl font-semibold">{t("about")}</h1>
 
       <CardMenuSection>
         <div className="flex items-center justify-between px-3 py-2.5">
@@ -42,7 +42,7 @@ function AboutSettings() {
         <button
           type="button"
           onClick={handleVersionPress}
-          className="flex items-center justify-between px-3 py-2.5 w-full hover:bg-[var(--color-bg)] transition-colors"
+          className="flex w-full items-center justify-between px-3 py-2.5 transition-colors hover:bg-[var(--color-bg)]"
         >
           <span className="text-sm">Build</span>
           <span className="text-sm text-[var(--color-fg-muted)]">
@@ -55,7 +55,7 @@ function AboutSettings() {
         <CardMenuSection>
           <div className="flex items-center justify-between px-3 py-2.5">
             <span className="text-sm">Developer Mode</span>
-            <span className="text-xs px-2 py-0.5 rounded bg-green-500/20 text-green-400 font-mono">
+            <span className="rounded bg-green-500/20 px-2 py-0.5 font-mono text-xs text-green-400">
               active
             </span>
           </div>
@@ -68,7 +68,7 @@ function AboutSettings() {
             href="https://privacy.stream.place"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center justify-between px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors"
+            className="flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-[var(--color-bg)]"
           >
             <span className="text-sm">Privacy Policy</span>
             <svg
diff --git a/js/web/src/routes/settings/account.tsx b/js/web/src/routes/settings/account.tsx
index c85828635..ec59b7c28 100644
--- a/js/web/src/routes/settings/account.tsx
+++ b/js/web/src/routes/settings/account.tsx
@@ -33,10 +33,12 @@ function AccountSettings() {
           <img
             src={userProfile.avatar}
             alt=""
-            className="w-20 h-20 rounded-full"
+            className="h-20 w-20 rounded-full"
           />
         )}
-        <h1 className="text-xl font-semibold font-display">@{userProfile.handle}</h1>
+        <h1 className="font-display text-xl font-semibold">
+          @{userProfile.handle}
+        </h1>
       </div>
 
       <CardMenuSection>
@@ -44,7 +46,7 @@ function AccountSettings() {
           href={`https://bsky.app/profile/${userProfile.handle}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center justify-between px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors"
+          className="flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-[var(--color-bg)]"
         >
           <span className="text-sm">{t("edit-profile-bluesky")}</span>
           <svg
@@ -68,7 +70,7 @@ function AccountSettings() {
       <CardMenuSection>
         <Link
           to="/settings/badges"
-          className="flex items-center justify-between px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors"
+          className="flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-[var(--color-bg)]"
         >
           <span className="text-sm">{t("badges")}</span>
           <svg
@@ -96,7 +98,7 @@ function AccountSettings() {
             void signOut();
             navigate({ to: "/settings" });
           }}
-          className="flex items-center gap-3 px-3 py-2.5 w-full hover:bg-[var(--color-bg)] transition-colors text-left"
+          className="flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-bg)]"
         >
           <LogOut size={20} className="text-[var(--color-fg-muted)]" />
           <span className="text-sm">{t("log-out")}</span>
diff --git a/js/web/src/routes/settings/advanced.tsx b/js/web/src/routes/settings/advanced.tsx
index 8177925a7..2f0b9afed 100644
--- a/js/web/src/routes/settings/advanced.tsx
+++ b/js/web/src/routes/settings/advanced.tsx
@@ -56,14 +56,14 @@ function AdvancedSettings() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("advanced")}</h1>
+      <h1 className="font-display text-xl font-semibold">{t("advanced")}</h1>
 
       <Card>
         <CardRow>
           <div className="flex items-center justify-between">
             <div>
               <div className="text-sm font-medium">{t("use-custom-node")}</div>
-              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+              <div className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                 {t("default-url", { url: defaultUrl })}
               </div>
             </div>
@@ -83,13 +83,13 @@ function AdvancedSettings() {
                 }
                 spellCheck={false}
                 autoComplete="off"
-                className="flex-1 h-9 rounded-lg border border-[var(--color-border)] bg-transparent px-3 text-sm font-mono outline-none focus:border-[var(--color-accent)]"
+                className="h-9 flex-1 rounded-lg border border-[var(--color-border)] bg-transparent px-3 font-mono text-sm outline-none focus:border-[var(--color-accent)]"
               />
               <button
                 type="button"
                 onClick={onSubmitUrl}
                 disabled={!newUrl.trim()}
-                className="h-9 px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-[var(--color-accent-fg)] text-sm font-medium"
+                className="h-9 rounded-md bg-[var(--color-accent)] px-4 text-sm font-medium text-[var(--color-accent-fg)] hover:bg-[var(--color-accent-hover)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {t("save-button")}
               </button>
@@ -103,7 +103,7 @@ function AdvancedSettings() {
           <div className="flex items-center justify-between gap-4">
             <div>
               <div className="text-sm font-medium">{t("try-new-web")}</div>
-              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+              <div className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                 {t("try-new-web-description")}
               </div>
             </div>
diff --git a/js/web/src/routes/settings/backup.tsx b/js/web/src/routes/settings/backup.tsx
index 5c99cdc59..2047f5dc9 100644
--- a/js/web/src/routes/settings/backup.tsx
+++ b/js/web/src/routes/settings/backup.tsx
@@ -164,7 +164,7 @@ function BackupSettings() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("backup")}</h1>
+      <h1 className="font-display text-xl font-semibold">{t("backup")}</h1>
 
       {loading ? (
         <div className="text-sm text-[var(--color-fg-muted)]">Loading…</div>
@@ -175,7 +175,7 @@ function BackupSettings() {
             <div className="flex items-center justify-between">
               <div>
                 <div className="text-sm font-medium">{t("backup-enabled")}</div>
-                <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+                <div className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                   {t("backup-enabled-description")}
                 </div>
               </div>
@@ -186,9 +186,9 @@ function BackupSettings() {
           {/* S3 configuration (shown when enabled) */}
           {enabled && (
             <>
-              <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4 space-y-4">
+              <div className="space-y-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4">
                 <div>
-                  <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+                  <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
                     {t("backup-connection-url")}
                   </label>
                   <Input
@@ -219,9 +219,9 @@ function BackupSettings() {
                 </div>
               </div>
 
-              <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+              <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
                 <div className="flex items-center justify-between px-3 py-2.5">
-                  <span className="text-sm shrink-0">
+                  <span className="shrink-0 text-sm">
                     {t("backup-endpoint")}
                   </span>
                   <Input
@@ -230,22 +230,22 @@ function BackupSettings() {
                       handleConfigChange("endpoint", e.target.value)
                     }
                     placeholder="s3.us-east-1.example.com"
-                    className="text-right font-mono text-xs max-w-[250px]"
+                    className="max-w-[250px] text-right font-mono text-xs"
                   />
                 </div>
                 <div className="flex items-center justify-between px-3 py-2.5">
-                  <span className="text-sm shrink-0">{t("backup-bucket")}</span>
+                  <span className="shrink-0 text-sm">{t("backup-bucket")}</span>
                   <Input
                     value={config.bucket}
                     onChange={(e) =>
                       handleConfigChange("bucket", e.target.value)
                     }
                     placeholder="my-bucket"
-                    className="text-right font-mono text-xs max-w-[250px]"
+                    className="max-w-[250px] text-right font-mono text-xs"
                   />
                 </div>
                 <div className="flex items-center justify-between px-3 py-2.5">
-                  <span className="text-sm shrink-0">
+                  <span className="shrink-0 text-sm">
                     {t("backup-access-key")}
                   </span>
                   <Input
@@ -254,11 +254,11 @@ function BackupSettings() {
                       handleConfigChange("accessKey", e.target.value)
                     }
                     placeholder="ACCESS_KEY"
-                    className="text-right font-mono text-xs max-w-[250px]"
+                    className="max-w-[250px] text-right font-mono text-xs"
                   />
                 </div>
                 <div className="flex items-center justify-between px-3 py-2.5">
-                  <span className="text-sm shrink-0">
+                  <span className="shrink-0 text-sm">
                     {t("backup-secret-key")}
                   </span>
                   <Input
@@ -274,7 +274,7 @@ function BackupSettings() {
                         ? t("backup-secret-key-set-placeholder")
                         : t("backup-secret-key-placeholder")
                     }
-                    className="text-right font-mono text-xs max-w-[250px]"
+                    className="max-w-[250px] text-right font-mono text-xs"
                   />
                 </div>
               </div>
diff --git a/js/web/src/routes/settings/badge-issuer.tsx b/js/web/src/routes/settings/badge-issuer.tsx
index e07e21114..ee3702bc7 100644
--- a/js/web/src/routes/settings/badge-issuer.tsx
+++ b/js/web/src/routes/settings/badge-issuer.tsx
@@ -189,14 +189,14 @@ function BadgeIssuerPanel() {
             setSelectedDef(null);
             setView("main");
           }}
-          className="flex items-center gap-2 text-sm text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+          className="flex items-center gap-2 text-sm text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
         >
           <ChevronLeft size={16} />
           {t("issue-badges-back-to-definitions")}
         </button>
 
         <div>
-          <h1 className="text-lg font-semibold font-display">
+          <h1 className="font-display text-lg font-semibold">
             {t("issue-badges-issue-badge")}
           </h1>
           <p className="text-sm text-[var(--color-fg-muted)]">
@@ -209,7 +209,7 @@ function BadgeIssuerPanel() {
         <BadgeDefRow def={selectedDef} />
 
         <div className="space-y-3">
-          <label className="text-xs font-medium text-[var(--color-fg-muted)] block">
+          <label className="block text-xs font-medium text-[var(--color-fg-muted)]">
             {t("issue-badges-recipient-did")}
           </label>
           <Input
@@ -236,14 +236,14 @@ function BadgeIssuerPanel() {
         <button
           type="button"
           onClick={() => setView("main")}
-          className="flex items-center gap-2 text-sm text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors"
+          className="flex items-center gap-2 text-sm text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
         >
           <ChevronLeft size={16} />
           {t("issue-badges-back-to-definitions")}
         </button>
 
         <div>
-          <h1 className="text-lg font-semibold font-display">
+          <h1 className="font-display text-lg font-semibold">
             {t("issue-badges-create-definition")}
           </h1>
           <p className="text-sm text-[var(--color-fg-muted)]">
@@ -254,7 +254,7 @@ function BadgeIssuerPanel() {
         <div className="space-y-4">
           {/* Badge type */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-2 block">
+            <label className="mb-2 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("issue-badges-badge-type")}
             </label>
             <div className="flex gap-2">
@@ -273,7 +273,7 @@ function BadgeIssuerPanel() {
 
           {/* Name */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("issue-badges-badge-name")}
             </label>
             <Input
@@ -286,7 +286,7 @@ function BadgeIssuerPanel() {
 
           {/* Description */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-1 block">
+            <label className="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("issue-badges-description-optional")}
             </label>
             <Input
@@ -299,7 +299,7 @@ function BadgeIssuerPanel() {
 
           {/* Image */}
           <div>
-            <label className="text-xs font-medium text-[var(--color-fg-muted)] mb-2 block">
+            <label className="mb-2 block text-xs font-medium text-[var(--color-fg-muted)]">
               {t("issue-badges-image-optional")}
             </label>
             <div className="flex items-center gap-3">
@@ -308,7 +308,7 @@ function BadgeIssuerPanel() {
                   <img
                     src={createImageUri}
                     alt=""
-                    className="w-12 h-12 rounded"
+                    className="h-12 w-12 rounded"
                   />
                   <button
                     type="button"
@@ -316,7 +316,7 @@ function BadgeIssuerPanel() {
                       setCreateImageUri(null);
                       setCreateImageBlob(null);
                     }}
-                    className="p-1 rounded hover:bg-[var(--color-bg)]"
+                    className="rounded p-1 hover:bg-[var(--color-bg)]"
                   >
                     <X size={16} className="text-[var(--color-fg-muted)]" />
                   </button>
@@ -353,9 +353,9 @@ function BadgeIssuerPanel() {
       <button
         type="button"
         onClick={() => setView("create")}
-        className="flex items-center gap-3 w-full px-3 py-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] hover:bg-[var(--color-bg)] transition-colors"
+        className="flex w-full items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3 py-3 transition-colors hover:bg-[var(--color-bg)]"
       >
-        <div className="w-8 h-8 rounded-full bg-[var(--color-accent)]/10 flex items-center justify-center">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-accent)]/10">
           <Plus size={16} className="text-[var(--color-accent)]" />
         </div>
         <div className="text-left">
@@ -370,13 +370,13 @@ function BadgeIssuerPanel() {
 
       {/* Last result */}
       {lastResult && (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/10 border border-green-500/20">
-          <Check size={14} className="text-green-500 shrink-0" />
+        <div className="flex items-center gap-2 rounded-lg border border-green-500/20 bg-green-500/10 px-3 py-2">
+          <Check size={14} className="shrink-0 text-green-500" />
           <div className="min-w-0">
             <div className="text-sm font-medium text-green-500">
               {lastResult.label}
             </div>
-            <div className="text-xs text-[var(--color-fg-muted)] truncate font-mono">
+            <div className="truncate font-mono text-xs text-[var(--color-fg-muted)]">
               {lastResult.uri}
             </div>
           </div>
@@ -388,13 +388,13 @@ function BadgeIssuerPanel() {
         <div className="text-sm text-[var(--color-fg-muted)]">Loading…</div>
       ) : defs.length > 0 ? (
         <section>
-          <h2 className="text-sm font-semibold font-display mb-1">
+          <h2 className="font-display mb-1 text-sm font-semibold">
             {t("issue-badges-your-definitions")}
           </h2>
-          <p className="text-xs text-[var(--color-fg-muted)] mb-3">
+          <p className="mb-3 text-xs text-[var(--color-fg-muted)]">
             {t("issue-badges-tap-to-issue")}
           </p>
-          <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+          <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
             {defs.map((def) => (
               <button
                 key={def.uri}
@@ -403,20 +403,20 @@ function BadgeIssuerPanel() {
                   setSelectedDef(def);
                   setView("issue");
                 }}
-                className="flex items-center gap-3 w-full px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors text-left"
+                className="flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-bg)]"
               >
                 {def.value.image ? (
                   <img
                     src={`https://cdn.bsky.app/img/feed_fullsize/plain/${getDidFromAtUri(def.uri)}/${def.value.image.ref.toString()}`}
                     alt=""
-                    className="w-7 h-7 rounded"
+                    className="h-7 w-7 rounded"
                   />
                 ) : (
-                  <div className="w-7 h-7 rounded bg-[var(--color-bg)] flex items-center justify-center text-xs">
+                  <div className="flex h-7 w-7 items-center justify-center rounded bg-[var(--color-bg)] text-xs">
                     🎭
                   </div>
                 )}
-                <div className="flex-1 min-w-0">
+                <div className="min-w-0 flex-1">
                   <div className="text-sm font-medium">{def.value.name}</div>
                   <div className="text-xs text-[var(--color-fg-muted)]">
                     {def.value.badgeType.split("#")[1]}
@@ -433,15 +433,15 @@ function BadgeIssuerPanel() {
 
 function BadgeDefRow({ def }: { def: BadgeDefItem }) {
   return (
-    <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
+    <div className="flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3 py-2.5">
       {def.value.image ? (
         <img
           src={`https://cdn.bsky.app/img/feed_fullsize/plain/${getDidFromAtUri(def.uri)}/${def.value.image.ref.toString()}`}
           alt=""
-          className="w-7 h-7 rounded"
+          className="h-7 w-7 rounded"
         />
       ) : (
-        <div className="w-7 h-7 rounded bg-[var(--color-bg)] flex items-center justify-center text-xs">
+        <div className="flex h-7 w-7 items-center justify-center rounded bg-[var(--color-bg)] text-xs">
           🎭
         </div>
       )}
diff --git a/js/web/src/routes/settings/badges.tsx b/js/web/src/routes/settings/badges.tsx
index 800b1e630..99e7e2b60 100644
--- a/js/web/src/routes/settings/badges.tsx
+++ b/js/web/src/routes/settings/badges.tsx
@@ -161,22 +161,22 @@ function BadgeSelectionManager() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("badges")}</h1>
+      <h1 className="font-display text-xl font-semibold">{t("badges")}</h1>
 
       {loading ? (
         <div className="text-sm text-[var(--color-fg-muted)]">Loading…</div>
       ) : !hasStreamerBadges && !hasUserBadges ? (
-        <div className="text-center py-8 text-sm text-[var(--color-fg-muted)]">
+        <div className="py-8 text-center text-sm text-[var(--color-fg-muted)]">
           {t("badges-empty-state")}
         </div>
       ) : (
         <div className="space-y-6">
           {hasStreamerBadges && (
             <section>
-              <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)] mb-2">
+              <h2 className="mb-2 text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
                 {t("badges-streamer-section")}
               </h2>
-              <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+              <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
                 {streamerSlot!.available.map((badge) => (
                   <BadgeRow
                     key={badge.issuanceUri}
@@ -191,10 +191,10 @@ function BadgeSelectionManager() {
 
           {hasUserBadges && (
             <section>
-              <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)] mb-2">
+              <h2 className="mb-2 text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
                 {t("badges-cosmetic-section")}
               </h2>
-              <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+              <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
                 {userSlot!.available.map((badge) => (
                   <BadgeRow
                     key={badge.issuanceUri}
@@ -230,18 +230,18 @@ function BadgeRow({
       type="button"
       onClick={onToggle}
       disabled={toggling}
-      className="flex items-center gap-3 w-full px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors text-left disabled:opacity-50"
+      className="flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-bg)] disabled:opacity-50"
     >
       {badge.imageUrl ? (
-        <img src={badge.imageUrl} alt="" className="w-6 h-6 rounded" />
+        <img src={badge.imageUrl} alt="" className="h-6 w-6 rounded" />
       ) : (
-        <div className="w-6 h-6 rounded bg-[var(--color-bg)]" />
+        <div className="h-6 w-6 rounded bg-[var(--color-bg)]" />
       )}
 
-      <div className="flex-1 min-w-0">
+      <div className="min-w-0 flex-1">
         <div className="text-sm font-medium">{badgeName}</div>
         {badge.description && (
-          <div className="text-xs text-[var(--color-fg-muted)] truncate">
+          <div className="truncate text-xs text-[var(--color-fg-muted)]">
             {badge.description}
           </div>
         )}
@@ -251,13 +251,13 @@ function BadgeRow({
       </div>
 
       {toggling ? (
-        <div className="w-5 h-5 rounded-full border-2 border-[var(--color-accent)] border-t-transparent animate-spin" />
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-[var(--color-accent)] border-t-transparent" />
       ) : isSelected ? (
-        <div className="w-5 h-5 rounded-full bg-[var(--color-accent)] flex items-center justify-center">
+        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-accent)]">
           <Check size={12} className="text-white" />
         </div>
       ) : (
-        <div className="w-5 h-5 rounded-full border-2 border-[var(--color-border)]" />
+        <div className="h-5 w-5 rounded-full border-2 border-[var(--color-border)]" />
       )}
     </button>
   );
diff --git a/js/web/src/routes/settings/branding.tsx b/js/web/src/routes/settings/branding.tsx
index fb41ba401..8a582b992 100644
--- a/js/web/src/routes/settings/branding.tsx
+++ b/js/web/src/routes/settings/branding.tsx
@@ -153,8 +153,10 @@ function BrandingAdmin() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-semibold font-display">{t("branding-admin")}</h1>
-        <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+        <h1 className="font-display text-xl font-semibold">
+          {t("branding-admin")}
+        </h1>
+        <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
           {t("branding-admin-description")}
         </p>
       </div>
@@ -165,11 +167,11 @@ function BrandingAdmin() {
 
       {/* Broadcaster DID */}
       <section className="space-y-3">
-        <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)]">
+        <h2 className="text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
           {t("branding-configuration")}
         </h2>
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4 space-y-2">
-          <label className="text-xs font-medium text-[var(--color-fg-muted)] block">
+        <div className="space-y-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4">
+          <label className="block text-xs font-medium text-[var(--color-fg-muted)]">
             {t("branding-broadcaster-did")}
           </label>
           <Input
@@ -185,10 +187,10 @@ function BrandingAdmin() {
 
       {/* Text settings */}
       <section className="space-y-3">
-        <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)]">
+        <h2 className="text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
           {t("branding-text-settings")}
         </h2>
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+        <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
           <BrandingTextField
             label={t("branding-site-title")}
             value={siteTitle}
@@ -219,10 +221,10 @@ function BrandingAdmin() {
 
       {/* Colors */}
       <section className="space-y-3">
-        <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)]">
+        <h2 className="text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
           {t("branding-colors")}
         </h2>
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+        <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
           <BrandingTextField
             label={t("branding-primary-color")}
             value={primaryColor}
@@ -244,10 +246,10 @@ function BrandingAdmin() {
 
       {/* Images */}
       <section className="space-y-3">
-        <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)]">
+        <h2 className="text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
           {t("branding-images")}
         </h2>
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+        <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
           <BrandingImageField
             label={t("branding-main-logo")}
             description={t("branding-main-logo-description")}
@@ -277,11 +279,11 @@ function BrandingAdmin() {
 
       {/* Legal links */}
       <section className="space-y-3">
-        <h2 className="text-sm font-medium uppercase tracking-wide text-[var(--color-fg-muted)]">
+        <h2 className="text-sm font-medium tracking-wide text-[var(--color-fg-muted)] uppercase">
           {t("branding-legal-links")}
         </h2>
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4 space-y-3">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <div className="space-y-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-4">
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
             <Input
               value={legalLinkText}
               onChange={(e) => setLegalLinkText(e.target.value)}
@@ -320,7 +322,7 @@ function BrandingAdmin() {
         </div>
 
         {legalLinks.length > 0 && (
-          <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] divide-y divide-[var(--color-border)]">
+          <div className="divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
             {legalLinks.map((link, index) => (
               <div
                 key={index}
@@ -328,11 +330,11 @@ function BrandingAdmin() {
               >
                 <div className="min-w-0">
                   <div className="text-sm font-medium">{link.text}</div>
-                  <div className="text-xs text-[var(--color-fg-muted)] truncate">
+                  <div className="truncate text-xs text-[var(--color-fg-muted)]">
                     {link.url}
                   </div>
                 </div>
-                <div className="flex gap-1 shrink-0 ml-2">
+                <div className="ml-2 flex shrink-0 gap-1">
                   <Button
                     variant="ghost"
                     size="xs"
@@ -381,7 +383,7 @@ function BrandingTextField({
 }) {
   const { t } = useTranslation("settings");
   return (
-    <div className="p-4 space-y-2">
+    <div className="space-y-2 p-4">
       <div className="text-sm font-medium">{label}</div>
       <div className="flex gap-2">
         <Input
@@ -437,7 +439,7 @@ function BrandingImageField({
   };
 
   return (
-    <div className="p-4 space-y-2">
+    <div className="space-y-2 p-4">
       <div className="text-sm font-medium">{label}</div>
       <div className="text-xs text-[var(--color-fg-muted)]">{description}</div>
       <div className="flex gap-2">
diff --git a/js/web/src/routes/settings/chat-profile.tsx b/js/web/src/routes/settings/chat-profile.tsx
index c50cca07f..b157f3a41 100644
--- a/js/web/src/routes/settings/chat-profile.tsx
+++ b/js/web/src/routes/settings/chat-profile.tsx
@@ -109,11 +109,11 @@ function ChatProfileSettings() {
     <div className="space-y-6">
       {/* Name color */}
       <div>
-        <h3 className="text-sm font-medium mb-3">
+        <h3 className="mb-3 text-sm font-medium">
           {t("chat-profile-name-color")}
         </h3>
         <CardMenuSection>
-          <div className="px-3 py-3 space-y-3">
+          <div className="space-y-3 px-3 py-3">
             <p className="text-xs text-[var(--color-fg-muted)]">
               {t("chat-profile-name-color-description")}
             </p>
@@ -134,7 +134,7 @@ function ChatProfileSettings() {
                 type="color"
                 value={color}
                 onChange={(e) => setColor(e.target.value)}
-                className="w-10 h-10 rounded-md border border-[var(--color-border)] cursor-pointer bg-transparent p-0.5"
+                className="h-10 w-10 cursor-pointer rounded-md border border-[var(--color-border)] bg-transparent p-0.5"
               />
               <input
                 type="text"
@@ -152,7 +152,7 @@ function ChatProfileSettings() {
                     setColor(defaultHex);
                   }
                 }}
-                className="w-24 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1.5 text-sm font-mono"
+                className="w-24 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1.5 font-mono text-sm"
                 maxLength={7}
               />
             </div>
@@ -162,14 +162,14 @@ function ChatProfileSettings() {
 
       {/* Self labels */}
       <div>
-        <h3 className="text-sm font-medium mb-3">
+        <h3 className="mb-3 text-sm font-medium">
           {t("chat-profile-self-labels")}
         </h3>
         <CardMenuSection>
           <div className="flex items-center justify-between px-3 py-2.5">
             <div>
               <span className="text-sm">{t("chat-profile-label-bot")}</span>
-              <p className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+              <p className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                 {t("chat-profile-label-bot-description")}
               </p>
             </div>
@@ -178,16 +178,10 @@ function ChatProfileSettings() {
               role="switch"
               aria-checked={isBot}
               onClick={() => setIsBot(!isBot)}
-              className={`
-                relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors
-                ${isBot ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"}
-              `}
+              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${isBot ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"} `}
             >
               <span
-                className={`
-                  pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transition-transform
-                  ${isBot ? "translate-x-4" : "translate-x-0"}
-                `}
+                className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transition-transform ${isBot ? "translate-x-4" : "translate-x-0"} `}
               />
             </button>
           </div>
@@ -201,7 +195,7 @@ function ChatProfileSettings() {
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className="rounded-md bg-[var(--color-accent)] px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50 transition-opacity"
+            className="rounded-md bg-[var(--color-accent)] px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
           >
             {saving ? t("saving") : t("save-button")}
           </button>
diff --git a/js/web/src/routes/settings/languages.tsx b/js/web/src/routes/settings/languages.tsx
index 0838d5b6b..020e1e8a8 100644
--- a/js/web/src/routes/settings/languages.tsx
+++ b/js/web/src/routes/settings/languages.tsx
@@ -27,8 +27,10 @@ function LanguagesSettings() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-semibold font-display">{t("language-selection")}</h1>
-        <p className="text-sm text-[var(--color-fg-muted)] mt-1">
+        <h1 className="font-display text-xl font-semibold">
+          {t("language-selection")}
+        </h1>
+        <p className="mt-1 text-sm text-[var(--color-fg-muted)]">
           {t("language-selection-description")}
         </p>
       </div>
@@ -61,7 +63,7 @@ function LanguagesSettings() {
                 void i18n.changeLanguage(code);
                 setSearchQuery("");
               }}
-              className="flex items-center justify-between w-full px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors text-left"
+              className="flex w-full items-center justify-between px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-bg)]"
             >
               <div className="flex items-center gap-2">
                 <span>{info.flag}</span>
@@ -73,7 +75,7 @@ function LanguagesSettings() {
                     {info.nativeName}
                   </span>
                   {info.name !== info.nativeName && (
-                    <span className="text-xs text-[var(--color-fg-muted)] ml-2">
+                    <span className="ml-2 text-xs text-[var(--color-fg-muted)]">
                       {info.name}
                     </span>
                   )}
diff --git a/js/web/src/routes/settings/privacy.tsx b/js/web/src/routes/settings/privacy.tsx
index 6190cf72f..655b600fa 100644
--- a/js/web/src/routes/settings/privacy.tsx
+++ b/js/web/src/routes/settings/privacy.tsx
@@ -33,7 +33,9 @@ function PrivacySettings() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-semibold font-display">{t("privacy-security")}</h1>
+      <h1 className="font-display text-xl font-semibold">
+        {t("privacy-security")}
+      </h1>
 
       <Card>
         <CardRow>
@@ -42,7 +44,7 @@ function PrivacySettings() {
               <div className="text-sm font-medium">
                 {t("debug-recording-title", { host: u.host })}
               </div>
-              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
+              <div className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
                 {t("debug-recording-description")}
               </div>
             </div>
diff --git a/js/web/src/routes/videos.tsx b/js/web/src/routes/videos.tsx
index d7799d85c..6b00327d0 100644
--- a/js/web/src/routes/videos.tsx
+++ b/js/web/src/routes/videos.tsx
@@ -38,13 +38,13 @@ function VideosPage() {
   }, [loadMore]);
 
   return (
-    <div className="max-w-[1600px] mx-auto px-4 py-6">
-      <h1 className="text-2xl font-semibold font-display text-[var(--color-fg)] mb-6">
+    <div className="mx-auto max-w-[1600px] px-4 py-6">
+      <h1 className="font-display mb-6 text-2xl font-semibold text-[var(--color-fg)]">
         {t("videos-title")}
       </h1>
 
       {videos.length > 0 && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {videos.map((video) => (
             <VideoCard
               key={video.uri}
@@ -56,15 +56,15 @@ function VideosPage() {
       )}
 
       {loading && videos.length === 0 && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {Array.from({ length: 8 }).map((_, i) => (
             <div key={i} className="animate-pulse space-y-2">
               <div className="aspect-video rounded-xl bg-[var(--color-bg-elevated)]" />
               <div className="flex gap-2.5">
-                <div className="w-8 h-8 rounded-full bg-[var(--color-bg-elevated)]" />
+                <div className="h-8 w-8 rounded-full bg-[var(--color-bg-elevated)]" />
                 <div className="flex-1 space-y-1.5">
-                  <div className="h-3.5 bg-[var(--color-bg-elevated)] rounded w-3/4" />
-                  <div className="h-3 bg-[var(--color-bg-elevated)] rounded w-1/2" />
+                  <div className="h-3.5 w-3/4 rounded bg-[var(--color-bg-elevated)]" />
+                  <div className="h-3 w-1/2 rounded bg-[var(--color-bg-elevated)]" />
                 </div>
               </div>
             </div>
@@ -73,8 +73,8 @@ function VideosPage() {
       )}
 
       {!loading && videos.length === 0 && (
-        <div className="text-center py-20">
-          <div className="text-2xl mb-2">🎬</div>
+        <div className="py-20 text-center">
+          <div className="mb-2 text-2xl">🎬</div>
           <p className="text-[var(--color-fg-muted)]">
             {error ? t("could-not-load-videos", { error }) : t("no-videos-yet")}
           </p>
@@ -85,7 +85,7 @@ function VideosPage() {
       {hasMore && <div ref={sentinelRef} className="h-1" />}
       {loading && videos.length > 0 && (
         <div className="flex justify-center py-8">
-          <div className="w-6 h-6 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-[var(--color-border)] border-t-[var(--color-accent)]" />
         </div>
       )}
     </div>
diff --git a/js/web/src/styles.css b/js/web/src/styles.css
index 6037168f3..f842e5bce 100644
--- a/js/web/src/styles.css
+++ b/js/web/src/styles.css
@@ -8,8 +8,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 :root {
@@ -137,13 +137,15 @@ code {
 
   --color-info: var(--color-chart-3);
 
-  --font-display: "Valley Sans", -apple-system, BlinkMacSystemFont,
-    "SF Pro Display", "Segoe UI", system-ui, sans-serif;
-  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui,
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, sans-serif;
-  --font-mono: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
-    Consolas, monospace;
+  --font-display:
+    "Valley Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display",
+    "Segoe UI", system-ui, sans-serif;
+  --font-sans:
+    "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    monospace;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: var(--radius);
@@ -153,7 +155,7 @@ code {
 
 @layer base {
   * {
-    @apply border-border outline-ring/50 transition-colors font-sans;
+    @apply border-border outline-ring/50 font-sans transition-colors;
     font-size: 16px;
   }
   body {
diff --git a/package.json b/package.json
index d2e68ce6e..2aeddcc5b 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "knip": "^5.59.1",
     "lerna": "^8.2.2",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.8.4",
+    "prettier": "3.8.4",
     "typescript": "^5.8.3"
   },
   "workspaces": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f4ce94d2..73729133b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,7 +21,7 @@ importers:
         version: 0.1.0
       prettier-plugin-organize-imports:
         specifier: ^4.1.0
-        version: 4.3.0(prettier@3.4.2)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.8.4)(typescript@5.9.3)
       quicktype:
         specifier: ^23.2.6
         version: 23.2.6(@swc/core@1.15.18(@swc/helpers@0.5.17))(encoding@0.1.13)
@@ -45,8 +45,8 @@ importers:
         specifier: ^15.2.10
         version: 15.5.2
       prettier:
-        specifier: 3.4.2
-        version: 3.4.2
+        specifier: 3.8.4
+        version: 3.8.4
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
@@ -337,7 +337,7 @@ importers:
         version: 2.47.2(bufferutil@4.0.8)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.4.3)
       zustand:
         specifier: ^5.0.5
-        version: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+        version: 5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
     devDependencies:
       '@babel/core':
         specifier: ^7.26.0
@@ -422,10 +422,10 @@ importers:
         version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@rn-primitives/dropdown-menu':
         specifier: ^1.2.0
-        version: 1.2.0(@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@10.1.1)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)))(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
+        version: 1.2.0(@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@11.1.8)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)))(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
       '@rn-primitives/portal':
         specifier: ^1.3.0
-        version: 1.3.0(@types/react@19.2.14)(immer@10.1.1)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+        version: 1.3.0(@types/react@19.2.14)(immer@11.1.8)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
       '@rn-primitives/slider':
         specifier: ^1.2.0
         version: 1.2.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
@@ -521,7 +521,7 @@ importers:
         version: 2.47.2(bufferutil@4.0.8)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.4.3)
       zustand:
         specifier: ^5.0.5
-        version: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+        version: 5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
     devDependencies:
       '@types/react-dom':
         specifier: ^19.2.3
@@ -565,7 +565,7 @@ importers:
         version: link:../streamplace
       zustand:
         specifier: ^5.0.5
-        version: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+        version: 5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
 
   js/desktop:
     dependencies:
@@ -877,8 +877,8 @@ importers:
         specifier: ^15.7.3
         version: 15.7.4(i18next@25.8.18(typescript@5.9.3))(react-dom@19.2.0(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(typescript@5.9.3)
       recharts:
-        specifier: ^2.15.4
-        version: 2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^3.8.1
+        version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.4)(react@19.2.0)(redux@5.0.1)
       sonare:
         specifier: ^0.0.1
         version: 0.0.1
@@ -899,7 +899,7 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.5
-        version: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+        version: 5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
     devDependencies:
       '@sentry/vite-plugin':
         specifier: ^5.3.0
@@ -919,6 +919,12 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.3.0
         version: 4.7.0(vite@6.4.1(@types/node@25.5.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(yaml@2.8.2))
+      prettier:
+        specifier: 3.4.2
+        version: 3.4.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.8.0
+        version: 0.8.0(prettier-plugin-organize-imports@4.3.0(prettier@3.4.2)(typescript@5.9.3))(prettier@3.4.2)
       tailwindcss:
         specifier: ^4.3.0
         version: 4.3.0
@@ -5169,6 +5175,17 @@ packages:
     resolution: {integrity: sha512-9FC/6ho8uFa8fV50+FPy/ngWN53jaUu4GRXlAjcxIRrzhltJnpKkBG2Tp0IDraFJeWrOpk84RJ9EMEEYzaI1Bw==}
     engines: {node: '>=18'}
 
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
   '@reforged/maker-appimage@5.2.0':
     resolution: {integrity: sha512-5u7spsDMyMfwqAnTRsSipVgTIy+DW+wlfhceaRghCuTvyY8Sti8/tFhVKj4vb+dYTqPvS7m30Gl0InGv22J8RQ==}
     engines: {node: '>=19.0.0 || ^18.11.0'}
@@ -6269,6 +6286,12 @@ packages:
   '@speed-highlight/core@1.2.15':
     resolution: {integrity: sha512-BMq1K3DsElxDWawkX6eLg9+CKJrTVGCBAWVuHXVUV2u0s2711qiChLSId6ikYPfxhdYocLNt3wWwSvDiTvFabw==}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@swc/core-darwin-arm64@1.15.18':
     resolution: {integrity: sha512-+mIv7uBuSaywN3C9LNuWaX1jJJ3SKfiJuE6Lr3bd+/1Iv8oMU7oLBjYMluX1UrEPzwN2qCdY6Io0yVicABoCwQ==}
     engines: {node: '>=10'}
@@ -8841,9 +8864,6 @@ packages:
   dom-converter@0.2.0:
     resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
 
-  dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
-
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -9115,6 +9135,9 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.47.0:
+    resolution: {integrity: sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==}
+
   es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
 
@@ -10630,6 +10653,9 @@ packages:
   immer@10.1.1:
     resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
 
+  immer@11.1.8:
+    resolution: {integrity: sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -13313,6 +13339,61 @@ packages:
       vue-tsc:
         optional: true
 
+  prettier-plugin-tailwindcss@0.8.0:
+    resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -13323,8 +13404,8 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  prettier@3.8.1:
-    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+  prettier@3.8.4:
+    resolution: {integrity: sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -13772,6 +13853,18 @@ packages:
       '@types/react':
         optional: true
 
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -13804,12 +13897,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-smooth@4.0.4:
-    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -13820,12 +13907,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-transition-group@4.4.5:
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-
   react-use-websocket@4.13.0:
     resolution: {integrity: sha512-anMuVoV//g2N76Wxqvqjjo1X48r9Np3y1/gMl7arX84tAPXdy5R7sB5lO5hvCzQRYjqXwV8XMAiEBOUbyrZFrw==}
 
@@ -13924,16 +14005,13 @@ packages:
       expo:
         optional: true
 
-  recharts-scale@0.4.5:
-    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
-
-  recharts@2.15.4:
-    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
-    engines: {node: '>=14'}
-    deprecated: 1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide
+  recharts@3.8.1:
+    resolution: {integrity: sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==}
+    engines: {node: '>=18'}
     peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   rechoir@0.8.0:
     resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==}
@@ -13963,6 +14041,14 @@ packages:
     resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
     engines: {node: '>=4'}
 
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -14087,6 +14173,9 @@ packages:
     resolution: {integrity: sha512-oTeemxwoMuxxTYxXUwjkrOPfngTQehlv0/HoYFNkB4uzsP1Un1A9nI8JQKGOFkxpqkC7qkMs0lUsGrvUlbLNUA==}
     engines: {node: '>=14', npm: '>=7'}
 
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
   reselect@5.2.0:
     resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
 
@@ -15801,8 +15890,8 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  victory-vendor@36.9.2:
-    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
 
   viem@2.47.2:
     resolution: {integrity: sha512-etDIwDgmDiGaPg8rUbJtUFuC3/nAJCbhMYyfh5dOcqNNkzBWTNcS2VluPSM5JVo+9U3b2hle2RkBEq3+xyvlvg==}
@@ -16723,7 +16812,7 @@ snapshots:
       '@atproto/syntax': 0.5.0
       chalk: 4.1.2
       commander: 9.5.0
-      prettier: 3.4.2
+      prettier: 3.8.4
       ts-morph: 24.0.0
       yesno: 0.4.0
       zod: 3.25.76
@@ -19415,7 +19504,7 @@ snapshots:
       junk: 3.1.0
       parse-author: 2.0.0
       plist: 3.1.0
-      prettier: 3.8.1
+      prettier: 3.8.4
       resedit: 2.0.3
       resolve: 1.22.11
       semver: 7.7.4
@@ -22619,6 +22708,18 @@ snapshots:
 
   '@readme/openapi-schemas@3.1.0': {}
 
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@19.2.14)(react@19.2.0)(redux@5.0.1))(react@19.2.0)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.8
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.2.0
+    optionalDependencies:
+      react: 19.2.0
+      react-redux: 9.3.0(@types/react@19.2.14)(react@19.2.0)(redux@5.0.1)
+
   '@reforged/maker-appimage@5.2.0':
     dependencies:
       '@electron-forge/maker-base': 7.5.0
@@ -22631,11 +22732,11 @@ snapshots:
 
   '@reforged/maker-types@2.1.0': {}
 
-  '@rn-primitives/dropdown-menu@1.2.0(@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@10.1.1)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)))(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)':
+  '@rn-primitives/dropdown-menu@1.2.0(@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@11.1.8)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)))(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@rn-primitives/hooks': 1.3.0(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
-      '@rn-primitives/portal': 1.3.0(@types/react@19.2.14)(immer@10.1.1)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+      '@rn-primitives/portal': 1.3.0(@types/react@19.2.14)(immer@11.1.8)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
       '@rn-primitives/slot': 1.2.0(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
       '@rn-primitives/types': 1.2.0(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
       '@rn-primitives/utils': 1.2.0(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
@@ -22656,10 +22757,10 @@ snapshots:
       react-native: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10)
       react-native-web: 0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
 
-  '@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@10.1.1)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))':
+  '@rn-primitives/portal@1.3.0(@types/react@19.2.14)(immer@11.1.8)(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))':
     dependencies:
       react: 19.2.0
-      zustand: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+      zustand: 5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
     optionalDependencies:
       react-native: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10)
       react-native-web: 0.21.2(encoding@0.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -23897,6 +23998,10 @@ snapshots:
 
   '@speed-highlight/core@1.2.15': {}
 
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
   '@swc/core-darwin-arm64@1.15.18':
     optional: true
 
@@ -24072,7 +24177,7 @@ snapshots:
       '@tanstack/virtual-file-routes': 1.162.0
       jiti: 2.7.0
       magic-string: 0.30.21
-      prettier: 3.8.1
+      prettier: 3.8.4
       zod: 4.4.3
     transitivePeerDependencies:
       - supports-color
@@ -26823,11 +26928,6 @@ snapshots:
     dependencies:
       utila: 0.4.0
 
-  dom-helpers@5.2.1:
-    dependencies:
-      '@babel/runtime': 7.29.7
-      csstype: 3.2.3
-
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -27253,6 +27353,8 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  es-toolkit@1.47.0: {}
+
   es6-error@4.1.1:
     optional: true
 
@@ -29572,8 +29674,9 @@ snapshots:
     dependencies:
       queue: 6.0.2
 
-  immer@10.1.1:
-    optional: true
+  immer@10.1.1: {}
+
+  immer@11.1.8: {}
 
   import-fresh@3.3.0:
     dependencies:
@@ -33031,13 +33134,25 @@ snapshots:
     dependencies:
       prettier: 3.4.2
       typescript: 5.9.3
+    optional: true
+
+  prettier-plugin-organize-imports@4.3.0(prettier@3.8.4)(typescript@5.9.3):
+    dependencies:
+      prettier: 3.8.4
+      typescript: 5.9.3
+
+  prettier-plugin-tailwindcss@0.8.0(prettier-plugin-organize-imports@4.3.0(prettier@3.4.2)(typescript@5.9.3))(prettier@3.4.2):
+    dependencies:
+      prettier: 3.4.2
+    optionalDependencies:
+      prettier-plugin-organize-imports: 4.3.0(prettier@3.4.2)(typescript@5.9.3)
 
   prettier@2.8.8:
     optional: true
 
   prettier@3.4.2: {}
 
-  prettier@3.8.1: {}
+  prettier@3.8.4: {}
 
   pretty-error@4.0.0:
     dependencies:
@@ -33701,6 +33816,15 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  react-redux@9.3.0(@types/react@19.2.14)(react@19.2.0)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      redux: 5.0.1
+
   react-refresh@0.14.2: {}
 
   react-refresh@0.17.0: {}
@@ -33726,14 +33850,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  react-smooth@4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      fast-equals: 5.4.0
-      prop-types: 15.8.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-transition-group: 4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-
   react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.0):
     dependencies:
       get-nonce: 1.0.1
@@ -33742,15 +33858,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  react-transition-group@4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@babel/runtime': 7.29.7
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
   react-use-websocket@4.13.0: {}
 
   react@19.2.0: {}
@@ -33864,22 +33971,25 @@ snapshots:
     optionalDependencies:
       expo: 55.0.6(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.6)(bufferutil@4.0.8)(react-dom@19.2.0(react@19.2.0))(react-native-webview@13.16.0(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)(typescript@5.9.3)(utf-8-validate@5.0.10)
 
-  recharts-scale@0.4.5:
-    dependencies:
-      decimal.js-light: 2.5.1
-
-  recharts@2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.4)(react@19.2.0)(redux@5.0.1):
     dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.14)(react@19.2.0)(redux@5.0.1))(react@19.2.0)
       clsx: 2.1.1
-      eventemitter3: 4.0.7
-      lodash: 4.17.23
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.47.0
+      eventemitter3: 5.0.4
+      immer: 10.1.1
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
-      react-is: 18.3.1
-      react-smooth: 4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      recharts-scale: 0.4.5
+      react-is: 19.2.4
+      react-redux: 9.3.0(@types/react@19.2.14)(react@19.2.0)(redux@5.0.1)
+      reselect: 5.1.1
       tiny-invariant: 1.3.3
-      victory-vendor: 36.9.2
+      use-sync-external-store: 1.6.0(react@19.2.0)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
 
   rechoir@0.8.0:
     dependencies:
@@ -33926,6 +34036,12 @@ snapshots:
     dependencies:
       redis-errors: 1.2.0
 
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -34118,6 +34234,8 @@ snapshots:
     dependencies:
       pe-library: 1.0.1
 
+  reselect@5.1.1: {}
+
   reselect@5.2.0: {}
 
   resolve-alpn@1.2.1: {}
@@ -36034,7 +36152,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  victory-vendor@36.9.2:
+  victory-vendor@37.3.6:
     dependencies:
       '@types/d3-array': 3.2.2
       '@types/d3-ease': 3.0.2
@@ -36683,10 +36801,10 @@ snapshots:
 
   zod@4.4.3: {}
 
-  zustand@5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)):
+  zustand@5.0.11(@types/react@19.2.14)(immer@11.1.8)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)):
     optionalDependencies:
       '@types/react': 19.2.14
-      immer: 10.1.1
+      immer: 11.1.8
       react: 19.2.0
       use-sync-external-store: 1.6.0(react@19.2.0)