From b3373924e611975f2d5c7fdf070def0d710d89d3 Mon Sep 17 00:00:00 2001
From: zhom <2717306+zhom@users.noreply.github.com>
Date: Wed, 24 Jun 2026 03:10:28 +0400
Subject: [PATCH] style: improve responsiveness

---
 src/app/page.tsx                              |   8 +-
 src/components/account-page.tsx               |  48 +++---
 src/components/app-update-toast.tsx           |  18 +--
 src/components/bandwidth-mini-chart.tsx       |   6 +-
 src/components/camoufox-config-dialog.tsx     |   6 +-
 src/components/command-palette.tsx            |   2 +-
 src/components/cookie-copy-dialog.tsx         |  32 ++--
 src/components/cookie-management-dialog.tsx   |  38 ++---
 src/components/create-group-dialog.tsx        |   2 +-
 src/components/create-profile-dialog.tsx      |  78 +++++-----
 src/components/custom-toast.tsx               |  48 +++---
 src/components/data-table-action-bar.tsx      |   6 +-
 src/components/delete-confirmation-dialog.tsx |   6 +-
 src/components/delete-group-dialog.tsx        |   6 +-
 src/components/dns-blocklist-dialog.tsx       |   8 +-
 src/components/edit-group-dialog.tsx          |   2 +-
 .../extension-group-assignment-dialog.tsx     |   6 +-
 .../extension-management-dialog.tsx           |  94 ++++++------
 src/components/group-assignment-dialog.tsx    |   8 +-
 src/components/group-management-dialog.tsx    |  14 +-
 src/components/home-header.tsx                |  36 ++---
 src/components/import-profile-dialog.tsx      |  16 +-
 src/components/integrations-dialog.tsx        |  60 ++++----
 src/components/location-proxy-dialog.tsx      |   2 +-
 src/components/multiple-selector.tsx          |  14 +-
 src/components/onboarding-card.tsx            |  22 +--
 src/components/permission-dialog.tsx          |   2 +-
 src/components/profile-data-table.tsx         | 122 ++++++++--------
 src/components/profile-info-dialog.tsx        | 138 +++++++++---------
 src/components/profile-selector-dialog.tsx    |   8 +-
 src/components/profile-sync-dialog.tsx        |  12 +-
 src/components/proxy-assignment-dialog.tsx    |  10 +-
 src/components/proxy-check-button.tsx         |   6 +-
 src/components/proxy-export-dialog.tsx        |  14 +-
 src/components/proxy-form-dialog.tsx          |   4 +-
 src/components/proxy-import-dialog.tsx        |  30 ++--
 src/components/proxy-management-dialog.tsx    |  50 +++----
 src/components/rail-nav.tsx                   |  44 +++---
 src/components/release-type-selector.tsx      |   8 +-
 src/components/settings-dialog.tsx            |  40 ++---
 .../shared-camoufox-config-form.tsx           |  50 +++----
 src/components/shortcuts-page.tsx             |  20 +--
 src/components/sync-all-dialog.tsx            |   6 +-
 src/components/sync-config-dialog.tsx         |  18 +--
 src/components/sync-follower-dialog.tsx       |  14 +-
 src/components/thank-you-dialog.tsx           |   2 +-
 src/components/traffic-details-dialog.tsx     |  56 +++----
 src/components/ui/alert.tsx                   |   6 +-
 src/components/ui/animated-switch.tsx         |   4 +-
 src/components/ui/animated-tabs.tsx           |   6 +-
 src/components/ui/badge.tsx                   |   6 +-
 src/components/ui/button.tsx                  |   8 +-
 src/components/ui/card.tsx                    |   4 +-
 src/components/ui/chart.tsx                   |  10 +-
 src/components/ui/checkbox.tsx                |   2 +-
 src/components/ui/color-picker.tsx            |  30 ++--
 src/components/ui/command.tsx                 |  14 +-
 src/components/ui/dialog.tsx                  |  10 +-
 src/components/ui/dropdown-menu.tsx           |  18 +--
 src/components/ui/fading-scroll-area.tsx      |   4 +-
 src/components/ui/input.tsx                   |   6 +-
 src/components/ui/popover.tsx                 |   2 +-
 src/components/ui/pro-badge.tsx               |   2 +-
 src/components/ui/progress.tsx                |   4 +-
 src/components/ui/radio-group.tsx             |   2 +-
 src/components/ui/ripple.tsx                  |  10 +-
 src/components/ui/scroll-area.tsx             |   4 +-
 src/components/ui/select.tsx                  |  12 +-
 src/components/ui/sonner.tsx                  |   2 +-
 src/components/ui/table.tsx                   |   8 +-
 src/components/ui/tabs.tsx                    |   6 +-
 src/components/ui/textarea.tsx                |   2 +-
 src/components/ui/tooltip.tsx                 |   4 +-
 src/components/vpn-check-button.tsx           |   4 +-
 src/components/vpn-import-dialog.tsx          |  12 +-
 src/components/wayfern-config-form.tsx        |  58 ++++----
 src/components/wayfern-terms-dialog.tsx       |   2 +-
 src/components/welcome-dialog.tsx             |  16 +-
 src/components/window-drag-area.tsx           |   8 +-
 79 files changed, 762 insertions(+), 764 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bb7240f..0d16515 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1637,7 +1637,7 @@ export default function Home() {
         : t(`pageTitle.${currentPage}`);
 
   return (
-    <div className="flex flex-col h-screen bg-background font-(family-name:--font-geist-sans)">
+    <div className="flex h-dvh flex-col bg-background font-(family-name:--font-geist-sans)">
       <CloseConfirmDialog />
       <CamoufoxDeprecationDialog profiles={profiles} />
       <HomeHeader
@@ -1650,11 +1650,11 @@ export default function Home() {
         onGroupSelect={handleSelectGroup}
         pageTitle={subPageTitle}
       />
-      <div className="flex flex-1 min-h-0">
+      <div className="flex min-h-0 flex-1">
         <RailNav currentPage={currentPage} onNavigate={handleRailNavigate} />
-        <main className="flex-1 min-w-0 flex flex-col overflow-hidden">
+        <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
           {currentPage === "profiles" && (
-            <div className="px-3 pt-2.5 flex flex-col flex-1 min-h-0">
+            <div className="flex min-h-0 flex-1 flex-col px-3 pt-2.5">
               {isLoading && groupsData.length === 0 ? null : null}
               <ProfilesDataTable
                 profiles={filteredProfiles}
diff --git a/src/components/account-page.tsx b/src/components/account-page.tsx
index 77440d5..43e1b78 100644
--- a/src/components/account-page.tsx
+++ b/src/components/account-page.tsx
@@ -198,11 +198,11 @@ export function AccountPage({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
-      <DialogContent className="max-w-2xl max-h-[calc(100vh-4rem)] flex flex-col">
+      <DialogContent className="flex max-h-[calc(100vh-4rem)] max-w-2xl flex-col">
         <div
           className={cn(
-            "flex flex-col gap-4 p-4 overflow-y-auto flex-1 min-h-0",
-            subPage && "w-full max-w-2xl mx-auto",
+            "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
+            subPage && "mx-auto w-full max-w-2xl",
           )}
         >
           <AnimatedTabs defaultValue="account">
@@ -226,16 +226,16 @@ export function AccountPage({
             <AnimatedTabsContent value="account" className="mt-4">
               <div className="flex flex-col gap-4">
                 <div className="flex items-center gap-3">
-                  <div className="grid place-items-center size-12 rounded-full bg-accent text-foreground shrink-0">
+                  <div className="grid size-12 shrink-0 place-items-center rounded-full bg-accent text-foreground">
                     <LuUser className="size-6" />
                   </div>
                   <div className="min-w-0 flex-1">
                     {isLoggedIn && user ? (
                       <>
-                        <h2 className="text-base font-semibold truncate">
+                        <h2 className="truncate text-base font-semibold">
                           {user.email}
                         </h2>
-                        <p className="text-xs text-muted-foreground mt-0.5">
+                        <p className="mt-0.5 text-xs text-muted-foreground">
                           {t("account.plan", {
                             plan: user.plan,
                             period: user.planPeriod ?? "—",
@@ -247,7 +247,7 @@ export function AccountPage({
                         <h2 className="text-base font-semibold">
                           {t("account.signedOut")}
                         </h2>
-                        <p className="text-xs text-muted-foreground mt-0.5">
+                        <p className="mt-0.5 text-xs text-muted-foreground">
                           {t("account.signedOutDescription")}
                         </p>
                       </>
@@ -257,39 +257,39 @@ export function AccountPage({
 
                 {isLoggedIn && user && (
                   <div className="grid grid-cols-2 gap-2 text-xs">
-                    <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                    <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                      <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                         {t("account.fields.plan")}
                       </p>
                       <p className="mt-0.5 font-medium uppercase">
                         {user.plan}
                       </p>
                     </div>
-                    <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                    <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                      <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                         {t("account.fields.status")}
                       </p>
                       <p className="mt-0.5">{user.subscriptionStatus ?? "—"}</p>
                     </div>
                     {user.teamRole && (
-                      <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                        <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                        <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                           {t("account.fields.teamRole")}
                         </p>
                         <p className="mt-0.5">{user.teamRole}</p>
                       </div>
                     )}
                     {user.planPeriod && (
-                      <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                        <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                        <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                           {t("account.fields.period")}
                         </p>
                         <p className="mt-0.5">{user.planPeriod}</p>
                       </div>
                     )}
                     {typeof user.deviceOrdinal === "number" && (
-                      <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                        <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                        <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                           {t("account.fields.device")}
                         </p>
                         <p className="mt-0.5">
@@ -321,7 +321,7 @@ export function AccountPage({
                     </p>
                   )}
 
-                <div className="flex flex-wrap gap-2 mt-2">
+                <div className="mt-2 flex flex-wrap gap-2">
                   {isLoggedIn ? (
                     <>
                       <Button
@@ -331,7 +331,7 @@ export function AccountPage({
                           void handleRefresh();
                         }}
                         disabled={isRefreshing}
-                        className="h-8 text-xs gap-1.5"
+                        className="h-8 gap-1.5 text-xs"
                       >
                         <LuRefreshCw className="size-3" />
                         {t("account.refresh")}
@@ -344,7 +344,7 @@ export function AccountPage({
                         onClick={() => {
                           void handleLogout();
                         }}
-                        className="h-8 text-xs gap-1.5"
+                        className="h-8 gap-1.5 text-xs"
                       >
                         <LuLogOut className="size-3" />
                         {t("account.logout")}
@@ -354,7 +354,7 @@ export function AccountPage({
                     <Button
                       size="sm"
                       onClick={onOpenSignIn}
-                      className="h-8 text-xs gap-1.5"
+                      className="h-8 gap-1.5 text-xs"
                     >
                       <LuCloud className="size-3" />
                       {t("account.signIn")}
@@ -380,7 +380,7 @@ export function AccountPage({
                     <p className="text-sm font-medium">
                       {t("account.selfHosted.title")}
                     </p>
-                    <p className="text-xs text-muted-foreground mt-0.5">
+                    <p className="mt-0.5 text-xs text-muted-foreground">
                       {t("account.selfHosted.description")}
                     </p>
                   </div>
@@ -431,7 +431,7 @@ export function AccountPage({
                             ? t("common.aria.hideToken")
                             : t("common.aria.showToken")
                         }
-                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+                        className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
                       >
                         {showToken ? (
                           <LuEyeOff className="size-3.5" />
@@ -449,7 +449,7 @@ export function AccountPage({
                     {connectionStatus === "connected" && (
                       <Badge
                         variant="default"
-                        className="text-success-foreground bg-success"
+                        className="bg-success text-success-foreground"
                       >
                         {t("sync.status.connected")}
                       </Badge>
diff --git a/src/components/app-update-toast.tsx b/src/components/app-update-toast.tsx
index 2627133..bdc6178 100644
--- a/src/components/app-update-toast.tsx
+++ b/src/components/app-update-toast.tsx
@@ -35,13 +35,13 @@ export function AppUpdateToast({
   };
 
   return (
-    <div className="flex items-start p-4 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground">
-      <div className="mr-3 mt-0.5">
-        <LuCheckCheck className="shrink-0 size-5" />
+    <div className="flex w-full max-w-md items-start rounded-lg border border-border bg-card p-4 text-card-foreground shadow-lg">
+      <div className="mt-0.5 mr-3">
+        <LuCheckCheck className="size-5 shrink-0" />
       </div>
 
-      <div className="flex-1 min-w-0">
-        <div className="flex gap-2 justify-between items-start">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-2">
           <div className="flex flex-col gap-1">
             <span className="text-sm font-semibold text-foreground">
               {updateReady
@@ -59,18 +59,18 @@ export function AppUpdateToast({
             variant="ghost"
             size="sm"
             onClick={onDismiss}
-            className="p-0 size-6 shrink-0"
+            className="size-6 shrink-0 p-0"
           >
             <FaTimes className="size-3" />
           </Button>
         </div>
 
-        <div className="flex gap-2 items-center mt-3">
+        <div className="mt-3 flex items-center gap-2">
           {updateReady ? (
             <RippleButton
               onClick={() => void handleRestartClick()}
               size="sm"
-              className="flex gap-2 items-center text-xs"
+              className="flex items-center gap-2 text-xs"
             >
               <LuCheckCheck className="size-3" />
               {t("appUpdate.toast.restartNow")}
@@ -81,7 +81,7 @@ export function AppUpdateToast({
               <RippleButton
                 onClick={handleViewRelease}
                 size="sm"
-                className="flex gap-2 items-center text-xs"
+                className="flex items-center gap-2 text-xs"
               >
                 <FaExternalLinkAlt className="size-3" />
                 {t("appUpdate.toast.viewRelease")}
diff --git a/src/components/bandwidth-mini-chart.tsx b/src/components/bandwidth-mini-chart.tsx
index dade541..c6204d9 100644
--- a/src/components/bandwidth-mini-chart.tsx
+++ b/src/components/bandwidth-mini-chart.tsx
@@ -63,11 +63,11 @@ export function BandwidthMiniChart({
       type="button"
       onClick={onClick}
       className={cn(
-        "relative flex items-center gap-1.5 px-2 rounded cursor-pointer hover:bg-accent/50 transition-colors w-full min-w-0 border-none bg-transparent",
+        "relative flex w-full min-w-0 cursor-pointer items-center gap-1.5 rounded border-none bg-transparent px-2 transition-colors hover:bg-accent/50",
         className,
       )}
     >
-      <div className="flex-1 min-w-0 h-3 pointer-events-none">
+      <div className="pointer-events-none h-3 min-w-0 flex-1">
         <ResponsiveContainer
           width="100%"
           height="100%"
@@ -111,7 +111,7 @@ export function BandwidthMiniChart({
           </AreaChart>
         </ResponsiveContainer>
       </div>
-      <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0 min-w-[60px] text-right">
+      <span className="min-w-[60px] shrink-0 text-right text-xs whitespace-nowrap text-muted-foreground">
         {formatBytes(currentBandwidth)}
       </span>
     </button>
diff --git a/src/components/camoufox-config-dialog.tsx b/src/components/camoufox-config-dialog.tsx
index bafed30..086aa8d 100644
--- a/src/components/camoufox-config-dialog.tsx
+++ b/src/components/camoufox-config-dialog.tsx
@@ -149,7 +149,7 @@ export function CamoufoxConfigDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-3xl h-[min(85vh,52rem)] flex flex-col">
+      <DialogContent className="flex h-[min(85vh,52rem)] max-w-3xl flex-col">
         <DialogHeader className="shrink-0">
           <DialogTitle>
             {isRunning
@@ -164,7 +164,7 @@ export function CamoufoxConfigDialog({
           </DialogTitle>
         </DialogHeader>
 
-        <ScrollArea className="flex-1 min-h-0">
+        <ScrollArea className="min-h-0 flex-1">
           <div className="py-4">
             {profile.browser === "wayfern" ? (
               <WayfernConfigForm
@@ -193,7 +193,7 @@ export function CamoufoxConfigDialog({
           </div>
         </ScrollArea>
 
-        <DialogFooter className="shrink-0 pt-4 border-t">
+        <DialogFooter className="shrink-0 border-t pt-4">
           <RippleButton variant="outline" onClick={handleClose}>
             {isRunning ? t("common.buttons.close") : t("common.buttons.cancel")}
           </RippleButton>
diff --git a/src/components/command-palette.tsx b/src/components/command-palette.tsx
index 1edaabb..7183c22 100644
--- a/src/components/command-palette.tsx
+++ b/src/components/command-palette.tsx
@@ -74,7 +74,7 @@ function Tokens({ tokens }: { tokens: string[] }) {
       {tokens.map((tok, i) => (
         <kbd
           key={i}
-          className="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded border border-border bg-muted text-[10px] font-medium text-muted-foreground"
+          className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1 text-[10px] font-medium text-muted-foreground"
         >
           {tok}
         </kbd>
diff --git a/src/components/cookie-copy-dialog.tsx b/src/components/cookie-copy-dialog.tsx
index 15810ec..aa37139 100644
--- a/src/components/cookie-copy-dialog.tsx
+++ b/src/components/cookie-copy-dialog.tsx
@@ -332,7 +332,7 @@ export function CookieCopyDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[80vh] flex flex-col">
+      <DialogContent className="flex max-h-[80vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <LuCookie className="size-5" />
@@ -349,7 +349,7 @@ export function CookieCopyDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex-1 overflow-y-auto space-y-4">
+        <div className="flex-1 space-y-4 overflow-y-auto">
           <div className="space-y-2">
             <Label>{t("cookies.copy.sourceProfile")}</Label>
             <Select
@@ -393,7 +393,7 @@ export function CookieCopyDialog({
                 count: targetProfiles.length,
               })}
             </Label>
-            <div className="p-2 bg-muted rounded-md max-h-20 overflow-y-auto">
+            <div className="max-h-20 overflow-y-auto rounded-md bg-muted p-2">
               {targetProfiles.length === 0 ? (
                 <p className="text-sm text-muted-foreground">
                   {sourceProfileId
@@ -405,7 +405,7 @@ export function CookieCopyDialog({
                   {targetProfiles.map((p) => (
                     <span
                       key={p.id}
-                      className="inline-flex items-center gap-1 px-2 py-0.5 bg-background rounded text-sm"
+                      className="inline-flex items-center gap-1 rounded bg-background px-2 py-0.5 text-sm"
                     >
                       {p.name}
                       {runningProfiles.has(p.id) && (
@@ -437,7 +437,7 @@ export function CookieCopyDialog({
               </div>
 
               <div className="relative">
-                <LuSearch className="absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                <LuSearch className="absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground" />
                 <Input
                   placeholder={t("cookies.copy.searchPlaceholder")}
                   value={searchQuery}
@@ -449,11 +449,11 @@ export function CookieCopyDialog({
               </div>
 
               {isLoadingCookies ? (
-                <div className="flex items-center justify-center h-40">
-                  <div className="animate-spin size-6 border-2 border-primary border-t-transparent rounded-full" />
+                <div className="flex h-40 items-center justify-center">
+                  <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                 </div>
               ) : error ? (
-                <div className="p-4 text-center text-destructive bg-destructive/10 rounded-md">
+                <div className="rounded-md bg-destructive/10 p-4 text-center text-destructive">
                   {error}
                 </div>
               ) : filteredDomains.length === 0 ? (
@@ -463,8 +463,8 @@ export function CookieCopyDialog({
                     : t("cookies.copy.noFound")}
                 </div>
               ) : (
-                <ScrollArea className="h-[clamp(150px,35vh,450px)] border rounded-md">
-                  <div className="p-2 space-y-1">
+                <ScrollArea className="h-[clamp(150px,35vh,450px)] rounded-md border">
+                  <div className="space-y-1 p-2">
                     {filteredDomains.map((domain) => (
                       <DomainRow
                         key={domain.domain}
@@ -549,7 +549,7 @@ function DomainRow({
 
   return (
     <div>
-      <div className="flex items-center gap-2 p-2 hover:bg-accent/50 rounded">
+      <div className="flex items-center gap-2 rounded p-2 hover:bg-accent/50">
         <Checkbox
           checked={isAllSelected || isPartial}
           onCheckedChange={() => {
@@ -559,7 +559,7 @@ function DomainRow({
         />
         <button
           type="button"
-          className="flex items-center gap-1 flex-1 min-w-0 text-left bg-transparent border-none cursor-pointer"
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent text-left"
           onClick={() => {
             onToggleExpand(domain.domain);
           }}
@@ -569,21 +569,21 @@ function DomainRow({
           ) : (
             <LuChevronRight className="size-4" />
           )}
-          <span className="font-medium truncate">{domain.domain}</span>
-          <span className="text-xs text-muted-foreground shrink-0">
+          <span className="truncate font-medium">{domain.domain}</span>
+          <span className="shrink-0 text-xs text-muted-foreground">
             ({domain.cookie_count})
           </span>
         </button>
       </div>
       {isExpanded && (
-        <div className="ml-8 pl-2 border-l space-y-1">
+        <div className="ml-8 space-y-1 border-l pl-2">
           {domain.cookies.map((cookie) => {
             const isSelected =
               domainSelection?.cookies.has(cookie.name) ?? false;
             return (
               <div
                 key={`${domain.domain}-${cookie.name}`}
-                className="flex items-center gap-2 p-1 text-sm hover:bg-accent/30 rounded"
+                className="flex items-center gap-2 rounded p-1 text-sm hover:bg-accent/30"
               >
                 <Checkbox
                   checked={isSelected || isAllSelected}
diff --git a/src/components/cookie-management-dialog.tsx b/src/components/cookie-management-dialog.tsx
index d931c88..3664862 100644
--- a/src/components/cookie-management-dialog.tsx
+++ b/src/components/cookie-management-dialog.tsx
@@ -409,7 +409,7 @@ export function CookieManagementDialog({
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="import" className="space-y-4 mt-4">
+          <TabsContent value="import" className="mt-4 space-y-4">
             {!fileContent && (
               <div className="space-y-4">
                 <p className="text-sm text-muted-foreground">
@@ -418,7 +418,7 @@ export function CookieManagementDialog({
                 <div
                   role="button"
                   tabIndex={0}
-                  className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-8 transition-colors cursor-pointer border-muted-foreground/25 hover:border-muted-foreground/50"
+                  className="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 p-8 transition-colors hover:border-muted-foreground/50"
                   onClick={() =>
                     document.getElementById("cookie-file-input")?.click()
                   }
@@ -429,8 +429,8 @@ export function CookieManagementDialog({
                     }
                   }}
                 >
-                  <LuUpload className="size-10 text-muted-foreground mb-4" />
-                  <p className="text-sm text-muted-foreground text-center">
+                  <LuUpload className="mb-4 size-10 text-muted-foreground" />
+                  <p className="text-center text-sm text-muted-foreground">
                     {t("cookies.management.dropPrompt")}
                     <br />
                     <span className="text-xs">
@@ -454,7 +454,7 @@ export function CookieManagementDialog({
 
             {fileContent && !importResult && (
               <div className="space-y-4">
-                <div className="flex items-center gap-3 p-4 bg-muted/30 rounded-lg">
+                <div className="flex items-center gap-3 rounded-lg bg-muted/30 p-4">
                   <div>
                     <div className="font-medium">{fileName}</div>
                     <div className="text-sm text-muted-foreground">
@@ -481,7 +481,7 @@ export function CookieManagementDialog({
 
             {importResult && (
               <div className="space-y-4">
-                <div className="p-4 rounded-lg bg-success/10">
+                <div className="rounded-lg bg-success/10 p-4">
                   <div className="font-medium text-success">
                     {t("cookies.management.importedSuccess", {
                       imported: importResult.cookies_imported,
@@ -505,7 +505,7 @@ export function CookieManagementDialog({
             )}
           </TabsContent>
 
-          <TabsContent value="export" className="space-y-3 mt-4">
+          <TabsContent value="export" className="mt-4 space-y-3">
             <div className="space-y-2">
               <Label>{t("cookies.export.formatLabel")}</Label>
               <Select
@@ -533,7 +533,7 @@ export function CookieManagementDialog({
                 <Label>
                   {t("cookies.management.cookiesLabel")}{" "}
                   {exportCookieData && (
-                    <span className="text-muted-foreground font-normal">
+                    <span className="font-normal text-muted-foreground">
                       {t("cookies.management.selectionStatus", {
                         selected: selectedExportCount,
                         total: exportCookieData.total_count,
@@ -544,7 +544,7 @@ export function CookieManagementDialog({
                 {exportCookieData && exportCookieData.total_count > 0 && (
                   <button
                     type="button"
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-xs text-muted-foreground transition-colors hover:text-foreground"
                     onClick={toggleSelectAll}
                   >
                     {selectedExportCount === exportCookieData.total_count
@@ -555,16 +555,16 @@ export function CookieManagementDialog({
               </div>
 
               {isLoadingExportCookies ? (
-                <div className="flex items-center justify-center h-24">
-                  <div className="animate-spin size-5 border-2 border-primary border-t-transparent rounded-full" />
+                <div className="flex h-24 items-center justify-center">
+                  <div className="size-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                 </div>
               ) : !exportCookieData || exportCookieData.domains.length === 0 ? (
-                <div className="p-4 text-center text-sm text-muted-foreground border rounded-md">
+                <div className="rounded-md border p-4 text-center text-sm text-muted-foreground">
                   {t("cookies.management.noCookies")}
                 </div>
               ) : (
                 <FadingScrollArea className="h-[clamp(140px,30vh,420px)]">
-                  <div className="p-2 space-y-1">
+                  <div className="space-y-1 p-2">
                     {exportCookieData.domains.map((domain) => (
                       <ExportDomainRow
                         key={domain.domain}
@@ -629,7 +629,7 @@ function ExportDomainRow({
 
   return (
     <div>
-      <div className="flex items-center gap-2 p-1.5 hover:bg-accent/50 rounded">
+      <div className="flex items-center gap-2 rounded p-1.5 hover:bg-accent/50">
         <Checkbox
           checked={isAllSelected || isPartial}
           onCheckedChange={() => {
@@ -639,7 +639,7 @@ function ExportDomainRow({
         />
         <button
           type="button"
-          className="flex items-center gap-1 flex-1 text-left text-sm bg-transparent border-none cursor-pointer"
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent text-left text-sm"
           onClick={() => {
             onToggleExpand(domain.domain);
           }}
@@ -649,21 +649,21 @@ function ExportDomainRow({
           ) : (
             <LuChevronRight className="size-3.5" />
           )}
-          <span className="font-medium truncate">{domain.domain}</span>
-          <span className="text-xs text-muted-foreground shrink-0">
+          <span className="truncate font-medium">{domain.domain}</span>
+          <span className="shrink-0 text-xs text-muted-foreground">
             ({domain.cookie_count})
           </span>
         </button>
       </div>
       {isExpanded && (
-        <div className="ml-7 pl-2 border-l space-y-0.5">
+        <div className="ml-7 space-y-0.5 border-l pl-2">
           {domain.cookies.map((cookie) => {
             const isSelected =
               domainSelection?.cookies.has(cookie.name) ?? false;
             return (
               <div
                 key={`${domain.domain}-${cookie.name}`}
-                className="flex items-center gap-2 p-1 text-sm hover:bg-accent/30 rounded"
+                className="flex items-center gap-2 rounded p-1 text-sm hover:bg-accent/30"
               >
                 <Checkbox
                   checked={isSelected || isAllSelected}
diff --git a/src/components/create-group-dialog.tsx b/src/components/create-group-dialog.tsx
index 51ae003..a255434 100644
--- a/src/components/create-group-dialog.tsx
+++ b/src/components/create-group-dialog.tsx
@@ -93,7 +93,7 @@ export function CreateGroupDialog({
           </div>
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/create-profile-dialog.tsx b/src/components/create-profile-dialog.tsx
index edb3d69..5972ed5 100644
--- a/src/components/create-profile-dialog.tsx
+++ b/src/components/create-profile-dialog.tsx
@@ -534,7 +534,7 @@ export function CreateProfileDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[90vh] flex flex-col">
+      <DialogContent className="flex max-h-[90vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
         <DialogHeader className="shrink-0">
           <DialogTitle>
             {currentStep === "browser-selection"
@@ -551,13 +551,13 @@ export function CreateProfileDialog({
         <Tabs
           value={activeTab}
           onValueChange={handleTabChange}
-          className="flex flex-col flex-1 w-full min-h-0"
+          className="flex min-h-0 w-full flex-1 flex-col"
         >
           {/* Tab list hidden - only anti-detect browsers are supported */}
 
-          <ScrollArea className="overflow-y-auto flex-1">
-            <div className="flex flex-col justify-center items-center w-full">
-              <div className="py-4 space-y-6 w-full">
+          <ScrollArea className="flex-1 overflow-y-auto">
+            <div className="flex w-full flex-col items-center justify-center">
+              <div className="w-full space-y-6 py-4">
                 {currentStep === "browser-selection" ? (
                   <>
                     <TabsContent value="anti-detect" className="mt-0 space-y-6">
@@ -569,10 +569,10 @@ export function CreateProfileDialog({
                             handleBrowserSelect("wayfern");
                           }}
                           disabled={!getCreatableVersion("wayfern")}
-                          className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
+                          className="flex h-16 w-full items-center justify-start gap-3 border-2 p-4 transition-colors hover:border-primary/50"
                           variant="outline"
                         >
-                          <div className="flex justify-center items-center size-8">
+                          <div className="flex size-8 items-center justify-center">
                             {isBrowserCurrentlyDownloading("wayfern") ? (
                               <LuLoaderCircle className="size-6 animate-spin" />
                             ) : (
@@ -600,7 +600,7 @@ export function CreateProfileDialog({
                             profiles. Only Wayfern can be created. */}
 
                         {!getCreatableVersion("wayfern") && (
-                          <p className="pt-2 text-sm text-center text-muted-foreground">
+                          <p className="pt-2 text-center text-sm text-muted-foreground">
                             {t("createProfile.browsersDownloading")}
                           </p>
                         )}
@@ -629,10 +629,10 @@ export function CreateProfileDialog({
                                 onClick={() => {
                                   handleBrowserSelect(browser.value);
                                 }}
-                                className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
+                                className="flex h-16 w-full items-center justify-start gap-3 border-2 p-4 transition-colors hover:border-primary/50"
                                 variant="outline"
                               >
-                                <div className="flex justify-center items-center size-8">
+                                <div className="flex size-8 items-center justify-center">
                                   {IconComponent && (
                                     <IconComponent className="size-6" />
                                   )}
@@ -684,7 +684,7 @@ export function CreateProfileDialog({
                         </div>
 
                         {/* Ephemeral Option */}
-                        <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+                        <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
                           <div className="flex items-center gap-x-2">
                             <Checkbox
                               id="ephemeral"
@@ -697,14 +697,14 @@ export function CreateProfileDialog({
                               {t("profiles.ephemeral")}
                             </Label>
                           </div>
-                          <p className="text-sm text-muted-foreground ml-6">
+                          <p className="ml-6 text-sm text-muted-foreground">
                             {t("profiles.ephemeralDescription")}
                           </p>
                         </div>
 
                         {/* Password Option */}
                         {!ephemeral && (
-                          <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+                          <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
                             <div className="flex items-center gap-x-2">
                               <Checkbox
                                 id="enable-password"
@@ -725,7 +725,7 @@ export function CreateProfileDialog({
                                 {t("createProfile.passwordProtect.label")}
                               </Label>
                             </div>
-                            <p className="text-sm text-muted-foreground ml-6">
+                            <p className="ml-6 text-sm text-muted-foreground">
                               {t("createProfile.passwordProtect.description")}
                             </p>
                             {enablePassword && (
@@ -769,15 +769,15 @@ export function CreateProfileDialog({
                           <div className="space-y-6">
                             {/* Wayfern Download Status */}
                             {isLoadingReleaseTypes && (
-                              <div className="flex gap-3 items-center p-3 rounded-md border">
-                                <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                              <div className="flex items-center gap-3 rounded-md border p-3">
+                                <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
                                 <p className="text-sm text-muted-foreground">
                                   {t("createProfile.version.fetching")}
                                 </p>
                               </div>
                             )}
                             {!isLoadingReleaseTypes && releaseTypesError && (
-                              <div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10">
+                              <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
                                 <p className="flex-1 text-sm text-destructive">
                                   {releaseTypesError}
                                 </p>
@@ -796,7 +796,7 @@ export function CreateProfileDialog({
                             {!isLoadingReleaseTypes &&
                               !releaseTypesError &&
                               !getBestAvailableVersion("wayfern") && (
-                                <div className="flex gap-3 items-center p-3 rounded-md border border-warning/50 bg-warning/10">
+                                <div className="flex items-center gap-3 rounded-md border border-warning/50 bg-warning/10 p-3">
                                   <p className="text-sm text-warning">
                                     {t("createProfile.platformUnavailable", {
                                       browser: "Wayfern",
@@ -809,7 +809,7 @@ export function CreateProfileDialog({
                               !isBrowserCurrentlyDownloading("wayfern") &&
                               !getCreatableVersion("wayfern") &&
                               getBestAvailableVersion("wayfern") && (
-                                <div className="flex gap-3 items-center p-3 rounded-md border">
+                                <div className="flex items-center gap-3 rounded-md border p-3">
                                   <p className="text-sm text-muted-foreground">
                                     {t("createProfile.version.needsDownload", {
                                       browser: "Wayfern",
@@ -840,7 +840,7 @@ export function CreateProfileDialog({
                               !releaseTypesError &&
                               !isBrowserCurrentlyDownloading("wayfern") &&
                               getCreatableVersion("wayfern") && (
-                                <div className="p-3 text-sm rounded-md border text-muted-foreground">
+                                <div className="rounded-md border p-3 text-sm text-muted-foreground">
                                   ✓{" "}
                                   {t("createProfile.version.available", {
                                     browser: "Wayfern",
@@ -855,7 +855,7 @@ export function CreateProfileDialog({
                               getCreatableVersion("wayfern") &&
                               !isBrowserVersionAvailable("wayfern") &&
                               getBestAvailableVersion("wayfern") && (
-                                <div className="flex gap-3 items-center p-3 rounded-md border">
+                                <div className="flex items-center gap-3 rounded-md border p-3">
                                   <p className="flex-1 text-sm text-muted-foreground">
                                     {t(
                                       "createProfile.version.upgradeAvailable",
@@ -887,7 +887,7 @@ export function CreateProfileDialog({
                                 </div>
                               )}
                             {isBrowserCurrentlyDownloading("wayfern") && (
-                              <div className="p-3 text-sm rounded-md border text-muted-foreground">
+                              <div className="rounded-md border p-3 text-sm text-muted-foreground">
                                 {t("createProfile.version.downloading", {
                                   browser: "Wayfern",
                                   version:
@@ -915,8 +915,8 @@ export function CreateProfileDialog({
                             {selectedBrowser && (
                               <div className="space-y-3">
                                 {isLoadingReleaseTypes && (
-                                  <div className="flex gap-3 items-center">
-                                    <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                  <div className="flex items-center gap-3">
+                                    <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
                                     <p className="text-sm text-muted-foreground">
                                       {t("createProfile.version.fetching")}
                                     </p>
@@ -924,7 +924,7 @@ export function CreateProfileDialog({
                                 )}
                                 {!isLoadingReleaseTypes &&
                                   releaseTypesError && (
-                                    <div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10">
+                                    <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
                                       <p className="flex-1 text-sm text-destructive">
                                         {releaseTypesError}
                                       </p>
@@ -947,7 +947,7 @@ export function CreateProfileDialog({
                                   ) &&
                                   !getCreatableVersion(selectedBrowser) &&
                                   getBestAvailableVersion(selectedBrowser) && (
-                                    <div className="flex gap-3 items-center">
+                                    <div className="flex items-center gap-3">
                                       <p className="text-sm text-muted-foreground">
                                         {t(
                                           "createProfile.version.latestNeedsDownload",
@@ -1016,7 +1016,7 @@ export function CreateProfileDialog({
 
                         {/* Proxy / VPN Selection - Always visible */}
                         <div className="space-y-3">
-                          <div className="flex justify-between items-center">
+                          <div className="flex items-center justify-between">
                             <Label>{t("createProfile.proxy.title")}</Label>
                             <RippleButton
                               size="sm"
@@ -1024,7 +1024,7 @@ export function CreateProfileDialog({
                               onClick={() => {
                                 setShowProxyForm(true);
                               }}
-                              className="px-2 h-7 text-xs"
+                              className="h-7 px-2 text-xs"
                             >
                               <GoPlus className="mr-1 size-3" />{" "}
                               {t("createProfile.proxy.addProxy")}
@@ -1144,7 +1144,7 @@ export function CreateProfileDialog({
                                             />
                                             <Badge
                                               variant="outline"
-                                              className="text-[10px] px-1 py-0 leading-tight mr-1"
+                                              className="mr-1 px-1 py-0 text-[10px] leading-tight"
                                             >
                                               WG
                                             </Badge>
@@ -1158,7 +1158,7 @@ export function CreateProfileDialog({
                               </PopoverContent>
                             </Popover>
                           ) : (
-                            <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
+                            <div className="flex items-center gap-3 rounded-md border p-3 text-sm text-muted-foreground">
                               {t("createProfile.proxy.noProxiesAvailable")}
                             </div>
                           )}
@@ -1285,15 +1285,15 @@ export function CreateProfileDialog({
                           {selectedBrowser && (
                             <div className="space-y-3">
                               {isLoadingReleaseTypes && (
-                                <div className="flex gap-3 items-center">
-                                  <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                <div className="flex items-center gap-3">
+                                  <div className="size-4 animate-spin rounded-full border-2 border-muted/40 border-t-primary" />
                                   <p className="text-sm text-muted-foreground">
                                     {t("createProfile.version.fetching")}
                                   </p>
                                 </div>
                               )}
                               {!isLoadingReleaseTypes && releaseTypesError && (
-                                <div className="flex gap-3 items-center p-3 rounded-md border border-destructive/50 bg-destructive/10">
+                                <div className="flex items-center gap-3 rounded-md border border-destructive/50 bg-destructive/10 p-3">
                                   <p className="flex-1 text-sm text-destructive">
                                     {releaseTypesError}
                                   </p>
@@ -1316,7 +1316,7 @@ export function CreateProfileDialog({
                                 ) &&
                                 !getCreatableVersion(selectedBrowser) &&
                                 getBestAvailableVersion(selectedBrowser) && (
-                                  <div className="flex gap-3 items-center">
+                                  <div className="flex items-center gap-3">
                                     <p className="text-sm text-muted-foreground">
                                       {t(
                                         "createProfile.version.latestNeedsDownload",
@@ -1383,7 +1383,7 @@ export function CreateProfileDialog({
 
                         {/* Proxy / VPN Selection - Always visible */}
                         <div className="space-y-3">
-                          <div className="flex justify-between items-center">
+                          <div className="flex items-center justify-between">
                             <Label>{t("createProfile.proxy.title")}</Label>
                             <RippleButton
                               size="sm"
@@ -1391,7 +1391,7 @@ export function CreateProfileDialog({
                               onClick={() => {
                                 setShowProxyForm(true);
                               }}
-                              className="px-2 h-7 text-xs"
+                              className="h-7 px-2 text-xs"
                             >
                               <GoPlus className="mr-1 size-3" />{" "}
                               {t("createProfile.proxy.addProxy")}
@@ -1511,7 +1511,7 @@ export function CreateProfileDialog({
                                             />
                                             <Badge
                                               variant="outline"
-                                              className="text-[10px] px-1 py-0 leading-tight mr-1"
+                                              className="mr-1 px-1 py-0 text-[10px] leading-tight"
                                             >
                                               WG
                                             </Badge>
@@ -1525,7 +1525,7 @@ export function CreateProfileDialog({
                               </PopoverContent>
                             </Popover>
                           ) : (
-                            <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
+                            <div className="flex items-center gap-3 rounded-md border p-3 text-sm text-muted-foreground">
                               {t("createProfile.proxy.noProxiesAvailable")}
                             </div>
                           )}
@@ -1556,7 +1556,7 @@ export function CreateProfileDialog({
           </ScrollArea>
         </Tabs>
 
-        <DialogFooter className="shrink-0 pt-4 border-t">
+        <DialogFooter className="shrink-0 border-t pt-4">
           {currentStep === "browser-config" ? (
             <>
               <RippleButton variant="outline" onClick={handleBack}>
diff --git a/src/components/custom-toast.tsx b/src/components/custom-toast.tsx
index b9e39f7..a165abd 100644
--- a/src/components/custom-toast.tsx
+++ b/src/components/custom-toast.tsx
@@ -162,34 +162,34 @@ function formatEtaCompact(seconds: number): string {
 function getToastIcon(type: ToastProps["type"], stage?: string) {
   switch (type) {
     case "success":
-      return <LuCheckCheck className="shrink-0 size-4 text-foreground" />;
+      return <LuCheckCheck className="size-4 shrink-0 text-foreground" />;
     case "error":
-      return <LuTriangleAlert className="shrink-0 size-4 text-foreground" />;
+      return <LuTriangleAlert className="size-4 shrink-0 text-foreground" />;
     case "download":
       if (stage === "completed") {
-        return <LuCheckCheck className="shrink-0 size-4 text-foreground" />;
+        return <LuCheckCheck className="size-4 shrink-0 text-foreground" />;
       }
-      return <LuDownload className="shrink-0 size-4 text-foreground" />;
+      return <LuDownload className="size-4 shrink-0 text-foreground" />;
 
     case "version-update":
       return (
-        <LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" />
+        <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
       );
     case "fetching":
       return (
-        <LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" />
+        <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
       );
     case "sync-progress":
       return (
-        <LuRefreshCw className="shrink-0 size-4 animate-spin text-foreground" />
+        <LuRefreshCw className="size-4 shrink-0 animate-spin text-foreground" />
       );
     case "loading":
       return (
-        <div className="shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
+        <div className="size-4 shrink-0 animate-spin rounded-full border-2 border-foreground border-t-transparent" />
       );
     default:
       return (
-        <div className="shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
+        <div className="size-4 shrink-0 animate-spin rounded-full border-2 border-foreground border-t-transparent" />
       );
   }
 }
@@ -201,18 +201,16 @@ export function UnifiedToast(props: ToastProps) {
   const progress = "progress" in props ? props.progress : undefined;
 
   return (
-    <div className="flex items-start p-3 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground">
-      <div className="mr-3 mt-0.5">{getToastIcon(type, stage)}</div>
-      <div className="flex-1 min-w-0">
+    <div className="flex w-full max-w-md items-start rounded-lg border border-border bg-card p-3 text-card-foreground shadow-lg">
+      <div className="mt-0.5 mr-3">{getToastIcon(type, stage)}</div>
+      <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
-          <p className="text-sm font-semibold leading-tight text-foreground">
-            {title}
-          </p>
+          <p className="text-sm/tight font-semibold text-foreground">{title}</p>
           {onCancel && (
             <button
               type="button"
               onClick={onCancel}
-              className="ml-2 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors shrink-0"
+              className="ml-2 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
               aria-label={t("common.buttons.cancel")}
             >
               <LuX className="size-3" />
@@ -226,17 +224,17 @@ export function UnifiedToast(props: ToastProps) {
           "percentage" in progress &&
           stage === "downloading" && (
             <div className="mt-2 space-y-1">
-              <div className="flex justify-between items-center">
-                <p className="flex-1 min-w-0 text-xs text-muted-foreground">
+              <div className="flex items-center justify-between">
+                <p className="min-w-0 flex-1 text-xs text-muted-foreground">
                   {progress.percentage.toFixed(1)}%
                   {progress.speed && ` • ${progress.speed} MB/s`}
                   {progress.eta &&
                     ` • ${t("toasts.progress.remaining", { time: progress.eta })}`}
                 </p>
               </div>
-              <div className="w-full bg-muted rounded-full h-1.5">
+              <div className="h-1.5 w-full rounded-full bg-muted">
                 <div
-                  className="bg-foreground h-1.5 rounded-full transition-all duration-150"
+                  className="h-1.5 rounded-full bg-foreground transition-all duration-150"
                   style={{ width: `${progress.percentage}%` }}
                 />
               </div>
@@ -255,15 +253,15 @@ export function UnifiedToast(props: ToastProps) {
                   })}
               </p>
               <div className="flex items-center gap-x-2">
-                <div className="flex-1 bg-muted rounded-full h-1.5 min-w-0">
+                <div className="h-1.5 min-w-0 flex-1 rounded-full bg-muted">
                   <div
-                    className="bg-foreground h-1.5 rounded-full transition-all duration-150"
+                    className="h-1.5 rounded-full bg-foreground transition-all duration-150"
                     style={{
                       width: `${(progress.current / progress.total) * 100}%`,
                     }}
                   />
                 </div>
-                <span className="w-8 text-xs text-right whitespace-nowrap text-muted-foreground shrink-0">
+                <span className="w-8 shrink-0 text-right text-xs whitespace-nowrap text-muted-foreground">
                   {progress.current}/{progress.total}
                 </span>
               </div>
@@ -299,7 +297,7 @@ export function UnifiedToast(props: ToastProps) {
                   })}`}
               </p>
               {progress.failed_count > 0 && (
-                <p className="text-xs text-destructive mt-0.5">
+                <p className="mt-0.5 text-xs text-destructive">
                   {t("toasts.progress.filesFailed", {
                     count: progress.failed_count,
                   })}
@@ -310,7 +308,7 @@ export function UnifiedToast(props: ToastProps) {
 
         {/* Description */}
         {description && (
-          <p className="mt-1 text-xs leading-tight text-muted-foreground">
+          <p className="mt-1 text-xs/tight text-muted-foreground">
             {description}
           </p>
         )}
diff --git a/src/components/data-table-action-bar.tsx b/src/components/data-table-action-bar.tsx
index c07ed1d..c83a7fa 100644
--- a/src/components/data-table-action-bar.tsx
+++ b/src/components/data-table-action-bar.tsx
@@ -106,7 +106,7 @@ function DataTableActionBarAction({
       {...props}
     >
       {isPending ? (
-        <div className="size-3.5 rounded-full border border-current animate-spin border-t-transparent" />
+        <div className="size-3.5 animate-spin rounded-full border border-current border-t-transparent" />
       ) : (
         children
       )}
@@ -142,7 +142,7 @@ function DataTableActionBarSelection<TData>({
 
   return (
     <div className="flex h-7 items-center rounded-md border pr-1 pl-2.5">
-      <span className="whitespace-nowrap text-xs">
+      <span className="text-xs whitespace-nowrap">
         {t("dataTableActionBar.selected", {
           count: table.getFilteredSelectedRowModel().rows.length,
         })}
@@ -164,7 +164,7 @@ function DataTableActionBarSelection<TData>({
           className="flex items-center gap-2 border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-card [&>span]:hidden"
         >
           <p>{t("dataTableActionBar.clearSelection")}</p>
-          <kbd className="select-none rounded border bg-background px-1.5 py-px font-mono font-normal text-[0.7rem] text-foreground shadow-xs">
+          <kbd className="rounded border bg-background px-1.5 py-px font-mono text-[0.7rem] font-normal text-foreground shadow-xs select-none">
             <abbr title={t("common.keys.escape")} className="no-underline">
               Esc
             </abbr>
diff --git a/src/components/delete-confirmation-dialog.tsx b/src/components/delete-confirmation-dialog.tsx
index 098b256..7386ad8 100644
--- a/src/components/delete-confirmation-dialog.tsx
+++ b/src/components/delete-confirmation-dialog.tsx
@@ -55,10 +55,10 @@ export function DeleteConfirmationDialog({
           <DialogDescription>{description}</DialogDescription>
           {profileIds && profileIds.length > 0 && (
             <div className="mt-4">
-              <p className="text-sm font-medium mb-2">
+              <p className="mb-2 text-sm font-medium">
                 {t("deleteDialog.profilesToDelete")}
               </p>
-              <div className="bg-muted rounded-md p-3 max-h-32 overflow-y-auto">
+              <div className="max-h-32 overflow-y-auto rounded-md bg-muted p-3">
                 <ul className="space-y-1">
                   {profileIds.map((id) => {
                     const profile = profiles.find((p) => p.id === id);
@@ -66,7 +66,7 @@ export function DeleteConfirmationDialog({
                     return (
                       <li
                         key={id}
-                        className="text-sm text-muted-foreground truncate"
+                        className="truncate text-sm text-muted-foreground"
                       >
                         • {displayName}
                       </li>
diff --git a/src/components/delete-group-dialog.tsx b/src/components/delete-group-dialog.tsx
index 0142a0d..26c8fd1 100644
--- a/src/components/delete-group-dialog.tsx
+++ b/src/components/delete-group-dialog.tsx
@@ -136,10 +136,10 @@ export function DeleteGroupDialog({
                         count: associatedProfiles.length,
                       })}
                     </Label>
-                    <ScrollArea className="max-h-[min(8rem,25vh)] overflow-y-auto w-full border rounded-md p-3">
+                    <ScrollArea className="max-h-[min(8rem,25vh)] w-full overflow-y-auto rounded-md border p-3">
                       <div className="space-y-1">
                         {associatedProfiles.map((profile) => (
-                          <div key={profile.id} className="text-sm truncate">
+                          <div key={profile.id} className="truncate text-sm">
                             • {profile.name}
                           </div>
                         ))}
@@ -184,7 +184,7 @@ export function DeleteGroupDialog({
           )}
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/dns-blocklist-dialog.tsx b/src/components/dns-blocklist-dialog.tsx
index d71bba3..2ee3bbc 100644
--- a/src/components/dns-blocklist-dialog.tsx
+++ b/src/components/dns-blocklist-dialog.tsx
@@ -87,7 +87,7 @@ export function DnsBlocklistDialog({
           {t("dnsBlocklist.settingsDescription")}
         </p>
 
-        <div className="space-y-3 overflow-y-auto min-h-0 max-h-[40vh]">
+        <div className="max-h-[40vh] min-h-0 space-y-3 overflow-y-auto">
           {statuses.map((status) => (
             <div
               key={status.level}
@@ -100,18 +100,18 @@ export function DnsBlocklistDialog({
                   </span>
                   {status.is_cached ? (
                     status.is_fresh ? (
-                      <Badge variant="default" className="text-[10px] px-1.5">
+                      <Badge variant="default" className="px-1.5 text-[10px]">
                         {t("dnsBlocklist.fresh")}
                       </Badge>
                     ) : (
-                      <Badge variant="secondary" className="text-[10px] px-1.5">
+                      <Badge variant="secondary" className="px-1.5 text-[10px]">
                         {t("dnsBlocklist.stale")}
                       </Badge>
                     )
                   ) : (
                     <Badge
                       variant="outline"
-                      className="text-[10px] px-1.5 text-muted-foreground"
+                      className="px-1.5 text-[10px] text-muted-foreground"
                     >
                       {t("dnsBlocklist.notCached")}
                     </Badge>
diff --git a/src/components/edit-group-dialog.tsx b/src/components/edit-group-dialog.tsx
index fe8517d..53f4de5 100644
--- a/src/components/edit-group-dialog.tsx
+++ b/src/components/edit-group-dialog.tsx
@@ -103,7 +103,7 @@ export function EditGroupDialog({
           </div>
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/extension-group-assignment-dialog.tsx b/src/components/extension-group-assignment-dialog.tsx
index 4bc5467..605967c 100644
--- a/src/components/extension-group-assignment-dialog.tsx
+++ b/src/components/extension-group-assignment-dialog.tsx
@@ -110,8 +110,8 @@ export function ExtensionGroupAssignmentDialog({
         <div className="space-y-4">
           <div className="space-y-2">
             <Label>{t("extensions.assignTitle")}:</Label>
-            <div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto">
-              <ul className="text-sm space-y-1">
+            <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
+              <ul className="space-y-1 text-sm">
                 {selectedProfiles.map((profileId) => {
                   const profile = profiles.find(
                     (p: BrowserProfile) => p.id === profileId,
@@ -160,7 +160,7 @@ export function ExtensionGroupAssignmentDialog({
           </div>
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/extension-management-dialog.tsx b/src/components/extension-management-dialog.tsx
index 22e9c71..d588ea6 100644
--- a/src/components/extension-management-dialog.tsx
+++ b/src/components/extension-management-dialog.tsx
@@ -655,7 +655,7 @@ export function ExtensionManagementDialog({
       const hasFirefox = compat.includes("firefox");
       if (!hasChromium && !hasFirefox) return null;
       return (
-        <div className="flex items-center gap-1 shrink-0">
+        <div className="flex shrink-0 items-center gap-1">
           {hasChromium && (
             <Tooltip>
               <TooltipTrigger asChild>
@@ -753,7 +753,7 @@ export function ExtensionManagementDialog({
             onClick={() => {
               column.toggleSorting(column.getIsSorted() === "asc");
             }}
-            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+            className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
           >
             {t("common.labels.name")}
             {column.getIsSorted() === "asc" ? (
@@ -764,7 +764,7 @@ export function ExtensionManagementDialog({
           </Button>
         ),
         cell: ({ row }) => (
-          <span className="text-sm font-medium truncate min-w-0 block">
+          <span className="block min-w-0 truncate text-sm font-medium">
             {row.original.name}
           </span>
         ),
@@ -786,7 +786,7 @@ export function ExtensionManagementDialog({
           const ext = row.original;
           const syncDot = getSyncStatusDot(ext, extSyncStatus[ext.id], t);
           return (
-            <div className="flex items-center gap-2 shrink-0">
+            <div className="flex shrink-0 items-center gap-2">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div
@@ -801,7 +801,7 @@ export function ExtensionManagementDialog({
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="inline-flex items-center shrink-0">
+                  <span className="inline-flex shrink-0 items-center">
                     <AnimatedSwitch
                       checked={ext.sync_enabled}
                       onCheckedChange={() => void handleToggleExtSync(ext)}
@@ -829,7 +829,7 @@ export function ExtensionManagementDialog({
         cell: ({ row }) => {
           const ext = row.original;
           return (
-            <div className="flex gap-0.5 justify-end shrink-0">
+            <div className="flex shrink-0 justify-end gap-0.5">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -927,7 +927,7 @@ export function ExtensionManagementDialog({
             onClick={() => {
               column.toggleSorting(column.getIsSorted() === "asc");
             }}
-            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+            className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
           >
             {t("common.labels.name")}
             {column.getIsSorted() === "asc" ? (
@@ -938,7 +938,7 @@ export function ExtensionManagementDialog({
           </Button>
         ),
         cell: ({ row }) => (
-          <span className="font-medium text-sm truncate min-w-0 block">
+          <span className="block min-w-0 truncate text-sm font-medium">
             {row.original.name}
           </span>
         ),
@@ -956,7 +956,7 @@ export function ExtensionManagementDialog({
           const visibleExts = groupExts.slice(0, MAX_VISIBLE_ICONS);
           const overflowCount = groupExts.length - MAX_VISIBLE_ICONS;
           return (
-            <div className="flex items-center gap-1 min-w-0">
+            <div className="flex min-w-0 items-center gap-1">
               {visibleExts.map((ext) => (
                 <Tooltip key={ext.id}>
                   <TooltipTrigger asChild>
@@ -972,7 +972,7 @@ export function ExtensionManagementDialog({
                   <TooltipTrigger asChild>
                     <Badge
                       variant="secondary"
-                      className="text-xs h-5 px-1.5 shrink-0"
+                      className="h-5 shrink-0 px-1.5 text-xs"
                     >
                       +{overflowCount}
                     </Badge>
@@ -989,7 +989,7 @@ export function ExtensionManagementDialog({
                 </Tooltip>
               )}
               {groupExts.length === 0 && (
-                <span className="text-xs text-muted-foreground truncate min-w-0">
+                <span className="min-w-0 truncate text-xs text-muted-foreground">
                   {t("extensions.noExtensionsInGroup")}
                 </span>
               )}
@@ -1010,7 +1010,7 @@ export function ExtensionManagementDialog({
             t,
           );
           return (
-            <div className="flex items-center gap-2 shrink-0">
+            <div className="flex shrink-0 items-center gap-2">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div
@@ -1025,7 +1025,7 @@ export function ExtensionManagementDialog({
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="inline-flex items-center shrink-0">
+                  <span className="inline-flex shrink-0 items-center">
                     <AnimatedSwitch
                       checked={group.sync_enabled}
                       onCheckedChange={() => void handleToggleGroupSync(group)}
@@ -1053,7 +1053,7 @@ export function ExtensionManagementDialog({
         cell: ({ row }) => {
           const group = row.original;
           return (
-            <div className="flex gap-0.5 justify-end shrink-0">
+            <div className="flex shrink-0 justify-end gap-0.5">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -1116,7 +1116,7 @@ export function ExtensionManagementDialog({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
-        <DialogContent className="max-w-[min(80rem,calc(100%-4rem))] max-h-[90vh] flex flex-col">
+        <DialogContent className="flex max-h-[90vh] max-w-[min(80rem,calc(100%-4rem))] flex-col">
           {!subPage && (
             <DialogHeader>
               <DialogTitle className="flex items-center gap-2">
@@ -1130,15 +1130,15 @@ export function ExtensionManagementDialog({
             </DialogHeader>
           )}
 
-          <div className="@container relative w-full flex-1 min-h-0 flex flex-col">
+          <div className="@container relative flex min-h-0 w-full flex-1 flex-col">
             {limitedMode && (
               <>
-                <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
-                <div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" />
-                <div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" />
-                <div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" />
-                <div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" />
-                <div className="absolute inset-0 flex items-center justify-center z-[3]">
+                <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
+                <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
+                <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
+                <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
+                <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
+                <div className="absolute inset-0 z-3 flex items-center justify-center">
                   <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                     <ProBadge />
                     <span className="text-sm font-medium text-muted-foreground">
@@ -1153,9 +1153,9 @@ export function ExtensionManagementDialog({
               key={initialTab}
               value={activeTab}
               onValueChange={(v) => setActiveTab(v as "extensions" | "groups")}
-              className="flex-1 min-h-0 flex flex-col"
+              className="flex min-h-0 flex-1 flex-col"
             >
-              <div className="flex flex-wrap items-center justify-between gap-2 shrink-0">
+              <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
                 <AnimatedTabsList>
                   <AnimatedTabsTrigger
                     value="extensions"
@@ -1219,15 +1219,15 @@ export function ExtensionManagementDialog({
               </div>
 
               {/* Notice */}
-              <div className="rounded-md bg-muted/50 p-3 text-sm text-muted-foreground mt-4 shrink-0">
+              <div className="mt-4 shrink-0 rounded-md bg-muted/50 p-3 text-sm text-muted-foreground">
                 {t("extensions.managedNotice")}
               </div>
 
               <AnimatedTabsContent
                 value="extensions"
-                className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col"
+                className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
               >
-                <div className="flex flex-col gap-4 flex-1 min-h-0">
+                <div className="flex min-h-0 flex-1 flex-col gap-4">
                   <Input
                     id="ext-file-input"
                     type="file"
@@ -1291,7 +1291,7 @@ export function ExtensionManagementDialog({
                   ) : (
                     <FadingScrollArea
                       className={cn(
-                        "flex-1 min-h-0",
+                        "min-h-0 flex-1",
                         selectedExtensions.length > 0 && "pb-16",
                       )}
                       style={
@@ -1367,12 +1367,12 @@ export function ExtensionManagementDialog({
 
               <AnimatedTabsContent
                 value="groups"
-                className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col"
+                className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
               >
-                <div className="flex flex-col gap-4 flex-1 min-h-0">
+                <div className="flex min-h-0 flex-1 flex-col gap-4">
                   {/* Create group form */}
                   {showCreateGroup && (
-                    <div className="flex gap-2 items-center">
+                    <div className="flex items-center gap-2">
                       <Input
                         value={newGroupName}
                         onChange={(e) => {
@@ -1412,7 +1412,7 @@ export function ExtensionManagementDialog({
                   ) : (
                     <FadingScrollArea
                       className={cn(
-                        "flex-1 min-h-0",
+                        "min-h-0 flex-1",
                         selectedGroups.length > 0 && "pb-16",
                       )}
                       style={
@@ -1509,7 +1509,7 @@ export function ExtensionManagementDialog({
           }
         }}
       >
-        <DialogContent className="max-w-lg max-h-[90vh] flex flex-col">
+        <DialogContent className="flex max-h-[90vh] max-w-lg flex-col">
           <DialogHeader>
             <DialogTitle>{t("extensions.editGroup")}</DialogTitle>
             <DialogDescription>
@@ -1517,7 +1517,7 @@ export function ExtensionManagementDialog({
             </DialogDescription>
           </DialogHeader>
 
-          <ScrollArea className="overflow-y-auto flex-1 -mx-6 px-6">
+          <ScrollArea className="-mx-6 flex-1 overflow-y-auto px-6">
             <div className="space-y-4">
               <div className="space-y-2">
                 <Label>{t("common.labels.name")}</Label>
@@ -1562,11 +1562,11 @@ export function ExtensionManagementDialog({
               <div className="space-y-2">
                 <Label>{t("extensions.groupExtensions")}</Label>
                 {editGroupExtensionIds.length === 0 ? (
-                  <div className="text-sm text-muted-foreground py-2">
+                  <div className="py-2 text-sm text-muted-foreground">
                     {t("extensions.noExtensionsInGroup")}
                   </div>
                 ) : (
-                  <div className="space-y-1 max-h-[min(40vh,320px)] overflow-y-auto">
+                  <div className="max-h-[min(40vh,320px)] space-y-1 overflow-y-auto">
                     {editGroupExtensionIds.map((extId) => {
                       const ext = extensions.find((e) => e.id === extId);
                       if (!ext) return null;
@@ -1576,14 +1576,14 @@ export function ExtensionManagementDialog({
                           className="flex items-center gap-2 rounded-md border px-2 py-1.5"
                         >
                           {renderExtensionIcon(ext, "sm")}
-                          <span className="text-sm flex-1 truncate min-w-0">
+                          <span className="min-w-0 flex-1 truncate text-sm">
                             {ext.name}
                           </span>
                           {renderCompatIcons(ext.browser_compatibility)}
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="size-6 p-0 shrink-0"
+                            className="size-6 shrink-0 p-0"
                             onClick={() => {
                               setEditGroupExtensionIds((prev) =>
                                 prev.filter((id) => id !== extId),
@@ -1633,7 +1633,7 @@ export function ExtensionManagementDialog({
           }
         }}
       >
-        <DialogContent className="max-w-lg max-h-[90vh] flex flex-col">
+        <DialogContent className="flex max-h-[90vh] max-w-lg flex-col">
           <DialogHeader>
             <DialogTitle>{t("extensions.editExtension")}</DialogTitle>
             <DialogDescription>
@@ -1641,7 +1641,7 @@ export function ExtensionManagementDialog({
             </DialogDescription>
           </DialogHeader>
 
-          <ScrollArea className="overflow-y-auto flex-1 -mx-6 px-6">
+          <ScrollArea className="-mx-6 flex-1 overflow-y-auto px-6">
             {editingExtension && (
               <div className="space-y-4">
                 <div className="space-y-2">
@@ -1659,8 +1659,8 @@ export function ExtensionManagementDialog({
                 </div>
 
                 {/* Metadata from manifest.json */}
-                <div className="rounded-md border p-3 space-y-2">
-                  <Label className="text-xs text-muted-foreground uppercase tracking-wide">
+                <div className="space-y-2 rounded-md border p-3">
+                  <Label className="text-xs tracking-wide text-muted-foreground uppercase">
                     {t("extensions.metadata")}
                   </Label>
                   <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
@@ -1711,7 +1711,7 @@ export function ExtensionManagementDialog({
                           href={editingExtension.homepage_url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-primary hover:underline flex items-center gap-1 min-w-0"
+                          className="flex min-w-0 items-center gap-1 text-primary hover:underline"
                         >
                           <span className="truncate">
                             {editingExtension.homepage_url}
@@ -1724,7 +1724,7 @@ export function ExtensionManagementDialog({
                       !editingExtension.author &&
                       !editingExtension.description &&
                       !editingExtension.homepage_url && (
-                        <span className="col-span-2 text-muted-foreground text-xs">
+                        <span className="col-span-2 text-xs text-muted-foreground">
                           {t("extensions.noMetadata")}
                         </span>
                       )}
@@ -1734,7 +1734,7 @@ export function ExtensionManagementDialog({
                 {/* Re-upload */}
                 <div className="space-y-2">
                   <Label>{t("extensions.reupload")}</Label>
-                  <div className="flex gap-2 items-center">
+                  <div className="flex items-center gap-2">
                     <RippleButton
                       size="sm"
                       variant="outline"
@@ -1742,7 +1742,7 @@ export function ExtensionManagementDialog({
                         document.getElementById("ext-edit-file-input")?.click()
                       }
                     >
-                      <LuUpload className="size-3 mr-1" />
+                      <LuUpload className="mr-1 size-3" />
                       {t("extensions.selectFile")}
                     </RippleButton>
                     <input
@@ -1753,7 +1753,7 @@ export function ExtensionManagementDialog({
                       onChange={handleEditFileSelect}
                     />
                     {pendingUpdateFile && (
-                      <span className="text-xs text-muted-foreground truncate max-w-[200px]">
+                      <span className="max-w-[200px] truncate text-xs text-muted-foreground">
                         {pendingUpdateFile.name}
                       </span>
                     )}
diff --git a/src/components/group-assignment-dialog.tsx b/src/components/group-assignment-dialog.tsx
index f693651..c16905c 100644
--- a/src/components/group-assignment-dialog.tsx
+++ b/src/components/group-assignment-dialog.tsx
@@ -134,8 +134,8 @@ export function GroupAssignmentDialog({
         <div className="space-y-4">
           <div className="space-y-2">
             <Label>{t("groupAssignment.selectedProfilesLabel")}</Label>
-            <div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto">
-              <ul className="text-sm space-y-1">
+            <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
+              <ul className="space-y-1 text-sm">
                 {selectedProfiles.map((profileId) => {
                   // Find the profile name for display
                   const profile = profiles.find(
@@ -153,7 +153,7 @@ export function GroupAssignmentDialog({
           </div>
 
           <div className="space-y-2">
-            <div className="flex justify-between items-center">
+            <div className="flex items-center justify-between">
               <Label htmlFor="group-select">
                 {t("groupAssignment.assignGroupLabel")}
               </Label>
@@ -198,7 +198,7 @@ export function GroupAssignmentDialog({
           </div>
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/group-management-dialog.tsx b/src/components/group-management-dialog.tsx
index f006906..9dd0f99 100644
--- a/src/components/group-management-dialog.tsx
+++ b/src/components/group-management-dialog.tsx
@@ -327,7 +327,7 @@ export function GroupManagementDialog({
             onClick={() => {
               column.toggleSorting(column.getIsSorted() === "asc");
             }}
-            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+            className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
           >
             {t("common.labels.name")}
             {column.getIsSorted() === "asc" ? (
@@ -346,7 +346,7 @@ export function GroupManagementDialog({
             groupSyncErrors[group.id],
           );
           return (
-            <div className="flex items-center gap-2 font-medium min-w-0">
+            <div className="flex min-w-0 items-center gap-2 font-medium">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div
@@ -557,7 +557,7 @@ export function GroupManagementDialog({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
-        <DialogContent className="max-w-[min(60rem,calc(100%-4rem))] max-h-[90vh] flex flex-col">
+        <DialogContent className="flex max-h-[90vh] max-w-[min(60rem,calc(100%-4rem))] flex-col">
           {!subPage && (
             <DialogHeader>
               <DialogTitle>{t("groups.management")}</DialogTitle>
@@ -567,7 +567,7 @@ export function GroupManagementDialog({
             </DialogHeader>
           )}
 
-          <div className="w-full flex flex-col gap-4 flex-1 min-h-0">
+          <div className="flex min-h-0 w-full flex-1 flex-col gap-4">
             <div className="flex items-start justify-between gap-3">
               <div className="flex flex-col gap-1">
                 <h2 className="text-base font-semibold">
@@ -582,7 +582,7 @@ export function GroupManagementDialog({
                 onClick={() => {
                   setCreateDialogOpen(true);
                 }}
-                className="flex gap-2 items-center shrink-0"
+                className="flex shrink-0 items-center gap-2"
               >
                 <GoPlus className="size-4" />
                 {t("proxies.management.create")}
@@ -590,7 +590,7 @@ export function GroupManagementDialog({
             </div>
 
             {error && (
-              <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+              <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
                 {error}
               </div>
             )}
@@ -607,7 +607,7 @@ export function GroupManagementDialog({
             ) : (
               <FadingScrollArea
                 className={cn(
-                  "flex-1 min-h-0",
+                  "min-h-0 flex-1",
                   selectedGroupsForBulk.length > 0 && "pb-16",
                 )}
                 style={
diff --git a/src/components/home-header.tsx b/src/components/home-header.tsx
index 2e023f0..9f6a886 100644
--- a/src/components/home-header.tsx
+++ b/src/components/home-header.tsx
@@ -175,7 +175,7 @@ const HomeHeader = ({
       onPointerCancel={handlePointerEnd}
       onDoubleClick={handleDoubleClick}
       className={cn(
-        "flex items-center gap-2 h-11 pl-3 border-b border-border bg-card select-none",
+        "flex h-11 items-center gap-2 border-b border-border bg-card pl-3 select-none",
         // Windows: WindowDragArea renders three 44px native-style controls
         // (minimize + maximize/restore + close) fixed at top-right with
         // z-50, total 132px wide. Reserve 144px on the right edge so the
@@ -187,24 +187,24 @@ const HomeHeader = ({
       {isMacOS && (
         <div
           aria-hidden="true"
-          className="flex items-center gap-[7px] mr-1 shrink-0"
+          className="mr-1 flex shrink-0 items-center gap-[7px]"
         >
           {/* Reserve space for the macOS native traffic lights — the OS draws
               the colored buttons here through the transparent titlebar. */}
-          <div className="w-[11px] h-[11px] rounded-full" />
-          <div className="w-[11px] h-[11px] rounded-full" />
-          <div className="w-[11px] h-[11px] rounded-full" />
+          <div className="size-[11px] rounded-full" />
+          <div className="size-[11px] rounded-full" />
+          <div className="size-[11px] rounded-full" />
         </div>
       )}
 
       {pageTitle ? (
-        <span className="text-xs font-semibold text-card-foreground ml-2">
+        <span className="ml-2 text-xs font-semibold text-card-foreground">
           {pageTitle}
         </span>
       ) : null}
 
       {showProfileToolbar && (
-        <div className="relative flex-1 min-w-0 flex items-center">
+        <div className="relative flex min-w-0 flex-1 items-center">
           {groupsFadeLeft && (
             <button
               type="button"
@@ -217,14 +217,14 @@ const HomeHeader = ({
                     behavior: "smooth",
                   });
               }}
-              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
+              className="absolute top-1/2 left-0 z-10 grid size-5 -translate-y-1/2 place-items-center rounded-full bg-card/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
             >
               <LuChevronLeft className="size-3" />
             </button>
           )}
           <div
             ref={groupsScrollRef}
-            className="flex items-center gap-3 ml-2 overflow-x-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+            className="ml-2 flex scrollbar-none items-center gap-3 overflow-x-auto scroll-smooth [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
             style={{
               paddingLeft: groupsFadeLeft ? 22 : 0,
               paddingRight: groupsFadeRight ? 22 : 0,
@@ -241,9 +241,9 @@ const HomeHeader = ({
                     onGroupSelect(ALL_FILTER_ID);
                   }}
                   className={cn(
-                    "flex items-center gap-1.5 h-7 px-1 text-xs transition-colors duration-100 shrink-0",
+                    "flex h-7 shrink-0 items-center gap-1.5 px-1 text-xs transition-colors duration-100",
                     active
-                      ? "text-foreground font-medium"
+                      ? "font-medium text-foreground"
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
@@ -265,9 +265,9 @@ const HomeHeader = ({
                     onGroupSelect(active ? ALL_FILTER_ID : group.id);
                   }}
                   className={cn(
-                    "flex items-center gap-1.5 h-7 px-1 text-xs transition-colors duration-100 shrink-0",
+                    "flex h-7 shrink-0 items-center gap-1.5 px-1 text-xs transition-colors duration-100",
                     active
-                      ? "text-foreground font-medium"
+                      ? "font-medium text-foreground"
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
@@ -291,7 +291,7 @@ const HomeHeader = ({
                     behavior: "smooth",
                   });
               }}
-              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
+              className="absolute top-1/2 right-0 z-10 grid size-5 -translate-y-1/2 place-items-center rounded-full bg-card/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
             >
               <LuChevronRight className="size-3" />
             </button>
@@ -310,16 +310,16 @@ const HomeHeader = ({
             onChange={(e) => {
               onSearchQueryChange(e.target.value);
             }}
-            className="pr-7 pl-8 w-36 min-[860px]:w-52 h-7 text-xs"
+            className="h-7 w-36 pr-7 pl-8 text-xs min-[860px]:w-52"
           />
-          <LuSearch className="absolute left-2.5 top-1/2 size-3.5 transform -translate-y-1/2 text-muted-foreground pointer-events-none" />
+          <LuSearch className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 transform text-muted-foreground" />
           {searchQuery ? (
             <button
               type="button"
               onClick={() => {
                 onSearchQueryChange("");
               }}
-              className="absolute right-1.5 top-1/2 p-0.5 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent"
+              className="absolute top-1/2 right-1.5 -translate-y-1/2 transform rounded-sm p-0.5 transition-colors hover:bg-accent"
               aria-label={t("header.clearSearch")}
             >
               <LuX className="size-3.5 text-muted-foreground hover:text-foreground" />
@@ -338,7 +338,7 @@ const HomeHeader = ({
                 onClick={() => {
                   onCreateProfileDialogOpen(true);
                 }}
-                className="flex gap-1.5 items-center h-7 px-2.5 text-xs"
+                className="flex h-7 items-center gap-1.5 px-2.5 text-xs"
               >
                 <GoPlus className="size-3.5" />
                 {t("header.newProfile")}
diff --git a/src/components/import-profile-dialog.tsx b/src/components/import-profile-dialog.tsx
index 6c61b8e..401aa20 100644
--- a/src/components/import-profile-dialog.tsx
+++ b/src/components/import-profile-dialog.tsx
@@ -306,7 +306,7 @@ export function ImportProfileDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
-      <DialogContent className="max-w-[min(48rem,calc(100%-4rem))] max-h-[80vh] flex flex-col">
+      <DialogContent className="flex max-h-[80vh] max-w-[min(48rem,calc(100%-4rem))] flex-col">
         {!subPage && (
           <DialogHeader className="shrink-0">
             <DialogTitle>{t("importProfile.title")}</DialogTitle>
@@ -315,7 +315,7 @@ export function ImportProfileDialog({
 
         <div
           className={cn(
-            "overflow-y-auto flex-1 space-y-6 min-h-0",
+            "min-h-0 flex-1 space-y-6 overflow-y-auto",
             subPage && "mx-auto w-full max-w-2xl",
           )}
         >
@@ -389,7 +389,7 @@ export function ImportProfileDialog({
                                   key={profile.path}
                                   value={profile.path}
                                 >
-                                  <div className="flex gap-2 items-center">
+                                  <div className="flex items-center gap-2">
                                     {IconComponent && (
                                       <IconComponent className="size-4" />
                                     )}
@@ -413,7 +413,7 @@ export function ImportProfileDialog({
                       </div>
 
                       {selectedProfile && (
-                        <div className="p-3 rounded-lg bg-muted">
+                        <div className="rounded-lg bg-muted p-3">
                           <p className="text-sm break-all">
                             <span className="font-medium">
                               {t("importProfile.pathLabel")}
@@ -481,7 +481,7 @@ export function ImportProfileDialog({
                             const IconComponent = getBrowserIcon(browser);
                             return (
                               <SelectItem key={browser} value={browser}>
-                                <div className="flex gap-2 items-center">
+                                <div className="flex items-center gap-2">
                                   {IconComponent && (
                                     <IconComponent className="size-4" />
                                   )}
@@ -518,7 +518,7 @@ export function ImportProfileDialog({
                           <FaFolder className="size-4" />
                         </Button>
                       </div>
-                      <p className="mt-2 text-xs text-muted-foreground break-all">
+                      <p className="mt-2 text-xs break-all text-muted-foreground">
                         {t("importProfile.examplePaths")}
                         <br />
                         macOS: ~/Library/Application
@@ -604,9 +604,9 @@ export function ImportProfileDialog({
 
         <div
           className={cn(
-            "shrink-0 flex gap-2 items-center justify-end",
+            "flex shrink-0 items-center justify-end gap-2",
             subPage
-              ? "pt-2 border-t border-border mx-auto w-full max-w-2xl"
+              ? "mx-auto w-full max-w-2xl border-t border-border pt-2"
               : undefined,
           )}
         >
diff --git a/src/components/integrations-dialog.tsx b/src/components/integrations-dialog.tsx
index 803ce1f..0b8504e 100644
--- a/src/components/integrations-dialog.tsx
+++ b/src/components/integrations-dialog.tsx
@@ -308,7 +308,7 @@ export function IntegrationsDialog({
       }}
       subPage={subPage}
     >
-      <DialogContent className="max-w-3xl max-h-[calc(100vh-5rem)] flex flex-col">
+      <DialogContent className="flex max-h-[calc(100vh-5rem)] max-w-3xl flex-col">
         {!subPage && (
           <DialogHeader className="shrink-0">
             <DialogTitle>{t("integrations.title")}</DialogTitle>
@@ -317,8 +317,8 @@ export function IntegrationsDialog({
 
         <div
           className={cn(
-            "overflow-y-auto flex-1 min-h-0",
-            subPage && "w-full max-w-3xl mx-auto",
+            "min-h-0 flex-1 overflow-y-auto",
+            subPage && "mx-auto w-full max-w-3xl",
           )}
         >
           <AnimatedTabs key={initialTab} defaultValue={initialTab}>
@@ -333,12 +333,12 @@ export function IntegrationsDialog({
 
             <AnimatedTabsContent
               value="api"
-              className="mt-4 flex flex-col gap-4 @container"
+              className="@container mt-4 flex flex-col gap-4"
             >
-              <div className="rounded-md border bg-card p-4 flex flex-col gap-4">
+              <div className="flex flex-col gap-4 rounded-md border bg-card p-4">
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex items-start gap-3">
-                    <LuPlug className="size-5 mt-0.5 text-muted-foreground" />
+                    <LuPlug className="mt-0.5 size-5 text-muted-foreground" />
                     <div className="flex flex-col gap-1">
                       <Label className="text-sm font-medium">
                         {t("integrations.apiEnableLabel")}
@@ -370,9 +370,9 @@ export function IntegrationsDialog({
 
               {settings.api_enabled && (
                 <>
-                  <div className="grid grid-cols-1 @2xl:grid-cols-2 gap-4">
-                    <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
-                      <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                  <div className="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
+                    <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
+                      <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
                         {t("integrations.apiPortLabel")}
                       </Label>
                       <div className="flex items-center gap-2">
@@ -463,9 +463,9 @@ export function IntegrationsDialog({
                       </div>
                     </div>
 
-                    <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                    <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
                       <div className="flex items-center justify-between">
-                        <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
                           {t("integrations.apiTokenLabel")}
                         </Label>
                       </div>
@@ -475,13 +475,13 @@ export function IntegrationsDialog({
                             type={showApiToken ? "text" : "password"}
                             value={settings.api_token ?? ""}
                             readOnly
-                            className="font-mono pr-10"
+                            className="pr-10 font-mono"
                           />
                           <Button
                             type="button"
                             variant="ghost"
                             size="sm"
-                            className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                            className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
                             onClick={() => {
                               setShowApiToken(!showApiToken);
                             }}
@@ -501,9 +501,9 @@ export function IntegrationsDialog({
                     </div>
                   </div>
 
-                  <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                  <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
                     <div className="flex items-center justify-between">
-                      <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
                         {t("integrations.apiExampleRequest")}
                       </Label>
                       <CopyToClipboard
@@ -511,7 +511,7 @@ export function IntegrationsDialog({
                         successMessage={t("common.buttons.copied")}
                       />
                     </div>
-                    <pre className="font-mono text-[11px] whitespace-pre overflow-x-auto bg-background rounded p-3">
+                    <pre className="overflow-x-auto rounded bg-background p-3 font-mono text-[11px] whitespace-pre">
                       {`curl -H "Authorization: Bearer \${TOKEN}" \\
      http://127.0.0.1:${apiServerPort ?? settings.api_port}/v1/profiles`}
                     </pre>
@@ -524,10 +524,10 @@ export function IntegrationsDialog({
               value="mcp"
               className="mt-4 flex flex-col gap-5"
             >
-              <div className="rounded-md border bg-card p-4 flex flex-col gap-4">
+              <div className="flex flex-col gap-4 rounded-md border bg-card p-4">
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex items-start gap-3">
-                    <LuZap className="size-5 mt-0.5 text-muted-foreground" />
+                    <LuZap className="mt-0.5 size-5 text-muted-foreground" />
                     <div className="flex flex-col gap-1">
                       <Label className="text-sm font-medium">
                         {t("integrations.mcpEnableLabel")}
@@ -552,8 +552,8 @@ export function IntegrationsDialog({
 
               {mcpConfig && (
                 <>
-                  <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
-                    <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                  <div className="flex flex-col gap-2 rounded-md border bg-card p-4">
+                    <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
                       {t("integrations.mcp.url")}
                     </Label>
                     <div className="flex items-center gap-x-2">
@@ -562,13 +562,13 @@ export function IntegrationsDialog({
                           type={showMcpUrl ? "text" : "password"}
                           value={mcpUrl}
                           readOnly
-                          className="font-mono text-xs pr-10"
+                          className="pr-10 font-mono text-xs"
                         />
                         <Button
                           type="button"
                           variant="ghost"
                           size="sm"
-                          className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                          className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
                           onClick={() => {
                             setShowMcpUrl(!showMcpUrl);
                           }}
@@ -587,32 +587,32 @@ export function IntegrationsDialog({
                     </div>
                   </div>
 
-                  <div className="flex flex-col gap-3 @container">
-                    <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                  <div className="@container flex flex-col gap-3">
+                    <Label className="text-[10px] tracking-wide text-muted-foreground uppercase">
                       {t("integrations.mcp.clientsLabel")}
                     </Label>
-                    <div className="grid grid-cols-1 @2xl:grid-cols-2 gap-3">
+                    <div className="grid grid-cols-1 gap-3 @2xl:grid-cols-2">
                       {agents.map((agent) => {
                         const busy = busyAgentIds.has(agent.id);
                         return (
                           <div
                             key={agent.id}
-                            className="rounded-md border bg-card px-3 py-2.5 flex items-center gap-3"
+                            className="flex items-center gap-3 rounded-md border bg-card px-3 py-2.5"
                           >
-                            <div className="grid place-items-center size-8 rounded-md bg-muted shrink-0">
+                            <div className="grid size-8 shrink-0 place-items-center rounded-md bg-muted">
                               <AgentIcon category={agent.category} />
                             </div>
                             <div className="min-w-0 flex-1">
-                              <p className="text-sm font-medium truncate">
+                              <p className="truncate text-sm font-medium">
                                 {agent.display_name}
                               </p>
-                              <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                              <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                                 {categoryLabel(t, agent.category)}
                               </p>
                             </div>
                             {agent.connected ? (
                               <div className="flex items-center gap-1">
-                                <span className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-foreground">
+                                <span className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-[10px] font-medium tracking-wide text-foreground uppercase">
                                   <LuCheck className="size-3" />
                                   {t("integrations.mcp.connected")}
                                 </span>
diff --git a/src/components/location-proxy-dialog.tsx b/src/components/location-proxy-dialog.tsx
index e739208..c67840d 100644
--- a/src/components/location-proxy-dialog.tsx
+++ b/src/components/location-proxy-dialog.tsx
@@ -233,7 +233,7 @@ export function LocationProxyDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4 overflow-y-auto min-h-0 max-h-[calc(100vh-16rem)] pr-1">
+        <div className="max-h-[calc(100vh-16rem)] min-h-0 space-y-4 overflow-y-auto pr-1">
           {/* Country - always visible */}
           <div className="space-y-2">
             <Label className="flex items-center gap-2">
diff --git a/src/components/multiple-selector.tsx b/src/components/multiple-selector.tsx
index 61b135a..ab997dd 100644
--- a/src/components/multiple-selector.tsx
+++ b/src/components/multiple-selector.tsx
@@ -152,7 +152,7 @@ const CommandEmpty = forwardRef<
   return (
     <div
       ref={forwardedRef}
-      className={cn("py-6 text-sm text-center", className)}
+      className={cn("py-6 text-center text-sm", className)}
       cmdk-empty=""
       role="presentation"
       {...props}
@@ -428,8 +428,8 @@ const MultipleSelector = React.forwardRef<
                 <Badge
                   key={option.value}
                   className={cn(
-                    "data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground",
-                    "data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground",
+                    "data-disabled:bg-muted-foreground data-disabled:text-muted data-disabled:hover:bg-muted-foreground",
+                    "data-fixed:bg-muted-foreground data-fixed:text-muted data-fixed:hover:bg-muted-foreground",
                     badgeClassName,
                   )}
                   data-fixed={option.fixed}
@@ -439,7 +439,7 @@ const MultipleSelector = React.forwardRef<
                   <button
                     type="button"
                     className={cn(
-                      "cursor-pointer ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "ml-1 cursor-pointer rounded-full ring-offset-background outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       (disabled ?? option.fixed) && "hidden",
                     )}
                     onKeyDown={(e) => {
@@ -525,7 +525,7 @@ const MultipleSelector = React.forwardRef<
                 "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
                 {
                   "w-full": hidePlaceholderWhenSelected,
-                  "px-3 mt-1": selected.length === 0,
+                  "mt-1 px-3": selected.length === 0,
                   "ml-1": selected.length !== 0,
                 },
                 inputProps?.className,
@@ -537,7 +537,7 @@ const MultipleSelector = React.forwardRef<
           {open && hasAvailableOptions && (
             <CommandList
               className={cn(
-                "absolute z-10 w-full rounded-md border shadow-md outline-none bg-popover text-popover-foreground animate-in",
+                "absolute z-10 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
                 dropUp ? "bottom-full mb-1" : "top-full mt-1",
               )}
             >
@@ -554,7 +554,7 @@ const MultipleSelector = React.forwardRef<
                     <CommandGroup
                       key={key}
                       heading={key}
-                      className="overflow-auto max-h-48"
+                      className="max-h-48 overflow-auto"
                     >
                       {dropdowns.map((option) => {
                         return (
diff --git a/src/components/onboarding-card.tsx b/src/components/onboarding-card.tsx
index 7c25d35..c5dffdd 100644
--- a/src/components/onboarding-card.tsx
+++ b/src/components/onboarding-card.tsx
@@ -28,26 +28,26 @@ export function OnboardingCard({
   const requiresAction = step.selector === '[data-onborda="create-profile"]';
 
   return (
-    <div className="relative p-4 w-80 max-w-[90vw] rounded-lg border shadow-lg bg-popover text-popover-foreground">
-      <div className="flex gap-2 items-start justify-between">
-        <h3 className="text-sm font-semibold leading-tight">{step.title}</h3>
-        <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
+    <div className="relative w-80 max-w-[90vw] rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg">
+      <div className="flex items-start justify-between gap-2">
+        <h3 className="text-sm/tight font-semibold">{step.title}</h3>
+        <span className="shrink-0 text-[11px] text-muted-foreground tabular-nums">
           {currentStep + 1}/{totalSteps}
         </span>
       </div>
 
-      <div className="mt-2 text-xs leading-relaxed text-muted-foreground">
+      <div className="mt-2 text-xs/relaxed text-muted-foreground">
         {step.content}
       </div>
 
-      <div className="flex gap-2 items-center justify-between mt-4">
+      <div className="mt-4 flex items-center justify-between gap-2">
         {isLast ? (
           <span />
         ) : (
           <Button
             variant="ghost"
             size="sm"
-            className="text-xs h-7 px-2 text-muted-foreground hover:text-foreground"
+            className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
             onClick={() => {
               closeOnborda();
             }}
@@ -56,12 +56,12 @@ export function OnboardingCard({
           </Button>
         )}
 
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           {!isFirst && !isLast && (
             <Button
               variant="outline"
               size="sm"
-              className="text-xs h-7 px-2.5"
+              className="h-7 px-2.5 text-xs"
               onClick={() => {
                 prevStep();
               }}
@@ -72,7 +72,7 @@ export function OnboardingCard({
           {isLast ? (
             <Button
               size="sm"
-              className="text-xs h-7 px-3"
+              className="h-7 px-3 text-xs"
               onClick={() => {
                 closeOnborda();
                 window.dispatchEvent(new Event(ONBOARDING_TOUR_FINISHED_EVENT));
@@ -83,7 +83,7 @@ export function OnboardingCard({
           ) : requiresAction ? null : (
             <Button
               size="sm"
-              className="text-xs h-7 px-3"
+              className="h-7 px-3 text-xs"
               onClick={() => {
                 nextStep();
               }}
diff --git a/src/components/permission-dialog.tsx b/src/components/permission-dialog.tsx
index 22a74fe..0625202 100644
--- a/src/components/permission-dialog.tsx
+++ b/src/components/permission-dialog.tsx
@@ -206,7 +206,7 @@ export function PermissionDialog({
 
         <div className="space-y-4">
           {!isCurrentPermissionGranted && (
-            <div className="p-3 bg-warning/10 rounded-lg">
+            <div className="rounded-lg bg-warning/10 p-3">
               <p className="text-sm text-warning">
                 {permissionType === "microphone"
                   ? t("permissionDialog.notGrantedMicrophone")
diff --git a/src/components/profile-data-table.tsx b/src/components/profile-data-table.tsx
index 782ace5..eab2dab 100644
--- a/src/components/profile-data-table.tsx
+++ b/src/components/profile-data-table.tsx
@@ -365,10 +365,10 @@ function ExtCell({
         <button
           type="button"
           disabled={isSaving}
-          className="flex items-center gap-1.5 h-7 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded transition-colors duration-100 w-full text-left disabled:opacity-50"
+          className="flex h-7 w-full items-center gap-1.5 rounded px-1.5 text-left text-xs text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
         >
           <LuPuzzle className="size-3 shrink-0" />
-          <span className="truncate flex-1" title={label}>
+          <span className="flex-1 truncate" title={label}>
             {label}
           </span>
           <LuChevronDown className="size-3 shrink-0 text-muted-foreground" />
@@ -460,7 +460,7 @@ function DnsCell({
           type="button"
           data-onborda="dns-blocklist"
           disabled={isSaving}
-          className="flex items-center gap-1.5 h-7 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded transition-colors duration-100 w-full text-left disabled:opacity-50"
+          className="flex h-7 w-full items-center gap-1.5 rounded px-1.5 text-left text-xs text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
           title={
             level
               ? meta.t("profiles.table.dnsLevel", { level })
@@ -681,9 +681,9 @@ const TagsCell = React.memo<{
           type="button"
           ref={containerRef as unknown as React.RefObject<HTMLButtonElement>}
           className={cn(
-            "flex overflow-hidden gap-1 items-center px-2 py-1 h-6 w-full bg-transparent rounded border-none cursor-pointer",
+            "flex h-6 w-full cursor-pointer items-center gap-1 overflow-hidden rounded border-none bg-transparent px-2 py-1",
             isDisabled
-              ? "opacity-60 cursor-not-allowed"
+              ? "cursor-not-allowed opacity-60"
               : "cursor-pointer hover:bg-accent/50",
           )}
           onClick={() => {
@@ -709,7 +709,7 @@ const TagsCell = React.memo<{
       );
 
       return (
-        <div className="w-full h-6 cursor-pointer">
+        <div className="h-6 w-full cursor-pointer">
           <Tooltip>
             <TooltipTrigger asChild>{ButtonContent}</TooltipTrigger>
             {hiddenCount > 0 && (
@@ -735,13 +735,13 @@ const TagsCell = React.memo<{
     return (
       <div
         className={cn(
-          "w-full h-6 relative",
-          isDisabled && "opacity-60 pointer-events-none",
+          "relative h-6 w-full",
+          isDisabled && "pointer-events-none opacity-60",
         )}
       >
         <div
           ref={editorRef}
-          className="absolute top-0 left-0 z-50 w-40 min-h-6 bg-popover rounded-md shadow-md"
+          className="absolute top-0 left-0 z-50 min-h-6 w-40 rounded-md bg-popover shadow-md"
         >
           <MultipleSelector
             value={valueOptions}
@@ -755,11 +755,11 @@ const TagsCell = React.memo<{
                 : ""
             }
             className={cn(
-              "bg-transparent border-0! focus-within:ring-0!",
+              "border-0! bg-transparent focus-within:ring-0!",
               "[&_div:first-child]:border-0! [&_div:first-child]:ring-0! [&_div:first-child]:focus-within:ring-0!",
               "[&_div:first-child]:min-h-6! [&_div:first-child]:px-2! [&_div:first-child]:py-1!",
-              "[&_div:first-child>div]:items-center [&_div:first-child>div]:h-6!",
-              "[&_input]:ml-0! [&_input]:mt-0! [&_input]:px-0!",
+              "[&_div:first-child>div]:h-6! [&_div:first-child>div]:items-center",
+              "[&_input]:mt-0! [&_input]:ml-0! [&_input]:px-0!",
               !isFocused && "[&_div:first-child>div]:justify-center",
             )}
             badgeClassName="shrink-0"
@@ -859,7 +859,7 @@ const OverflowTooltipText = React.memo<{
       <TooltipTrigger asChild>
         <span
           ref={textRef}
-          className={cn("block min-w-0 max-w-full truncate", className)}
+          className={cn("block max-w-full min-w-0 truncate", className)}
         >
           {text}
         </span>
@@ -894,16 +894,16 @@ const ProxyCellTrigger = React.memo<{
         <PopoverTrigger asChild>
           <span
             className={cn(
-              "flex gap-2 items-center px-2 py-1 rounded min-w-0 max-w-full",
+              "flex max-w-full min-w-0 items-center gap-2 rounded px-2 py-1",
               isDisabled
-                ? "opacity-60 cursor-not-allowed pointer-events-none"
+                ? "pointer-events-none cursor-not-allowed opacity-60"
                 : "cursor-pointer hover:bg-accent/50",
             )}
           >
             {vpnBadge && (
               <Badge
                 variant="outline"
-                className="text-[10px] px-1 py-0 leading-tight shrink-0"
+                className="shrink-0 px-1 py-0 text-[10px] leading-tight"
               >
                 {vpnBadge}
               </Badge>
@@ -911,7 +911,7 @@ const ProxyCellTrigger = React.memo<{
             <span
               ref={textRef}
               className={cn(
-                "text-sm min-w-0 truncate",
+                "min-w-0 truncate text-sm",
                 !hasAssignment && "text-muted-foreground",
               )}
             >
@@ -1037,15 +1037,15 @@ const NoteCell = React.memo<{
 
     if (openNoteEditorFor !== profile.id) {
       return (
-        <div className="w-full min-h-6">
+        <div className="min-h-6 w-full">
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 type="button"
                 className={cn(
-                  "flex items-center px-2 py-1 min-h-6 w-full min-w-0 bg-transparent rounded border-none text-left",
+                  "flex min-h-6 w-full min-w-0 items-center rounded border-none bg-transparent px-2 py-1 text-left",
                   isDisabled
-                    ? "opacity-60 cursor-not-allowed"
+                    ? "cursor-not-allowed opacity-60"
                     : "cursor-pointer hover:bg-accent/50",
                 )}
                 onClick={() => {
@@ -1057,7 +1057,7 @@ const NoteCell = React.memo<{
               >
                 <span
                   className={cn(
-                    "text-sm truncate block w-full",
+                    "block w-full truncate text-sm",
                     !effectiveNote && "text-muted-foreground",
                   )}
                 >
@@ -1067,7 +1067,7 @@ const NoteCell = React.memo<{
             </TooltipTrigger>
             {showTooltip && (
               <TooltipContent className="max-w-[320px]">
-                <p className="whitespace-pre-wrap wrap-break-word">
+                <p className="wrap-break-word whitespace-pre-wrap">
                   {effectiveNote ?? t("profiles.note.empty")}
                 </p>
               </TooltipContent>
@@ -1080,13 +1080,13 @@ const NoteCell = React.memo<{
     return (
       <div
         className={cn(
-          "w-full relative",
-          isDisabled && "opacity-60 pointer-events-none",
+          "relative w-full",
+          isDisabled && "pointer-events-none opacity-60",
         )}
       >
         <div
           ref={editorRef}
-          className="absolute -top-[15px] -left-px z-50 w-60 min-h-6 bg-popover rounded-md shadow-md border"
+          className="absolute top-[-15px] -left-px z-50 min-h-6 w-60 rounded-md border bg-popover shadow-md"
         >
           <textarea
             ref={textareaRef}
@@ -1106,7 +1106,7 @@ const NoteCell = React.memo<{
               setOpenNoteEditorFor(null);
             }}
             placeholder={t("profiles.note.placeholder")}
-            className="w-full min-h-6 max-h-[200px] px-2 py-1 text-sm bg-transparent border-0 resize-none focus:outline-none focus:ring-0"
+            className="max-h-[200px] min-h-6 w-full resize-none border-0 bg-transparent px-2 py-1 text-sm focus:ring-0 focus:outline-none"
             style={{
               overflow: "auto",
             }}
@@ -2103,18 +2103,18 @@ export function ProfilesDataTable({
             return (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex justify-center items-center size-4">
+                  <span className="flex size-4 items-center justify-center">
                     <button
                       type="button"
-                      className="flex justify-center items-center p-0 border-none cursor-pointer"
+                      className="flex cursor-pointer items-center justify-center border-none p-0"
                       onClick={() => {
                         meta.handleIconClick(profile.id);
                       }}
                       aria-label={t("common.aria.selectProfile")}
                     >
-                      <span className="size-4 group">
+                      <span className="group size-4">
                         <OsIcon className="size-4 text-muted-foreground group-hover:hidden" />
-                        <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
+                        <span className="peer pointer-events-none hidden size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow duration-150 outline-none group-hover:block dark:bg-input/30 dark:data-[state=checked]:bg-primary" />
                       </span>
                     </button>
                   </span>
@@ -2142,7 +2142,7 @@ export function ProfilesDataTable({
                 sideOffset={4}
                 horizontalOffset={8}
               >
-                <span className="flex justify-center items-center size-4">
+                <span className="flex size-4 items-center justify-center">
                   <Checkbox
                     checked={isSelected}
                     onCheckedChange={(value) => {
@@ -2168,7 +2168,7 @@ export function ProfilesDataTable({
             return (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex justify-center items-center size-4 cursor-not-allowed">
+                  <span className="flex size-4 cursor-not-allowed items-center justify-center">
                     {IconComponent && (
                       <IconComponent className="size-4 opacity-50" />
                     )}
@@ -2190,7 +2190,7 @@ export function ProfilesDataTable({
                 sideOffset={4}
                 horizontalOffset={8}
               >
-                <span className="flex justify-center items-center size-4">
+                <span className="flex size-4 items-center justify-center">
                   <Checkbox
                     checked={isSelected}
                     onCheckedChange={(value) => {
@@ -2210,20 +2210,20 @@ export function ProfilesDataTable({
               sideOffset={4}
               horizontalOffset={8}
             >
-              <span className="flex relative justify-center items-center size-4">
+              <span className="relative flex size-4 items-center justify-center">
                 <button
                   type="button"
-                  className="flex justify-center items-center p-0 border-none cursor-pointer"
+                  className="flex cursor-pointer items-center justify-center border-none p-0"
                   onClick={() => {
                     meta.handleIconClick(profile.id);
                   }}
                   aria-label={t("common.aria.selectProfile")}
                 >
-                  <span className="size-4 group">
+                  <span className="group size-4">
                     {IconComponent && (
                       <IconComponent className="size-4 group-hover:hidden" />
                     )}
-                    <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
+                    <span className="peer pointer-events-none hidden size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow duration-150 outline-none group-hover:block dark:bg-input/30 dark:data-[state=checked]:bg-primary" />
                   </span>
                 </button>
               </span>
@@ -2332,7 +2332,7 @@ export function ProfilesDataTable({
             : "default";
 
           return (
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               {isDesynced && (
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -2360,8 +2360,8 @@ export function ProfilesDataTable({
                           : meta.t("profiles.actions.launch")
                       }
                       className={cn(
-                        "size-7 p-0 grid place-items-center",
-                        !canLaunch && "opacity-50 cursor-not-allowed",
+                        "grid size-7 place-items-center p-0",
+                        !canLaunch && "cursor-not-allowed opacity-50",
                         canLaunch && "cursor-pointer",
                         isFollower && "border-accent",
                         isRunning &&
@@ -2374,7 +2374,7 @@ export function ProfilesDataTable({
                       }
                     >
                       {isLaunching || isStopping ? (
-                        <div className="size-3 rounded-full border border-current animate-spin border-t-transparent" />
+                        <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
                       ) : isRunning ? (
                         <LuSquare className="size-3.5 fill-current" />
                       ) : (
@@ -2423,7 +2423,7 @@ export function ProfilesDataTable({
               <DropdownMenuTrigger asChild>
                 <Button
                   variant="ghost"
-                  className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+                  className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
                 >
                   {meta.t("common.labels.name")}
                   {isActive("name", false) ? (
@@ -2491,7 +2491,7 @@ export function ProfilesDataTable({
             return (
               <div
                 ref={renameContainerRef}
-                className="overflow-visible relative"
+                className="relative overflow-visible"
               >
                 <Input
                   autoFocus
@@ -2523,7 +2523,7 @@ export function ProfilesDataTable({
                       meta.setRenameError(null);
                     }
                   }}
-                  className="w-full min-w-0 max-w-full h-6 px-2 py-1 text-sm font-medium leading-none border-0 shadow-none focus-visible:ring-0"
+                  className="h-6 w-full max-w-full min-w-0 border-0 px-2 py-1 text-sm leading-none font-medium shadow-none focus-visible:ring-0"
                 />
               </div>
             );
@@ -2532,7 +2532,7 @@ export function ProfilesDataTable({
           const display = (
             <OverflowTooltipText
               text={name}
-              className="font-medium text-left leading-none"
+              className="text-left leading-none font-medium"
             />
           );
 
@@ -2548,13 +2548,13 @@ export function ProfilesDataTable({
           const isLocked = meta.isProfileLockedByAnother(profile.id);
 
           return (
-            <div className="flex items-center gap-1.5 min-w-0 max-w-full overflow-hidden">
+            <div className="flex max-w-full min-w-0 items-center gap-1.5 overflow-hidden">
               <button
                 type="button"
                 className={cn(
-                  "px-2 py-1 mr-auto text-left bg-transparent rounded border-none h-6 min-w-0 max-w-full overflow-hidden",
+                  "mr-auto h-6 max-w-full min-w-0 overflow-hidden rounded border-none bg-transparent px-2 py-1 text-left",
                   isDisabled
-                    ? "opacity-60 cursor-not-allowed"
+                    ? "cursor-not-allowed opacity-60"
                     : "cursor-pointer hover:bg-accent/50",
                 )}
                 onClick={() => {
@@ -2715,7 +2715,7 @@ export function ProfilesDataTable({
               (snapshot?.current_bytes_received ?? 0);
 
             return (
-              <div className="overflow-hidden min-w-0">
+              <div className="min-w-0 overflow-hidden">
                 <BandwidthMiniChart
                   key={`${profile.id}-${snapshot?.last_update ?? 0}-${bandwidthData.length}`}
                   data={bandwidthData}
@@ -2727,7 +2727,7 @@ export function ProfilesDataTable({
           }
 
           return (
-            <div className="flex overflow-hidden gap-2 items-center min-w-0">
+            <div className="flex min-w-0 items-center gap-2 overflow-hidden">
               <Popover
                 open={isSelectorOpen}
                 onOpenChange={(open) => {
@@ -2833,7 +2833,7 @@ export function ProfilesDataTable({
                                 />
                                 <Badge
                                   variant="outline"
-                                  className="text-[10px] px-1 py-0 leading-tight mr-1"
+                                  className="mr-1 px-1 py-0 text-[10px] leading-tight"
                                 >
                                   WG
                                 </Badge>
@@ -2956,7 +2956,7 @@ export function ProfilesDataTable({
           return (
             <Tooltip>
               <TooltipTrigger asChild>
-                <span className="flex justify-center items-center h-9 w-full">
+                <span className="flex h-9 w-full items-center justify-center">
                   {dot.encrypted ? (
                     <LuLock
                       className={`size-3 ${dot.color.replace("bg-", "text-")}${dot.animate ? " animate-pulse" : ""}`}
@@ -2981,10 +2981,10 @@ export function ProfilesDataTable({
           const profile = row.original;
 
           return (
-            <div className="flex justify-end items-center h-9 w-full">
+            <div className="flex h-9 w-full items-center justify-end">
               <Button
                 variant="ghost"
-                className="p-0 size-7"
+                className="size-7 p-0"
                 disabled={!meta.isClient}
                 onClick={() => {
                   setProfileForInfoDialog(profile);
@@ -3108,11 +3108,11 @@ export function ProfilesDataTable({
 
   return (
     <>
-      <div className="relative flex-1 min-h-0 flex flex-col">
+      <div className="relative flex min-h-0 flex-1 flex-col">
         <div
           ref={scrollParentRef}
           className={cn(
-            "overflow-auto relative flex-1 min-h-0 scroll-fade",
+            "scroll-fade relative min-h-0 flex-1 overflow-auto",
             // Clearance for the floating selection action bar (bottom-6 +
             // ~46px tall) so the last rows can scroll out from behind it.
             // Same predicate DataTableActionBar uses for its visibility.
@@ -3128,11 +3128,11 @@ export function ProfilesDataTable({
           }
         >
           <Table className="table-fixed" containerClassName="overflow-visible">
-            <TableHeader className="overflow-visible sticky top-0 z-10 bg-background [&_tr]:border-0">
+            <TableHeader className="sticky top-0 z-10 overflow-visible bg-background [&_tr]:border-0">
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow
                   key={headerGroup.id}
-                  className="overflow-visible !border-0"
+                  className="overflow-visible border-0!"
                 >
                   {headerGroup.headers.map((header) => {
                     return (
@@ -3196,7 +3196,7 @@ export function ProfilesDataTable({
                         title={crossOsTitle}
                         style={{ height: `${ROW_HEIGHT}px` }}
                         className={cn(
-                          "overflow-visible hover:bg-accent/50 !border-0",
+                          "overflow-visible border-0! hover:bg-accent/50",
                           rowIsCrossOs && "opacity-60",
                         )}
                       >
@@ -3320,7 +3320,7 @@ export function ProfilesDataTable({
               <LuPlay className="fill-current" />
             </DataTableActionBarAction>
             {!bulkActionsUnlocked && (
-              <ProBadge className="absolute -top-2 -right-2 pointer-events-none" />
+              <ProBadge className="pointer-events-none absolute -top-2 -right-2" />
             )}
           </span>
         )}
@@ -3339,7 +3339,7 @@ export function ProfilesDataTable({
               <LuSquare className="fill-current" />
             </DataTableActionBarAction>
             {!bulkActionsUnlocked && (
-              <ProBadge className="absolute -top-2 -right-2 pointer-events-none" />
+              <ProBadge className="pointer-events-none absolute -top-2 -right-2" />
             )}
           </span>
         )}
diff --git a/src/components/profile-info-dialog.tsx b/src/components/profile-info-dialog.tsx
index d756f19..03831a9 100644
--- a/src/components/profile-info-dialog.tsx
+++ b/src/components/profile-info-dialog.tsx
@@ -116,9 +116,9 @@ function _OSIcon({ os }: { os: string }) {
 
 function InfoCard({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-md bg-muted/50 border px-3 py-2.5">
+    <div className="rounded-md border bg-muted/50 px-3 py-2.5">
       <p className="text-xs text-muted-foreground">{label}</p>
-      <p className="text-sm mt-0.5 truncate">{value}</p>
+      <p className="mt-0.5 truncate text-sm">{value}</p>
     </div>
   );
 }
@@ -503,7 +503,7 @@ export function ProfileInfoDialog({
     >
       <DialogContent
         hideClose
-        className="max-w-[min(60rem,calc(100%-4rem))] h-[min(clamp(30rem,80vh,48rem),calc(100vh-3rem))] flex flex-col p-0 gap-0 overflow-hidden"
+        className="flex h-[min(clamp(30rem,80vh,48rem),calc(100vh-3rem))] max-w-[min(60rem,calc(100%-4rem))] flex-col gap-0 overflow-hidden p-0"
       >
         {/* The dialog renders its own custom header, so the accessible title is
             visually hidden but present for screen readers (Radix requires it). */}
@@ -720,20 +720,20 @@ function ProfileInfoLayout({
   return (
     <>
       {/* Top bar */}
-      <div className="flex items-center gap-2 h-11 px-3 border-b border-border shrink-0">
-        <LuUsers className="size-3.5 text-muted-foreground shrink-0" />
-        <div className="flex items-center gap-1.5 text-xs min-w-0 flex-1">
+      <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
+        <LuUsers className="size-3.5 shrink-0 text-muted-foreground" />
+        <div className="flex min-w-0 flex-1 items-center gap-1.5 text-xs">
           <span className="font-semibold">
             {t("profileInfo.breadcrumbRoot")}
           </span>
           <span className="text-muted-foreground">/</span>
-          <span className="text-muted-foreground truncate">{profile.name}</span>
+          <span className="truncate text-muted-foreground">{profile.name}</span>
         </div>
         {onCloneProfile && (
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 px-2 text-xs gap-1.5"
+            className="h-7 gap-1.5 px-2 text-xs"
             disabled={isDisabled}
             onClick={() => onCloneProfile(profile)}
           >
@@ -745,16 +745,16 @@ function ProfileInfoLayout({
           type="button"
           aria-label={t("common.buttons.close")}
           onClick={onClose}
-          className="grid place-items-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors duration-100"
+          className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors duration-100 hover:bg-accent/50 hover:text-foreground"
         >
           <LuX className="size-3.5" />
         </button>
       </div>
 
       {/* Body */}
-      <div className="flex flex-1 min-h-0">
+      <div className="flex min-h-0 flex-1">
         {/* Sidebar */}
-        <nav className="w-44 shrink-0 border-r border-border p-2 flex flex-col gap-0.5 overflow-y-auto">
+        <nav className="flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2">
           {sidebarItems
             .filter((it) => !it.hidden)
             .map((it) => {
@@ -765,16 +765,16 @@ function ProfileInfoLayout({
                   type="button"
                   onClick={() => setSection(it.id)}
                   className={cn(
-                    "flex items-center gap-2 h-7 px-2 rounded-md text-xs transition-colors duration-100 text-left",
+                    "flex h-7 items-center gap-2 rounded-md px-2 text-left text-xs transition-colors duration-100",
                     active
                       ? "bg-accent text-accent-foreground"
-                      : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                   )}
                 >
                   <span className="shrink-0">{it.icon}</span>
                   <span className="flex-1 truncate">{it.label}</span>
                   {it.badge && (
-                    <span className="text-[9px] uppercase text-muted-foreground tracking-wide truncate max-w-[60px]">
+                    <span className="max-w-[60px] truncate text-[9px] tracking-wide text-muted-foreground uppercase">
                       {it.badge}
                     </span>
                   )}
@@ -788,7 +788,7 @@ function ProfileInfoLayout({
                 type="button"
                 onClick={deleteAction.onClick}
                 disabled={deleteAction.disabled}
-                className="flex items-center gap-2 h-7 px-2 rounded-md text-xs transition-colors duration-100 text-destructive hover:bg-destructive/10 disabled:opacity-50 disabled:pointer-events-none"
+                className="flex h-7 items-center gap-2 rounded-md px-2 text-xs text-destructive transition-colors duration-100 hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50"
               >
                 <LuTrash2 className="size-3.5 shrink-0" />
                 <span className="flex-1 text-left">
@@ -800,21 +800,21 @@ function ProfileInfoLayout({
         </nav>
 
         {/* Main */}
-        <div className="flex-1 min-w-0 overflow-y-auto scroll-fade p-4">
+        <div className="scroll-fade min-w-0 flex-1 overflow-y-auto p-4">
           {section === "overview" && (
             <div className="flex flex-col gap-3">
               {/* Hero */}
               <div className="flex items-center gap-3">
-                <div className="rounded-lg bg-muted p-2.5 shrink-0">
+                <div className="shrink-0 rounded-lg bg-muted p-2.5">
                   <ProfileIcon className="size-7 text-foreground" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-1.5">
-                    <h3 className="text-base font-semibold truncate">
+                    <h3 className="truncate text-base font-semibold">
                       {profile.name}
                     </h3>
                   </div>
-                  <div className="flex flex-wrap items-center gap-1.5 mt-1 text-[11px]">
+                  <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
                     <span className="font-mono text-muted-foreground">
                       {profile.version}
                     </span>
@@ -823,17 +823,17 @@ function ProfileInfoLayout({
               </div>
 
               {/* ID */}
-              <div className="flex items-center gap-2 rounded-md bg-muted/40 px-3 py-2 border border-border">
-                <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0">
+              <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2">
+                <span className="shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
                   ID
                 </span>
-                <span className="font-mono text-xs truncate flex-1">
+                <span className="flex-1 truncate font-mono text-xs">
                   {profile.id}
                 </span>
                 <button
                   type="button"
                   onClick={() => void handleCopyId()}
-                  className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
+                  className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
                   aria-label={t("common.buttons.copy")}
                 >
                   {copied ? (
@@ -874,7 +874,7 @@ function ProfileInfoLayout({
 
               {/* Activity */}
               <div className="mt-1 flex flex-col gap-1.5">
-                <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                <span className="text-[10px] tracking-wide text-muted-foreground uppercase">
                   {t("profileInfo.sections.activity")}
                 </span>
                 <div className="grid grid-cols-2 gap-2">
@@ -904,11 +904,11 @@ function ProfileInfoLayout({
               </div>
 
               {profile.created_by_email && (
-                <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+                  <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
                     {t("sync.team.title")}
                   </p>
-                  <p className="text-sm mt-0.5">
+                  <p className="mt-0.5 text-sm">
                     {t("sync.team.createdBy", {
                       email: profile.created_by_email,
                     })}
@@ -1014,7 +1014,7 @@ function _SectionPlaceholder({
       </div>
       <p className="text-xs text-muted-foreground">{description}</p>
       {hint && (
-        <div className="rounded-md bg-muted/40 border border-border px-3 py-2 text-xs">
+        <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-xs">
           {hint}
         </div>
       )}
@@ -1022,7 +1022,7 @@ function _SectionPlaceholder({
         size="sm"
         onClick={onAction}
         disabled={disabled}
-        className="self-start h-7 text-xs"
+        className="h-7 self-start text-xs"
       >
         {actionLabel}
       </Button>
@@ -1049,11 +1049,11 @@ function _SectionAction({
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        "flex items-center gap-2 h-9 px-3 rounded-md text-xs transition-colors text-left",
+        "flex h-9 items-center gap-2 rounded-md px-3 text-left text-xs transition-colors",
         destructive
           ? "text-destructive hover:bg-destructive/10"
           : "hover:bg-accent",
-        "disabled:opacity-50 disabled:pointer-events-none",
+        "disabled:pointer-events-none disabled:opacity-50",
       )}
     >
       {icon}
@@ -1121,7 +1121,7 @@ function LaunchHookEditor({
           setValue(e.target.value);
         }}
         placeholder={t("profiles.launchHook.placeholder")}
-        className="text-xs font-mono"
+        className="font-mono text-xs"
       />
       {showInvalidHint && (
         <p className="text-xs text-warning">
@@ -1199,7 +1199,7 @@ function SyncSectionInline({
         {t("profileInfo.sectionDesc.sync")}
       </p>
       <div className="flex items-center gap-2">
-        <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0">
+        <span className="shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
           {t("profileInfo.fields.syncMode")}
         </span>
         <Select
@@ -1209,7 +1209,7 @@ function SyncSectionInline({
             void onChangeMode(v);
           }}
         >
-          <SelectTrigger className="h-7 text-xs flex-1">
+          <SelectTrigger className="h-7 flex-1 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -1222,15 +1222,15 @@ function SyncSectionInline({
         </Select>
       </div>
       {syncStatus && (
-        <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-          <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+        <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+          <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
             {t("profileInfo.fields.syncStatus")}
           </p>
-          <p className="text-sm mt-0.5">
+          <p className="mt-0.5 text-sm">
             {t(`profileInfo.syncStatusValue.${syncStatus.status}`)}
           </p>
           {syncStatus.error && (
-            <p className="text-xs text-destructive mt-1">{syncStatus.error}</p>
+            <p className="mt-1 text-xs text-destructive">{syncStatus.error}</p>
           )}
         </div>
       )}
@@ -1317,7 +1317,7 @@ function NetworkSectionInline({
       </p>
 
       <div className="flex items-center gap-2">
-        <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-12">
+        <span className="w-12 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
           {t("profileInfo.fields.proxy")}
         </span>
         <Select
@@ -1327,7 +1327,7 @@ function NetworkSectionInline({
             void onProxyChange(v);
           }}
         >
-          <SelectTrigger className="h-7 text-xs flex-1">
+          <SelectTrigger className="h-7 flex-1 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -1344,7 +1344,7 @@ function NetworkSectionInline({
       </div>
 
       <div className="flex items-center gap-2">
-        <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-12">
+        <span className="w-12 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
           {t("profileInfo.fields.vpn")}
         </span>
         <Select
@@ -1354,7 +1354,7 @@ function NetworkSectionInline({
             void onVpnChange(v);
           }}
         >
-          <SelectTrigger className="h-7 text-xs flex-1">
+          <SelectTrigger className="h-7 flex-1 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -1449,7 +1449,7 @@ function ExtensionsSectionInline({
         {t("profileInfo.sectionDesc.extensions")}
       </p>
       <div className="flex items-center gap-2">
-        <span className="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0 w-16">
+        <span className="w-16 shrink-0 text-[10px] tracking-wide text-muted-foreground uppercase">
           {t("profileInfo.fields.extensionGroup")}
         </span>
         <Select
@@ -1459,7 +1459,7 @@ function ExtensionsSectionInline({
             void onChange(v);
           }}
         >
-          <SelectTrigger className="h-7 text-xs flex-1">
+          <SelectTrigger className="h-7 flex-1 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -1569,7 +1569,7 @@ function CookiesSectionInline({
   const domains = stats?.domains ?? [];
 
   return (
-    <div className="flex flex-col gap-3 min-h-0 flex-1">
+    <div className="flex min-h-0 flex-1 flex-col gap-3">
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2 text-sm font-semibold">
           <LuCookie className="size-4" />
@@ -1641,18 +1641,18 @@ function CookiesSectionInline({
         {t("profileInfo.sectionDesc.cookies")}
       </p>
       {isRunning ? (
-        <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
+        <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
           <p className="text-xs text-muted-foreground">
             {t("profileInfo.cookies.runningNotice")}
           </p>
         </div>
       ) : (
         <>
-          <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-            <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+          <div className="rounded-md border border-border bg-muted/40 px-3 py-2">
+            <p className="text-[10px] tracking-wide text-muted-foreground uppercase">
               {t("profileInfo.fields.cookieCount")}
             </p>
-            <p className="text-sm mt-0.5">
+            <p className="mt-0.5 text-sm">
               {isLoading
                 ? t("profileInfo.values.loading")
                 : stats
@@ -1661,13 +1661,13 @@ function CookiesSectionInline({
             </p>
           </div>
           {domains.length > 0 && (
-            <div className="rounded-md bg-muted/40 border border-border flex flex-col min-h-0 flex-1 overflow-hidden">
-              <p className="text-[10px] uppercase tracking-wide text-muted-foreground px-3 py-2 border-b border-border shrink-0">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-muted/40">
+              <p className="shrink-0 border-b border-border px-3 py-2 text-[10px] tracking-wide text-muted-foreground uppercase">
                 {t("profileInfo.cookies.domainsHeader", {
                   count: domains.length,
                 })}
               </p>
-              <ul className="text-xs px-3 py-2 overflow-y-auto flex-1 space-y-1">
+              <ul className="flex-1 space-y-1 overflow-y-auto px-3 py-2 text-xs">
                 {domains.map((d) => (
                   <li
                     key={d.domain}
@@ -1842,7 +1842,7 @@ function FingerprintSectionInline({
       {error && <p className="text-xs text-destructive">{error}</p>}
       {success && !error && <p className="text-xs text-success">{success}</p>}
 
-      <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border">
+      <div className="mt-3 flex items-center gap-2 border-t border-border pt-3">
         <Button
           size="sm"
           className="h-7 text-xs"
@@ -2013,8 +2013,8 @@ function SecuritySectionInline({
               setIsVerifyOpen(true);
             }}
             className={cn(
-              "flex-1 h-7 px-2 text-xs rounded-md border transition-colors",
-              "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
+              "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
             )}
           >
             {t("profilePassword.modes.validate")}
@@ -2026,10 +2026,10 @@ function SecuritySectionInline({
               reset();
             }}
             className={cn(
-              "flex-1 h-7 px-2 text-xs rounded-md border transition-colors",
+              "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
               mode === "change"
-                ? "bg-accent text-accent-foreground border-transparent"
-                : "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                ? "border-transparent bg-accent text-accent-foreground"
+                : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
             )}
           >
             {t("profilePassword.modes.change")}
@@ -2041,10 +2041,10 @@ function SecuritySectionInline({
               reset();
             }}
             className={cn(
-              "flex-1 h-7 px-2 text-xs rounded-md border transition-colors",
+              "h-7 flex-1 rounded-md border px-2 text-xs transition-colors",
               mode === "remove"
-                ? "bg-destructive/10 text-destructive border-transparent"
-                : "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                ? "border-transparent bg-destructive/10 text-destructive"
+                : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
             )}
           >
             {t("profilePassword.modes.remove")}
@@ -2106,7 +2106,7 @@ function SecuritySectionInline({
       <Button
         size="sm"
         variant={mode === "remove" ? "destructive" : "default"}
-        className="self-start h-7 text-xs"
+        className="h-7 self-start text-xs"
         disabled={isRunning || isSubmitting}
         onClick={() => {
           void onSubmit();
@@ -2397,11 +2397,11 @@ export function ProfileBypassRulesDialog({
         if (!open) onClose();
       }}
     >
-      <DialogContent className="sm:max-w-lg max-h-[80vh] flex flex-col">
+      <DialogContent className="flex max-h-[80vh] flex-col sm:max-w-lg">
         <DialogHeader className="shrink-0">
           <DialogTitle>{t("profileInfo.network.bypassRulesTitle")}</DialogTitle>
         </DialogHeader>
-        <ScrollArea className="flex-1 min-h-0">
+        <ScrollArea className="min-h-0 flex-1">
           <div className="flex flex-col gap-3 py-2">
             <p className="text-sm text-muted-foreground">
               {t("profileInfo.network.bypassRulesDescription")}
@@ -2423,12 +2423,12 @@ export function ProfileBypassRulesDialog({
                 onClick={handleAddRule}
                 disabled={!newRule.trim()}
               >
-                <LuPlus className="size-4 mr-1" />
+                <LuPlus className="mr-1 size-4" />
                 {t("profileInfo.network.addRule")}
               </Button>
             </div>
             {bypassRules.length === 0 ? (
-              <p className="text-sm text-muted-foreground py-2">
+              <p className="py-2 text-sm text-muted-foreground">
                 {t("profileInfo.network.noRules")}
               </p>
             ) : (
@@ -2436,15 +2436,15 @@ export function ProfileBypassRulesDialog({
                 {bypassRules.map((rule) => (
                   <div
                     key={rule}
-                    className="flex items-center justify-between gap-2 px-3 py-1.5 rounded-md bg-muted text-sm"
+                    className="flex items-center justify-between gap-2 rounded-md bg-muted px-3 py-1.5 text-sm"
                   >
-                    <span className="font-mono text-xs truncate">{rule}</span>
+                    <span className="truncate font-mono text-xs">{rule}</span>
                     <button
                       type="button"
                       onClick={() => {
                         handleRemoveRule(rule);
                       }}
-                      className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
+                      className="shrink-0 text-muted-foreground transition-colors hover:text-destructive"
                     >
                       <LuX className="size-3.5" />
                     </button>
diff --git a/src/components/profile-selector-dialog.tsx b/src/components/profile-selector-dialog.tsx
index 9f5c0ca..b197e81 100644
--- a/src/components/profile-selector-dialog.tsx
+++ b/src/components/profile-selector-dialog.tsx
@@ -171,7 +171,7 @@ export function ProfileSelectorDialog({
         <div className="grid gap-4 py-4">
           {url && (
             <div className="space-y-2">
-              <div className="flex justify-between items-center">
+              <div className="flex items-center justify-between">
                 <Label className="text-sm font-medium">
                   {t("profileSelector.openingUrl")}
                 </Label>
@@ -180,7 +180,7 @@ export function ProfileSelectorDialog({
                   successMessage={t("profileSelector.urlCopied")}
                 />
               </div>
-              <div className="p-2 text-sm break-all rounded bg-muted max-h-24 overflow-y-auto">
+              <div className="max-h-24 overflow-y-auto rounded bg-muted p-2 text-sm break-all">
                 {url}
               </div>
             </div>
@@ -230,8 +230,8 @@ export function ProfileSelectorDialog({
                                   !canUseForLinks ? "opacity-50" : ""
                                 }`}
                               >
-                                <div className="flex gap-3 items-center px-2 py-1 rounded-lg">
-                                  <div className="flex gap-2 items-center">
+                                <div className="flex items-center gap-3 rounded-lg px-2 py-1">
+                                  <div className="flex items-center gap-2">
                                     {(() => {
                                       const IconComponent = getBrowserIcon(
                                         profile.browser,
diff --git a/src/components/profile-sync-dialog.tsx b/src/components/profile-sync-dialog.tsx
index 56402c1..6b7b05a 100644
--- a/src/components/profile-sync-dialog.tsx
+++ b/src/components/profile-sync-dialog.tsx
@@ -172,7 +172,7 @@ export function ProfileSyncDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-md flex flex-col overflow-hidden">
+      <DialogContent className="flex max-w-md flex-col overflow-hidden">
         <DialogHeader className="shrink-0">
           <DialogTitle>{t("sync.mode.title")}</DialogTitle>
           <DialogDescription>
@@ -183,15 +183,15 @@ export function ProfileSyncDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="min-h-0 flex-1 overflow-y-auto">
           {isCheckingConfig ? (
             <div className="flex justify-center py-8">
-              <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+              <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
             </div>
           ) : (
             <div className="grid gap-4 py-4">
               {!hasConfig && (
-                <div className="p-3 text-sm rounded-md bg-muted">
+                <div className="rounded-md bg-muted p-3 text-sm">
                   <p className="mb-2">{t("sync.mode.notConfigured")}</p>
                   <Button
                     variant="outline"
@@ -267,14 +267,14 @@ export function ProfileSyncDialog({
                   {syncMode === "Encrypted" &&
                     !hasE2ePassword &&
                     userChangedMode && (
-                      <div className="p-3 text-sm rounded-md bg-destructive/10 text-destructive">
+                      <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
                         {t("sync.mode.noPasswordWarning")}
                       </div>
                     )}
 
                   <div className="space-y-2">
                     <Label>{t("sync.mode.lastSynced")}</Label>
-                    <div className="flex gap-2 items-center">
+                    <div className="flex items-center gap-2">
                       <Badge variant="outline">
                         {formatLastSync(profile.last_sync)}
                       </Badge>
diff --git a/src/components/proxy-assignment-dialog.tsx b/src/components/proxy-assignment-dialog.tsx
index 2b929ae..cec63c0 100644
--- a/src/components/proxy-assignment-dialog.tsx
+++ b/src/components/proxy-assignment-dialog.tsx
@@ -157,8 +157,8 @@ export function ProxyAssignmentDialog({
         <div className="space-y-4">
           <div className="space-y-2">
             <Label>{t("proxyAssignment.selectedProfilesLabel")}</Label>
-            <div className="p-3 bg-muted rounded-md max-h-[min(8rem,20vh)] overflow-y-auto">
-              <ul className="text-sm space-y-1">
+            <div className="max-h-[min(8rem,20vh)] overflow-y-auto rounded-md bg-muted p-3">
+              <ul className="space-y-1 text-sm">
                 {selectedProfiles.map((profileId) => {
                   const profile = profiles.find(
                     (p: BrowserProfile) => p.id === profileId,
@@ -206,7 +206,7 @@ export function ProxyAssignmentDialog({
               </PopoverTrigger>
               <PopoverContent
                 id={proxyListboxId}
-                className="w-[var(--radix-popover-trigger-width)] p-0"
+                className="w-(--radix-popover-trigger-width) p-0"
                 sideOffset={8}
               >
                 <Command>
@@ -283,7 +283,7 @@ export function ProxyAssignmentDialog({
                             />
                             <Badge
                               variant="outline"
-                              className="text-[10px] px-1 py-0 leading-tight mr-1"
+                              className="mr-1 px-1 py-0 text-[10px] leading-tight"
                             >
                               WG
                             </Badge>
@@ -299,7 +299,7 @@ export function ProxyAssignmentDialog({
           </div>
 
           {error && (
-            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/components/proxy-check-button.tsx b/src/components/proxy-check-button.tsx
index f82853f..ab4366f 100644
--- a/src/components/proxy-check-button.tsx
+++ b/src/components/proxy-check-button.tsx
@@ -123,14 +123,14 @@ export function ProxyCheckButton({
           disabled={isCurrentlyChecking || disabled}
         >
           {isCurrentlyChecking ? (
-            <div className="size-3 rounded-full border border-current animate-spin border-t-transparent" />
+            <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
           ) : result?.is_valid && result.country_code ? (
             <span className="relative inline-flex items-center justify-center">
               <FlagIcon countryCode={result.country_code} className="h-2.5" />
-              <FiCheck className="absolute bottom-[-6px] right-[-4px]" />
+              <FiCheck className="absolute right-[-4px] bottom-[-6px]" />
             </span>
           ) : result && !result.is_valid ? (
-            <span className="text-destructive text-sm">✕</span>
+            <span className="text-sm text-destructive">✕</span>
           ) : (
             <FiCheck className="size-3" />
           )}
diff --git a/src/components/proxy-export-dialog.tsx b/src/components/proxy-export-dialog.tsx
index cdda5a3..525e9b2 100644
--- a/src/components/proxy-export-dialog.tsx
+++ b/src/components/proxy-export-dialog.tsx
@@ -125,17 +125,17 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
 
           <div className="space-y-2">
             <Label>{t("proxies.exportDialog.preview")}</Label>
-            <ScrollArea className="h-[clamp(120px,30vh,400px)] border rounded-md bg-muted/30">
+            <ScrollArea className="h-[clamp(120px,30vh,400px)] rounded-md border bg-muted/30">
               {isLoading ? (
-                <div className="flex items-center justify-center h-full p-4 text-sm text-muted-foreground">
+                <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
                   {t("common.buttons.loading")}
                 </div>
               ) : exportContent ? (
-                <pre className="p-3 text-xs font-mono whitespace-pre-wrap break-all">
+                <pre className="p-3 font-mono text-xs break-all whitespace-pre-wrap">
                   {exportContent}
                 </pre>
               ) : (
-                <div className="flex items-center justify-center h-full p-4 text-sm text-muted-foreground">
+                <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
                   {t("proxies.exportDialog.noProxies")}
                 </div>
               )}
@@ -143,7 +143,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
           </div>
         </div>
 
-        <DialogFooter className="flex-col sm:flex-row gap-2">
+        <DialogFooter className="flex-col gap-2 sm:flex-row">
           <RippleButton variant="outline" onClick={handleClose}>
             {t("common.buttons.close")}
           </RippleButton>
@@ -151,7 +151,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
             variant="outline"
             onClick={() => void handleCopyToClipboard()}
             disabled={!exportContent || isLoading}
-            className="flex gap-2 items-center"
+            className="flex items-center gap-2"
           >
             {copied ? (
               <LuCheck className="size-4" />
@@ -165,7 +165,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
           <RippleButton
             onClick={handleDownload}
             disabled={!exportContent || isLoading}
-            className="flex gap-2 items-center"
+            className="flex items-center gap-2"
           >
             <LuDownload className="size-4" />
             {t("common.buttons.download")}
diff --git a/src/components/proxy-form-dialog.tsx b/src/components/proxy-form-dialog.tsx
index 678748e..2310b54 100644
--- a/src/components/proxy-form-dialog.tsx
+++ b/src/components/proxy-form-dialog.tsx
@@ -161,7 +161,7 @@ export function ProxyFormDialog({
           </DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-4 @container">
+        <div className="@container grid gap-4 py-4">
           <div className="grid gap-2">
             <Label htmlFor="proxy-name">{t("proxies.form.name")}</Label>
             <Input
@@ -231,7 +231,7 @@ export function ProxyFormDialog({
             </div>
           </div>
 
-          <div className="grid grid-cols-1 @sm:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 @sm:grid-cols-2">
             <div className="grid gap-2">
               <Label htmlFor="proxy-username">
                 {form.proxy_type === "ss"
diff --git a/src/components/proxy-import-dialog.tsx b/src/components/proxy-import-dialog.tsx
index 31f7599..2638350 100644
--- a/src/components/proxy-import-dialog.tsx
+++ b/src/components/proxy-import-dialog.tsx
@@ -315,8 +315,8 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
                 }
               }}
             >
-              <LuUpload className="size-10 text-muted-foreground mb-4" />
-              <p className="text-sm text-muted-foreground text-center">
+              <LuUpload className="mb-4 size-10 text-muted-foreground" />
+              <p className="text-center text-sm text-muted-foreground">
                 {t("proxies.importDialog.dropzonePrompt")}
                 <br />
                 <span className="text-xs">
@@ -335,7 +335,7 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
                 }}
               />
             </div>
-            <p className="text-xs text-muted-foreground text-center">
+            <p className="text-center text-xs text-muted-foreground">
               {t("proxies.importDialog.pasteHint", { modKey })}
             </p>
           </div>
@@ -369,19 +369,19 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
                   count: parsedProxies.length,
                 })}
                 {invalidProxies.length > 0 && (
-                  <span className="text-muted-foreground ml-2">
+                  <span className="ml-2 text-muted-foreground">
                     {t("proxies.importDialog.invalidCount", {
                       count: invalidProxies.length,
                     })}
                   </span>
                 )}
               </Label>
-              <ScrollArea className="h-[clamp(120px,30vh,400px)] border rounded-md">
-                <div className="p-2 space-y-1">
+              <ScrollArea className="h-[clamp(120px,30vh,400px)] rounded-md border">
+                <div className="space-y-1 p-2">
                   {parsedProxies.map((proxy, i) => (
                     <div
                       key={`${proxy.original_line}-${i}`}
-                      className="text-xs font-mono p-2 bg-muted/30 rounded break-all"
+                      className="rounded bg-muted/30 p-2 font-mono text-xs break-all"
                     >
                       <span className="text-primary">
                         {proxy.proxy_type}://
@@ -407,21 +407,21 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
             <p className="text-sm text-muted-foreground">
               {t("proxies.importDialog.ambiguousIntro")}
             </p>
-            <ScrollArea className="h-[clamp(150px,35vh,450px)] border rounded-md">
-              <div className="p-3 space-y-4">
+            <ScrollArea className="h-[clamp(150px,35vh,450px)] rounded-md border">
+              <div className="space-y-4 p-3">
                 {ambiguousProxies.map((proxy, i) => (
                   <div
                     key={`${proxy.line}-${i}`}
-                    className="space-y-2 pb-3 border-b last:border-0"
+                    className="space-y-2 border-b pb-3 last:border-0"
                   >
-                    <code className="text-xs bg-muted px-2 py-1 rounded block break-all">
+                    <code className="block rounded bg-muted px-2 py-1 text-xs break-all">
                       {proxy.line}
                     </code>
                     <div className="flex flex-col gap-2">
                       {proxy.possible_formats.map((format) => (
                         <label
                           key={format}
-                          className="flex items-center gap-2 cursor-pointer"
+                          className="flex cursor-pointer items-center gap-2"
                         >
                           <input
                             type="radio"
@@ -445,7 +445,7 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
 
         {step === "result" && importResult && (
           <div className="space-y-4">
-            <div className="p-4 bg-muted/30 rounded-lg space-y-2">
+            <div className="space-y-2 rounded-lg bg-muted/30 p-4">
               <div className="flex justify-between">
                 <span className="text-sm">
                   {t("proxies.importDialog.imported")}
@@ -479,8 +479,8 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
             {importResult.errors.length > 0 && (
               <div className="space-y-2">
                 <Label>{t("proxies.importDialog.errors")}</Label>
-                <ScrollArea className="h-[100px] border rounded-md">
-                  <div className="p-2 space-y-1">
+                <ScrollArea className="h-[100px] rounded-md border">
+                  <div className="space-y-1 p-2">
                     {importResult.errors.map((error, i) => (
                       <div
                         key={`error-${i}`}
diff --git a/src/components/proxy-management-dialog.tsx b/src/components/proxy-management-dialog.tsx
index f00b6a7..38317da 100644
--- a/src/components/proxy-management-dialog.tsx
+++ b/src/components/proxy-management-dialog.tsx
@@ -541,7 +541,7 @@ export function ProxyManagementDialog({
             onClick={() => {
               column.toggleSorting(column.getIsSorted() === "asc");
             }}
-            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+            className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
           >
             {t("common.labels.name")}
             {column.getIsSorted() === "asc" ? (
@@ -552,7 +552,7 @@ export function ProxyManagementDialog({
           </Button>
         ),
         cell: ({ row }) => (
-          <span className="font-medium block truncate">
+          <span className="block truncate font-medium">
             {row.original.name}
           </span>
         ),
@@ -563,7 +563,7 @@ export function ProxyManagementDialog({
         enableSorting: false,
         header: () => t("proxies.management.protocolCol"),
         cell: ({ row }) => (
-          <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+          <span className="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
             {row.original.proxy_settings.proxy_type}
           </span>
         ),
@@ -573,7 +573,7 @@ export function ProxyManagementDialog({
         enableSorting: false,
         header: () => t("proxies.management.hostPort"),
         cell: ({ row }) => (
-          <span className="font-mono text-xs text-muted-foreground block truncate">
+          <span className="block truncate font-mono text-xs text-muted-foreground">
             {row.original.proxy_settings.host}:
             {row.original.proxy_settings.port}
           </span>
@@ -774,7 +774,7 @@ export function ProxyManagementDialog({
             onClick={() => {
               column.toggleSorting(column.getIsSorted() === "asc");
             }}
-            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+            className="h-auto cursor-pointer justify-start p-0 text-left font-semibold"
           >
             {t("common.labels.name")}
             {column.getIsSorted() === "asc" ? (
@@ -793,7 +793,7 @@ export function ProxyManagementDialog({
             vpnSyncErrors[vpn.id],
           );
           return (
-            <div className="flex items-center gap-2 font-medium min-w-0">
+            <div className="flex min-w-0 items-center gap-2 font-medium">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div
@@ -1090,7 +1090,7 @@ export function ProxyManagementDialog({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
-        <DialogContent className="max-w-[min(80rem,calc(100%-4rem))] max-h-[85vh] flex flex-col">
+        <DialogContent className="flex max-h-[85vh] max-w-[min(80rem,calc(100%-4rem))] flex-col">
           {!subPage && (
             <DialogHeader>
               <DialogTitle>{t("proxies.management.title")}</DialogTitle>
@@ -1100,14 +1100,14 @@ export function ProxyManagementDialog({
             </DialogHeader>
           )}
 
-          <div className="@container w-full flex-1 min-h-0 flex flex-col">
+          <div className="@container flex min-h-0 w-full flex-1 flex-col">
             <AnimatedTabs
               key={initialTab}
               defaultValue={initialTab}
               onValueChange={(v) => setActiveTab(v as "proxies" | "vpns")}
-              className="flex-1 min-h-0 flex flex-col"
+              className="flex min-h-0 flex-1 flex-col"
             >
-              <div className="flex flex-wrap items-center justify-between gap-2 shrink-0">
+              <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
                 <AnimatedTabsList>
                   <AnimatedTabsTrigger value="proxies">
                     <span>{t("proxies.management.tabProxies")}</span>
@@ -1133,7 +1133,7 @@ export function ProxyManagementDialog({
                             onClick={() => {
                               setShowImportDialog(true);
                             }}
-                            className="flex gap-2 items-center"
+                            className="flex items-center gap-2"
                             aria-label={t("common.buttons.import")}
                           >
                             <LuUpload className="size-4" />
@@ -1154,7 +1154,7 @@ export function ProxyManagementDialog({
                             onClick={() => {
                               setShowExportDialog(true);
                             }}
-                            className="flex gap-2 items-center"
+                            className="flex items-center gap-2"
                             aria-label={t("common.buttons.export")}
                             disabled={storedProxies.length === 0}
                           >
@@ -1173,7 +1173,7 @@ export function ProxyManagementDialog({
                           <RippleButton
                             size="sm"
                             onClick={handleCreateProxy}
-                            className="flex gap-2 items-center"
+                            className="flex items-center gap-2"
                             aria-label={t("proxies.management.newProxy")}
                           >
                             <GoPlus className="size-4" />
@@ -1198,7 +1198,7 @@ export function ProxyManagementDialog({
                             onClick={() => {
                               setShowVpnImportDialog(true);
                             }}
-                            className="flex gap-2 items-center"
+                            className="flex items-center gap-2"
                             aria-label={t("common.buttons.import")}
                           >
                             <LuUpload className="size-4" />
@@ -1216,7 +1216,7 @@ export function ProxyManagementDialog({
                           <RippleButton
                             size="sm"
                             onClick={handleCreateVpn}
-                            className="flex gap-2 items-center"
+                            className="flex items-center gap-2"
                             aria-label={t("proxies.management.newVpn")}
                           >
                             <GoPlus className="size-4" />
@@ -1236,9 +1236,9 @@ export function ProxyManagementDialog({
 
               <AnimatedTabsContent
                 value="proxies"
-                className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col"
+                className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
               >
-                <div className="flex flex-col gap-4 flex-1 min-h-0">
+                <div className="flex min-h-0 flex-1 flex-col gap-4">
                   {isLoading ? (
                     <div className="text-sm text-muted-foreground">
                       {t("proxies.management.loading")}
@@ -1250,7 +1250,7 @@ export function ProxyManagementDialog({
                   ) : (
                     <FadingScrollArea
                       className={cn(
-                        "flex-1 min-h-0",
+                        "min-h-0 flex-1",
                         selectedProxies.length > 0 && "pb-16",
                       )}
                       style={
@@ -1284,7 +1284,7 @@ export function ProxyManagementDialog({
                                     // of it).
                                     header.column.id === "name" && "max-w-0",
                                     header.column.id === "hostPort" &&
-                                      "hidden @2xl:table-cell max-w-0",
+                                      "hidden max-w-0 @2xl:table-cell",
                                     (header.column.id === "protocol" ||
                                       header.column.id === "type") &&
                                       "hidden @2xl:table-cell",
@@ -1320,7 +1320,7 @@ export function ProxyManagementDialog({
                                   className={cn(
                                     cell.column.id === "name" && "max-w-0",
                                     cell.column.id === "hostPort" &&
-                                      "hidden @2xl:table-cell max-w-0",
+                                      "hidden max-w-0 @2xl:table-cell",
                                     (cell.column.id === "protocol" ||
                                       cell.column.id === "type") &&
                                       "hidden @2xl:table-cell",
@@ -1343,9 +1343,9 @@ export function ProxyManagementDialog({
 
               <AnimatedTabsContent
                 value="vpns"
-                className="mt-4 flex-1 min-h-0 data-[state=active]:flex flex-col"
+                className="mt-4 min-h-0 flex-1 flex-col data-[state=active]:flex"
               >
-                <div className="flex flex-col gap-4 flex-1 min-h-0">
+                <div className="flex min-h-0 flex-1 flex-col gap-4">
                   {isLoadingVpns ? (
                     <div className="text-sm text-muted-foreground">
                       {t("vpns.management.loading")}
@@ -1357,7 +1357,7 @@ export function ProxyManagementDialog({
                   ) : (
                     <FadingScrollArea
                       className={cn(
-                        "flex-1 min-h-0",
+                        "min-h-0 flex-1",
                         selectedVpns.length > 0 && "pb-16",
                       )}
                       style={
@@ -1391,7 +1391,7 @@ export function ProxyManagementDialog({
                                     // of it).
                                     header.column.id === "name" && "max-w-0",
                                     header.column.id === "hostPort" &&
-                                      "hidden @2xl:table-cell max-w-0",
+                                      "hidden max-w-0 @2xl:table-cell",
                                     (header.column.id === "protocol" ||
                                       header.column.id === "type") &&
                                       "hidden @2xl:table-cell",
@@ -1427,7 +1427,7 @@ export function ProxyManagementDialog({
                                   className={cn(
                                     cell.column.id === "name" && "max-w-0",
                                     cell.column.id === "hostPort" &&
-                                      "hidden @2xl:table-cell max-w-0",
+                                      "hidden max-w-0 @2xl:table-cell",
                                     (cell.column.id === "protocol" ||
                                       cell.column.id === "type") &&
                                       "hidden @2xl:table-cell",
diff --git a/src/components/rail-nav.tsx b/src/components/rail-nav.tsx
index c15eb82..9597cf1 100644
--- a/src/components/rail-nav.tsx
+++ b/src/components/rail-nav.tsx
@@ -290,13 +290,13 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
   } = useLogoEasterEgg({ currentPage, onNavigate });
 
   return (
-    <nav className="flex flex-col items-center w-10 py-2 gap-1 bg-background border-r border-border shrink-0 relative">
+    <nav className="relative flex w-10 shrink-0 flex-col items-center gap-1 border-r border-border bg-background py-2">
       {!isHidden ? (
         <button
           ref={logoRef}
           type="button"
           aria-label={t("header.donutLogo")}
-          className="grid place-items-center size-7 rounded-md cursor-pointer select-none text-foreground bg-transparent shrink-0"
+          className="grid size-7 shrink-0 cursor-pointer place-items-center rounded-md bg-transparent text-foreground select-none"
           onClick={handleClick}
           onPointerDown={() => {
             setIsPressed(true);
@@ -336,9 +336,9 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
         <div className="size-7 shrink-0" />
       )}
 
-      <div className="w-5 h-px bg-border my-1 shrink-0" />
+      <div className="my-1 h-px w-5 shrink-0 bg-border" />
 
-      <div className="flex flex-col items-center gap-1 w-full min-h-0 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+      <div className="flex min-h-0 w-full scrollbar-none flex-col items-center gap-1 overflow-y-auto [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
         {TOP_ITEMS.map(({ page, Icon, labelKey }) => {
           const active = currentPage === page;
           return (
@@ -352,16 +352,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                   aria-label={t(labelKey)}
                   aria-current={active ? "page" : undefined}
                   className={cn(
-                    "relative grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0",
+                    "relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
                     active
-                      ? "text-foreground bg-accent"
-                      : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
+                      ? "bg-accent text-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
                   )}
                 >
                   {active && (
                     <span
                       aria-hidden="true"
-                      className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground"
+                      className="absolute inset-y-1.5 left-[-7px] w-[2px] rounded-full bg-foreground"
                     />
                   )}
                   <Icon className="size-3.5" />
@@ -385,10 +385,10 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
             aria-label={t("rail.more.label")}
             aria-expanded={moreOpen}
             className={cn(
-              "grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0",
+              "grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
               moreOpen
-                ? "text-foreground bg-accent"
-                : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
             )}
           >
             <GoKebabHorizontal className="size-3.5" />
@@ -407,16 +407,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
             aria-label={t("rail.settings")}
             aria-current={currentPage === "settings" ? "page" : undefined}
             className={cn(
-              "relative grid place-items-center size-7 rounded-md cursor-pointer transition-colors duration-100 shrink-0",
+              "relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-100",
               currentPage === "settings"
-                ? "text-foreground bg-accent"
-                : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/50 hover:text-card-foreground",
             )}
           >
             {currentPage === "settings" && (
               <span
                 aria-hidden="true"
-                className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground"
+                className="absolute inset-y-1.5 left-[-7px] w-[2px] rounded-full bg-foreground"
               />
             )}
             <GoGear className="size-3.5" />
@@ -430,12 +430,12 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
           <button
             type="button"
             aria-label={t("rail.more.closeAriaLabel")}
-            className="fixed inset-0 z-30 bg-transparent cursor-default"
+            className="fixed inset-0 z-30 cursor-default bg-transparent"
             onClick={() => {
               setMoreOpen(false);
             }}
           />
-          <div className="absolute bottom-14 left-11 w-56 bg-card border border-border rounded-lg shadow-2xl p-1 z-40 animate-in fade-in-0 slide-in-from-bottom-1 duration-100">
+          <div className="absolute bottom-14 left-11 z-40 w-56 animate-in rounded-lg border border-border bg-card p-1 shadow-2xl duration-100 fade-in-0 slide-in-from-bottom-1">
             {MORE_ITEMS.map(({ page, Icon, labelKey, hintKey }) => (
               <button
                 key={page}
@@ -444,16 +444,16 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                   setMoreOpen(false);
                   onNavigate(page);
                 }}
-                className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md cursor-pointer hover:bg-accent transition-colors duration-100 text-left"
+                className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-100 hover:bg-accent"
               >
-                <span className="grid place-items-center size-5 rounded bg-muted text-muted-foreground shrink-0">
+                <span className="grid size-5 shrink-0 place-items-center rounded bg-muted text-muted-foreground">
                   <Icon className="size-3" />
                 </span>
-                <span className="flex flex-col min-w-0">
-                  <span className="text-xs font-medium text-foreground truncate">
+                <span className="flex min-w-0 flex-col">
+                  <span className="truncate text-xs font-medium text-foreground">
                     {t(labelKey)}
                   </span>
-                  <span className="text-[10px] text-muted-foreground truncate">
+                  <span className="truncate text-[10px] text-muted-foreground">
                     {t(hintKey)}
                   </span>
                 </span>
diff --git a/src/components/release-type-selector.tsx b/src/components/release-type-selector.tsx
index b7d0541..669a3b1 100644
--- a/src/components/release-type-selector.tsx
+++ b/src/components/release-type-selector.tsx
@@ -93,10 +93,10 @@ export function ReleaseTypeSelector({
               role="combobox"
               aria-expanded={popoverOpen}
               aria-controls={listboxId}
-              className="justify-between w-full"
+              className="w-full justify-between"
             >
               {selectedDisplayText}
-              <LuChevronsUpDown className="ml-2 size-4 opacity-50 shrink-0" />
+              <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
             </RippleButton>
           </PopoverTrigger>
           <PopoverContent id={listboxId} className="p-0">
@@ -134,7 +134,7 @@ export function ReleaseTypeSelector({
                               : "opacity-0",
                           )}
                         />
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <span className="capitalize">{option.type}</span>
                           {option.type === "nightly" && (
                             <Badge variant="secondary" className="text-xs">
@@ -161,7 +161,7 @@ export function ReleaseTypeSelector({
       ) : (
         // Show a simple display when only one release type is available
         releaseOptions.length === 1 && (
-          <div className="flex gap-2 justify-center items-center p-3 rounded-md border bg-muted/50">
+          <div className="flex items-center justify-center gap-2 rounded-md border bg-muted/50 p-3">
             <span className="text-sm font-medium capitalize">
               {releaseOptions[0].type}
             </span>
diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index e0adb0e..8b57226 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -194,7 +194,7 @@ export function SettingsDialog({
         return (
           <Badge
             variant="default"
-            className="text-success-foreground bg-success"
+            className="bg-success text-success-foreground"
           >
             {t("common.status.granted")}
           </Badge>
@@ -633,7 +633,7 @@ export function SettingsDialog({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={handleClose} subPage={subPage}>
-        <DialogContent className="max-w-md max-h-[calc(100vh-5rem)] flex flex-col">
+        <DialogContent className="flex max-h-[calc(100vh-5rem)] max-w-md flex-col">
           {!subPage && (
             <DialogHeader className="shrink-0">
               <DialogTitle>{t("settings.title")}</DialogTitle>
@@ -642,8 +642,8 @@ export function SettingsDialog({
 
           <div
             className={cn(
-              "grid overflow-y-auto flex-1 gap-6 min-h-0",
-              subPage ? "py-2 w-full max-w-2xl mx-auto" : "py-4",
+              "grid min-h-0 flex-1 gap-6 overflow-y-auto",
+              subPage ? "mx-auto w-full max-w-2xl py-2" : "py-4",
             )}
           >
             {/* Appearance Section */}
@@ -755,14 +755,14 @@ export function SettingsDialog({
                       return (
                         <div
                           key={key}
-                          className="flex flex-col gap-1 items-center"
+                          className="flex flex-col items-center gap-1"
                         >
                           <Popover>
                             <PopoverTrigger asChild>
                               <button
                                 type="button"
                                 aria-label={label}
-                                className="size-8 rounded-md border shadow-sm cursor-pointer"
+                                className="size-8 cursor-pointer rounded-md border shadow-sm"
                                 style={{ backgroundColor: colorValue }}
                               />
                             </PopoverTrigger>
@@ -771,7 +771,7 @@ export function SettingsDialog({
                               sideOffset={6}
                             >
                               <ColorPicker
-                                className="p-3 rounded-md border shadow-sm bg-background"
+                                className="rounded-md border bg-background p-3 shadow-sm"
                                 value={colorValue}
                                 onColorChange={([r, g, b, a]) => {
                                   const next = Color({ r, g, b }).alpha(a);
@@ -792,21 +792,21 @@ export function SettingsDialog({
                                 }}
                               >
                                 <ColorPickerSelection className="h-36 rounded" />
-                                <div className="flex gap-3 items-center mt-3">
+                                <div className="mt-3 flex items-center gap-3">
                                   <ColorPickerEyeDropper />
-                                  <div className="grid gap-1 w-full">
+                                  <div className="grid w-full gap-1">
                                     <ColorPickerHue />
                                     <ColorPickerAlpha />
                                   </div>
                                 </div>
-                                <div className="flex gap-2 items-center mt-3">
+                                <div className="mt-3 flex items-center gap-2">
                                   <ColorPickerOutput />
                                   <ColorPickerFormat />
                                 </div>
                               </ColorPicker>
                             </PopoverContent>
                           </Popover>
-                          <div className="text-[10px] text-muted-foreground text-center leading-tight">
+                          <div className="text-center text-[10px] leading-tight text-muted-foreground">
                             {label}
                           </div>
                         </div>
@@ -860,7 +860,7 @@ export function SettingsDialog({
             {/* Default Browser Section - hidden in portable mode */}
             {!systemInfo?.portable && (
               <div className="space-y-4">
-                <div className="flex justify-between items-center">
+                <div className="flex items-center justify-between">
                   <Label className="text-base font-medium">
                     {t("settings.defaultBrowser.title")}
                   </Label>
@@ -909,7 +909,7 @@ export function SettingsDialog({
                     {permissions.map((permission) => (
                       <div
                         key={permission.permission_type}
-                        className="flex justify-between items-center p-3 rounded-lg border"
+                        className="flex items-center justify-between rounded-lg border p-3"
                       >
                         <div className="flex items-center gap-x-3">
                           {getPermissionIcon(permission.permission_type)}
@@ -1015,7 +1015,7 @@ export function SettingsDialog({
                       {t("settings.encryption.passwordSetDescription")}
                     </span>
                   </div>
-                  <div className="flex gap-2 flex-wrap">
+                  <div className="flex flex-wrap gap-2">
                     <Button
                       variant="outline"
                       size="sm"
@@ -1156,7 +1156,7 @@ export function SettingsDialog({
                 {t("settings.commercial.title")}
               </Label>
 
-              <div className="flex items-center justify-between p-3 rounded-md border bg-muted/40">
+              <div className="flex items-center justify-between rounded-md border bg-muted/40 p-3">
                 {cloudUser != null && cloudUser.plan !== "free" ? (
                   // Paid Donut plan supersedes the local commercial trial —
                   // the trial only exists to gate commercial use until the
@@ -1205,7 +1205,7 @@ export function SettingsDialog({
               </Label>
 
               {!isLinux && (
-                <div className="flex items-start gap-x-3 p-3 rounded-lg border">
+                <div className="flex items-start gap-x-3 rounded-lg border p-3">
                   <Checkbox
                     id="disable-auto-updates"
                     checked={settings.disable_auto_updates ?? false}
@@ -1227,7 +1227,7 @@ export function SettingsDialog({
                 </div>
               )}
 
-              <div className="flex items-start gap-x-3 p-3 rounded-lg border">
+              <div className="flex items-start gap-x-3 rounded-lg border p-3">
                 <Checkbox
                   id="keep-decrypted-profiles-in-ram"
                   checked={settings.keep_decrypted_profiles_in_ram ?? false}
@@ -1305,8 +1305,8 @@ export function SettingsDialog({
 
             {/* System Info */}
             {systemInfo && (
-              <div className="pt-2 border-t">
-                <p className="text-xs text-muted-foreground font-mono whitespace-pre-line select-all">
+              <div className="border-t pt-2">
+                <p className="font-mono text-xs whitespace-pre-line text-muted-foreground select-all">
                   {`Donut Browser ${systemInfo.app_version}\n${systemInfo.os} ${systemInfo.arch}${systemInfo.portable ? " (portable)" : ""}`}
                 </p>
               </div>
@@ -1314,7 +1314,7 @@ export function SettingsDialog({
           </div>
 
           {subPage ? (
-            <div className="shrink-0 flex items-center justify-end gap-2 pt-2 border-t border-border w-full max-w-2xl mx-auto">
+            <div className="mx-auto flex w-full max-w-2xl shrink-0 items-center justify-end gap-2 border-t border-border pt-2">
               <LoadingButton
                 size="sm"
                 isLoading={isSaving}
diff --git a/src/components/shared-camoufox-config-form.tsx b/src/components/shared-camoufox-config-form.tsx
index ab490f4..a87055b 100644
--- a/src/components/shared-camoufox-config-form.tsx
+++ b/src/components/shared-camoufox-config-form.tsx
@@ -302,7 +302,7 @@ export function SharedCamoufoxConfigForm({
       </div>
 
       {/* Randomize Fingerprint Option */}
-      <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+      <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
         <div className="flex items-center gap-x-2">
           <Checkbox
             id="randomize-fingerprint"
@@ -316,7 +316,7 @@ export function SharedCamoufoxConfigForm({
             {t("fingerprint.generateRandomOnLaunch")}
           </Label>
         </div>
-        <p className="text-sm text-muted-foreground ml-6">
+        <p className="ml-6 text-sm text-muted-foreground">
           {t("fingerprint.generateRandomDescription")}
         </p>
       </div>
@@ -410,7 +410,7 @@ export function SharedCamoufoxConfigForm({
           {/* Navigator Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.navigatorProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label>
                 <Input
@@ -566,7 +566,7 @@ export function SharedCamoufoxConfigForm({
           {/* Screen Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.screenProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="screen-width">
                   {t("fingerprint.screenWidth")}
@@ -687,7 +687,7 @@ export function SharedCamoufoxConfigForm({
           {/* Window Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.windowProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="outer-width">
                   {t("fingerprint.outerWidth")}
@@ -800,7 +800,7 @@ export function SharedCamoufoxConfigForm({
           {/* Geolocation */}
           <div className="space-y-3">
             <Label>{t("fingerprint.geolocation")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="latitude">{t("fingerprint.latitude")}</Label>
                 <Input
@@ -860,7 +860,7 @@ export function SharedCamoufoxConfigForm({
           {/* Locale */}
           <div className="space-y-3">
             <Label>{t("fingerprint.locale")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="locale-language">
                   {t("fingerprint.language")}
@@ -917,7 +917,7 @@ export function SharedCamoufoxConfigForm({
           {/* WebGL Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.webglProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="webgl-vendor">
                   {t("fingerprint.webglVendor")}
@@ -1065,7 +1065,7 @@ export function SharedCamoufoxConfigForm({
           {/* Battery */}
           <div className="space-y-3">
             <Label>{t("fingerprint.battery")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <div className="flex items-center gap-x-2">
                   <Checkbox
@@ -1138,12 +1138,12 @@ export function SharedCamoufoxConfigForm({
         </fieldset>
         {limitedMode && (
           <>
-            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
-            <div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" />
-            <div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" />
-            <div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" />
-            <div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" />
-            <div className="absolute inset-0 flex items-center justify-center z-[3]">
+            <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
+            <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
+            <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
+            <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
+            <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
+            <div className="absolute inset-0 z-3 flex items-center justify-center">
               <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                 <ProBadge />
                 <span className="text-sm font-medium text-muted-foreground">
@@ -1168,7 +1168,7 @@ export function SharedCamoufoxConfigForm({
           onValueChange={readOnly ? undefined : setActiveTab}
           className="w-full"
         >
-          <TabsList className="grid grid-cols-2 w-full">
+          <TabsList className="grid w-full grid-cols-2">
             <TabsTrigger value="automatic" disabled={readOnly}>
               {t("fingerprint.automatic")}
             </TabsTrigger>
@@ -1217,7 +1217,7 @@ export function SharedCamoufoxConfigForm({
             </div>
 
             {/* Randomize Fingerprint Option */}
-            <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+            <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
               <div className="flex items-center gap-x-2">
                 <Checkbox
                   id="randomize-fingerprint-auto"
@@ -1234,7 +1234,7 @@ export function SharedCamoufoxConfigForm({
                   {t("fingerprint.generateRandomOnLaunch")}
                 </Label>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-sm text-muted-foreground">
                 {t("fingerprint.generateRandomDescriptionAuto")}
               </p>
             </div>
@@ -1265,7 +1265,7 @@ export function SharedCamoufoxConfigForm({
                 className="space-y-3"
               >
                 <Label>{t("fingerprint.screenResolution")}</Label>
-                <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
                   <div className="space-y-2">
                     <Label htmlFor="screen-max-width">
                       {t("fingerprint.maxWidth")}
@@ -1354,12 +1354,12 @@ export function SharedCamoufoxConfigForm({
               </fieldset>
               {limitedMode && (
                 <>
-                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
-                  <div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" />
-                  <div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" />
-                  <div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" />
-                  <div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" />
-                  <div className="absolute inset-0 flex items-center justify-center z-[3]">
+                  <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
+                  <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
+                  <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
+                  <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
+                  <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
+                  <div className="absolute inset-0 z-3 flex items-center justify-center">
                     <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                       <ProBadge />
                       <span className="text-sm font-medium text-muted-foreground">
diff --git a/src/components/shortcuts-page.tsx b/src/components/shortcuts-page.tsx
index edaa1ce..f8603bd 100644
--- a/src/components/shortcuts-page.tsx
+++ b/src/components/shortcuts-page.tsx
@@ -21,11 +21,11 @@ interface ShortcutsPageProps {
 
 function Tokens({ tokens }: { tokens: string[] }) {
   return (
-    <div className="flex items-center gap-1 shrink-0">
+    <div className="flex shrink-0 items-center gap-1">
       {tokens.map((tok, i) => (
         <kbd
           key={i}
-          className="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded border border-border bg-muted text-[11px] font-medium text-foreground"
+          className="inline-flex h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 text-[11px] font-medium text-foreground"
         >
           {tok}
         </kbd>
@@ -49,8 +49,8 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
   const digitGroups = groupTargets.slice(0, 9);
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 overflow-y-auto px-6 pt-4 pb-8">
-      <div className="max-w-3xl w-full mx-auto flex flex-col gap-6">
+    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-4 pb-8">
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
         <header className="flex flex-col gap-1">
           <h1 className="text-lg font-semibold">{t("shortcutsPage.title")}</h1>
           <p className="text-xs text-muted-foreground">
@@ -63,17 +63,17 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
           if (items.length === 0) return null;
           return (
             <section key={key} className="flex flex-col gap-2">
-              <h2 className="text-[10px] uppercase tracking-wide text-muted-foreground">
+              <h2 className="text-[10px] tracking-wide text-muted-foreground uppercase">
                 {t(titleKey)}
               </h2>
-              <div className="rounded-md border bg-card divide-y divide-border">
+              <div className="divide-y divide-border rounded-md border bg-card">
                 {items.map((s) => (
                   <div
                     key={s.id}
                     className="flex items-center justify-between gap-4 px-3 py-2"
                   >
                     <span
-                      className="text-sm truncate min-w-0"
+                      className="min-w-0 truncate text-sm"
                       title={t(s.labelKey)}
                     >
                       {t(s.labelKey)}
@@ -88,17 +88,17 @@ export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
 
         {digitGroups.length > 0 ? (
           <section className="flex flex-col gap-2">
-            <h2 className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            <h2 className="text-[10px] tracking-wide text-muted-foreground uppercase">
               {t("commandPalette.groups.profileGroups")}
             </h2>
-            <div className="rounded-md border bg-card divide-y divide-border">
+            <div className="divide-y divide-border rounded-md border bg-card">
               {digitGroups.map((target, i) => (
                 <div
                   key={target.id}
                   className="flex items-center justify-between gap-4 px-3 py-2"
                 >
                   <span
-                    className="text-sm truncate min-w-0"
+                    className="min-w-0 truncate text-sm"
                     title={target.name}
                   >
                     {target.name}
diff --git a/src/components/sync-all-dialog.tsx b/src/components/sync-all-dialog.tsx
index 756427c..96f213f 100644
--- a/src/components/sync-all-dialog.tsx
+++ b/src/components/sync-all-dialog.tsx
@@ -129,7 +129,7 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
 
         {isLoading ? (
           <div className="flex justify-center py-8">
-            <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+            <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
           </div>
         ) : (
           <div className="grid grid-cols-2 gap-2 py-2">
@@ -141,12 +141,12 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
                 <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
                   <Icon className="size-4" />
                 </div>
-                <div className="min-w-0 flex-1 text-sm font-medium truncate">
+                <div className="min-w-0 flex-1 truncate text-sm font-medium">
                   {label}
                 </div>
                 <Badge
                   variant="secondary"
-                  className="shrink-0 tabular-nums px-2"
+                  className="shrink-0 px-2 tabular-nums"
                 >
                   {count}
                 </Badge>
diff --git a/src/components/sync-config-dialog.tsx b/src/components/sync-config-dialog.tsx
index 00bcc76..0255316 100644
--- a/src/components/sync-config-dialog.tsx
+++ b/src/components/sync-config-dialog.tsx
@@ -248,7 +248,7 @@ export function SyncConfigDialog({
 
         {isLoggedIn && user ? (
           <div className="grid gap-4 py-4">
-            <div className="flex gap-2 items-center text-sm">
+            <div className="flex items-center gap-2 text-sm">
               <div className="size-2 rounded-full bg-success" />
               {t("sync.cloud.connected")}
             </div>
@@ -300,7 +300,7 @@ export function SyncConfigDialog({
                           : t("sync.team.roleMember")}
                     </span>
                   </div>
-                  <p className="text-xs text-muted-foreground pt-1">
+                  <p className="pt-1 text-xs text-muted-foreground">
                     {t("sync.team.manageOnWeb")}
                   </p>
                 </>
@@ -354,7 +354,7 @@ export function SyncConfigDialog({
             <TabsContent value="cloud">
               {isCloudLoading ? (
                 <div className="flex justify-center py-8">
-                  <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                  <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
                 </div>
               ) : (
                 <div className="grid gap-4 py-4">
@@ -374,7 +374,7 @@ export function SyncConfigDialog({
             <TabsContent value="self-hosted">
               {isLoading ? (
                 <div className="flex justify-center py-8">
-                  <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                  <div className="size-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
                 </div>
               ) : (
                 <div className="grid gap-4 py-4">
@@ -412,7 +412,7 @@ export function SyncConfigDialog({
                             onClick={() => {
                               setShowToken(!showToken);
                             }}
-                            className="absolute right-3 top-1/2 p-1 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent"
+                            className="absolute top-1/2 right-3 -translate-y-1/2 transform rounded-sm p-1 transition-colors hover:bg-accent"
                             aria-label={
                               showToken
                                 ? t("common.aria.hideToken")
@@ -434,19 +434,19 @@ export function SyncConfigDialog({
                   </div>
 
                   {connectionStatus === "testing" && (
-                    <div className="flex gap-2 items-center text-sm text-muted-foreground">
-                      <div className="size-4 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                       {t("sync.status.syncing")}
                     </div>
                   )}
                   {connectionStatus === "connected" && (
-                    <div className="flex gap-2 items-center text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <div className="size-2 rounded-full bg-success" />
                       {t("sync.status.connected")}
                     </div>
                   )}
                   {connectionStatus === "error" && (
-                    <div className="flex gap-2 items-center text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <div className="size-2 rounded-full bg-destructive" />
                       {t("sync.status.disconnected")}
                     </div>
diff --git a/src/components/sync-follower-dialog.tsx b/src/components/sync-follower-dialog.tsx
index 629c157..a23d16c 100644
--- a/src/components/sync-follower-dialog.tsx
+++ b/src/components/sync-follower-dialog.tsx
@@ -127,20 +127,20 @@ export function SyncFollowerDialog({
 
         {leaderProfile && (
           <div className="space-y-3">
-            <div className="flex items-center gap-2 p-2 rounded-md bg-primary/10 border border-primary/20">
+            <div className="flex items-center gap-2 rounded-md border border-primary/20 bg-primary/10 p-2">
               <Badge variant="default" className="text-xs">
                 {t("profiles.synchronizer.leader")}
               </Badge>
-              <span className="text-sm font-medium truncate">
+              <span className="truncate text-sm font-medium">
                 {leaderProfile.name}
               </span>
             </div>
 
-            <div className="border rounded-md">
+            <div className="rounded-md border">
               <ScrollArea className="h-[clamp(120px,30vh,20rem)]">
                 <div className="space-y-1 p-2">
                   {eligibleProfiles.length === 0 ? (
-                    <p className="text-sm text-muted-foreground py-4 text-center">
+                    <p className="py-4 text-center text-sm text-muted-foreground">
                       {t("profiles.synchronizer.wayfernOnly")}
                     </p>
                   ) : (
@@ -155,7 +155,7 @@ export function SyncFollowerDialog({
                       return (
                         <div
                           key={profile.id}
-                          className="flex items-center gap-3 p-2 rounded-md hover:bg-accent cursor-pointer"
+                          className="flex cursor-pointer items-center gap-3 rounded-md p-2 hover:bg-accent"
                           onClick={() => {
                             handleToggle(
                               profile.id,
@@ -174,7 +174,7 @@ export function SyncFollowerDialog({
                               handleToggle(profile.id, checked === true);
                             }}
                           />
-                          <span className="text-sm truncate flex-1">
+                          <span className="flex-1 truncate text-sm">
                             {profile.name}
                           </span>
                           {isFlaky && (
@@ -182,7 +182,7 @@ export function SyncFollowerDialog({
                               <TooltipTrigger asChild>
                                 <Badge
                                   variant="outline"
-                                  className="text-[10px] px-1.5 py-0 text-warning border-warning/50 shrink-0"
+                                  className="shrink-0 border-warning/50 px-1.5 py-0 text-[10px] text-warning"
                                 >
                                   {t("profiles.synchronizer.flakyBadge")}
                                 </Badge>
diff --git a/src/components/thank-you-dialog.tsx b/src/components/thank-you-dialog.tsx
index fa4c0cb..6e30158 100644
--- a/src/components/thank-you-dialog.tsx
+++ b/src/components/thank-you-dialog.tsx
@@ -67,7 +67,7 @@ export function ThankYouDialog({
               initial={{ opacity: 0, y: 8 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ ...spring, delay: 0.15 }}
-              className="mx-auto max-w-[46ch] text-sm leading-6 text-pretty text-muted-foreground"
+              className="mx-auto max-w-[46ch] text-sm/6 text-pretty text-muted-foreground"
             >
               {t("onboarding.thankYou.body")}
             </motion.p>
diff --git a/src/components/traffic-details-dialog.tsx b/src/components/traffic-details-dialog.tsx
index a977da4..5006d47 100644
--- a/src/components/traffic-details-dialog.tsx
+++ b/src/components/traffic-details-dialog.tsx
@@ -127,7 +127,7 @@ const TruncatedDomain = React.memo<{ domain: string }>(({ domain }) => {
   }, [checkTruncation]);
 
   const content = (
-    <span ref={ref} className="truncate block min-w-0 flex-1">
+    <span ref={ref} className="block min-w-0 flex-1 truncate">
       {domain}
     </span>
   );
@@ -209,8 +209,8 @@ export function TrafficDetailsDialog({
       const formattedTime = time.toLocaleTimeString();
 
       return (
-        <div className="bg-popover border rounded-lg px-3 py-2 shadow-lg">
-          <p className="text-xs text-muted-foreground mb-1">{formattedTime}</p>
+        <div className="rounded-lg border bg-popover px-3 py-2 shadow-lg">
+          <p className="mb-1 text-xs text-muted-foreground">{formattedTime}</p>
           {payload.map((entry) => (
             <p key={String(entry.dataKey)} className="text-sm">
               <span className="text-muted-foreground">
@@ -262,7 +262,7 @@ export function TrafficDetailsDialog({
           <DialogTitle>
             {t("traffic.title")}
             {profileName && (
-              <span className="text-muted-foreground font-normal ml-2">
+              <span className="ml-2 font-normal text-muted-foreground">
                 — {profileName}
               </span>
             )}
@@ -273,7 +273,7 @@ export function TrafficDetailsDialog({
           <div className="space-y-6 pr-4">
             {/* Chart with Period Selector */}
             <div>
-              <div className="flex items-center justify-between mb-2">
+              <div className="mb-2 flex items-center justify-between">
                 <h3 className="text-sm font-medium">
                   {t("traffic.bandwidthOverTime")}
                 </h3>
@@ -283,7 +283,7 @@ export function TrafficDetailsDialog({
                     setTimePeriod(v as TimePeriod);
                   }}
                 >
-                  <SelectTrigger className="w-[120px] h-8">
+                  <SelectTrigger className="h-8 w-[120px]">
                     <SelectValue
                       placeholder={t("traffic.timePeriodPlaceholder")}
                     />
@@ -396,7 +396,7 @@ export function TrafficDetailsDialog({
                 </ResponsiveContainer>
               </div>
 
-              <div className="flex items-center justify-center gap-6 mt-2">
+              <div className="mt-2 flex items-center justify-center gap-6">
                 <div className="flex items-center gap-2">
                   <div
                     className="size-3 rounded"
@@ -420,7 +420,7 @@ export function TrafficDetailsDialog({
 
             {/* Period Stats - now uses backend-computed values */}
             <div className="grid grid-cols-3 gap-4">
-              <div className="bg-muted/50 rounded-lg p-3">
+              <div className="rounded-lg bg-muted/50 p-3">
                 <p className="text-xs text-muted-foreground">
                   {t("traffic.sentLabel", {
                     period:
@@ -433,7 +433,7 @@ export function TrafficDetailsDialog({
                   {formatBytes(stats?.period_bytes_sent ?? 0)}
                 </p>
               </div>
-              <div className="bg-muted/50 rounded-lg p-3">
+              <div className="rounded-lg bg-muted/50 p-3">
                 <p className="text-xs text-muted-foreground">
                   {t("traffic.receivedLabel", {
                     period:
@@ -446,7 +446,7 @@ export function TrafficDetailsDialog({
                   {formatBytes(stats?.period_bytes_received ?? 0)}
                 </p>
               </div>
-              <div className="bg-muted/50 rounded-lg p-3">
+              <div className="rounded-lg bg-muted/50 p-3">
                 <p className="text-xs text-muted-foreground">
                   {t("traffic.requestsLabel", {
                     period:
@@ -462,7 +462,7 @@ export function TrafficDetailsDialog({
             </div>
 
             {/* Total Stats (smaller, under period stats) */}
-            <div className="flex items-center gap-6 text-sm text-muted-foreground border-t pt-4">
+            <div className="flex items-center gap-6 border-t pt-4 text-sm text-muted-foreground">
               <div>
                 <span className="font-medium">
                   {t("traffic.allTimeTraffic")}
@@ -488,7 +488,7 @@ export function TrafficDetailsDialog({
             {/* Top Domains by Traffic */}
             {topDomainsByTraffic.length > 0 && (
               <div>
-                <h3 className="text-sm font-medium mb-2">
+                <h3 className="mb-2 text-sm font-medium">
                   {t("traffic.topByTraffic", {
                     period:
                       timePeriod === "all"
@@ -496,8 +496,8 @@ export function TrafficDetailsDialog({
                         : timePeriod,
                   })}
                 </h3>
-                <div className="border rounded-md">
-                  <div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
+                <div className="rounded-md border">
+                  <div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground">
                     <span>{t("traffic.columnDomain")}</span>
                     <span className="text-right">
                       {t("traffic.columnRequests")}
@@ -513,10 +513,10 @@ export function TrafficDetailsDialog({
                     {topDomainsByTraffic.map((domain, index) => (
                       <div
                         key={domain.domain}
-                        className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
+                        className="grid grid-cols-[1fr_80px_80px_80px] gap-2 border-b px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
                       >
-                        <div className="flex items-center gap-2 min-w-0">
-                          <span className="text-xs text-muted-foreground w-4 shrink-0">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <span className="w-4 shrink-0 text-xs text-muted-foreground">
                             {index + 1}
                           </span>
                           <TruncatedDomain domain={domain.domain} />
@@ -540,7 +540,7 @@ export function TrafficDetailsDialog({
             {/* Top Domains by Requests */}
             {topDomainsByRequests.length > 0 && (
               <div>
-                <h3 className="text-sm font-medium mb-2">
+                <h3 className="mb-2 text-sm font-medium">
                   {t("traffic.topByRequests", {
                     period:
                       timePeriod === "all"
@@ -548,8 +548,8 @@ export function TrafficDetailsDialog({
                         : timePeriod,
                   })}
                 </h3>
-                <div className="border rounded-md">
-                  <div className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
+                <div className="rounded-md border">
+                  <div className="grid grid-cols-[1fr_80px_100px] gap-2 border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground">
                     <span>{t("traffic.columnDomain")}</span>
                     <span className="text-right">
                       {t("traffic.columnRequests")}
@@ -562,10 +562,10 @@ export function TrafficDetailsDialog({
                     {topDomainsByRequests.map((domain, index) => (
                       <div
                         key={domain.domain}
-                        className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
+                        className="grid grid-cols-[1fr_80px_100px] gap-2 border-b px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
                       >
-                        <div className="flex items-center gap-2 min-w-0">
-                          <span className="text-xs text-muted-foreground w-4 shrink-0">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <span className="w-4 shrink-0 text-xs text-muted-foreground">
                             {index + 1}
                           </span>
                           <TruncatedDomain domain={domain.domain} />
@@ -588,15 +588,15 @@ export function TrafficDetailsDialog({
             {/* Unique IPs */}
             {stats?.unique_ips && stats.unique_ips.length > 0 && (
               <div>
-                <h3 className="text-sm font-medium mb-2">
+                <h3 className="mb-2 text-sm font-medium">
                   {t("traffic.uniqueIps", { count: stats.unique_ips.length })}
                 </h3>
-                <FadingScrollArea className="p-3 max-h-[clamp(120px,15vh,240px)]">
+                <FadingScrollArea className="max-h-[clamp(120px,15vh,240px)] p-3">
                   <div className="flex flex-wrap gap-1.5">
                     {stats.unique_ips.map((ip) => (
                       <span
                         key={ip}
-                        className="text-xs bg-muted px-2 py-1 rounded font-mono"
+                        className="rounded bg-muted px-2 py-1 font-mono text-xs"
                       >
                         {ip}
                       </span>
@@ -608,9 +608,9 @@ export function TrafficDetailsDialog({
 
             {/* No data state */}
             {!stats && (
-              <div className="text-center py-8 text-muted-foreground">
+              <div className="py-8 text-center text-muted-foreground">
                 <p>{t("traffic.noData")}</p>
-                <p className="text-sm mt-1">{t("traffic.noDataHint")}</p>
+                <p className="mt-1 text-sm">{t("traffic.noDataHint")}</p>
               </div>
             )}
           </div>
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index fd125a5..0c300ae 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -4,13 +4,13 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
       },
     },
     defaultVariants: {
@@ -55,7 +55,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
         className,
       )}
       {...props}
diff --git a/src/components/ui/animated-switch.tsx b/src/components/ui/animated-switch.tsx
index 1cbe2f0..e4a4f6c 100644
--- a/src/components/ui/animated-switch.tsx
+++ b/src/components/ui/animated-switch.tsx
@@ -22,9 +22,9 @@ function AnimatedSwitch({ className, ...props }: AnimatedSwitchProps) {
       data-slot="animated-switch"
       className={cn(
         "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center justify-start rounded-full border border-transparent px-[2px]",
-        "bg-input data-[state=checked]:bg-primary data-[state=checked]:justify-end",
+        "bg-input data-[state=checked]:justify-end data-[state=checked]:bg-primary",
         "transition-colors duration-200 ease-out",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
diff --git a/src/components/ui/animated-tabs.tsx b/src/components/ui/animated-tabs.tsx
index 66553b7..5315621 100644
--- a/src/components/ui/animated-tabs.tsx
+++ b/src/components/ui/animated-tabs.tsx
@@ -78,7 +78,7 @@ function AnimatedTabsList({
     <TabsPrimitive.List
       data-slot="animated-tabs-list"
       className={cn(
-        "relative inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-md p-0 [scrollbar-width:none]",
+        "relative inline-flex max-w-full scrollbar-none items-center gap-1 overflow-x-auto rounded-md p-0",
         className,
       )}
       onMouseLeave={(event) => {
@@ -120,10 +120,10 @@ function AnimatedTabsTrigger({
         onMouseEnter?.(event);
       }}
       className={cn(
-        "relative isolate inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors duration-150",
+        "relative isolate inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap transition-colors duration-150",
         "text-muted-foreground hover:text-foreground",
         isActive && "text-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
         "disabled:pointer-events-none disabled:opacity-50",
         className,
       )}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 800bcda..39fe660 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -5,16 +5,16 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
         default:
           "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "border-transparent bg-secondary dark:bg-secondary/60 text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary text-secondary-foreground dark:bg-secondary/60 [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
         outline:
           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 49336e7..eb3f983 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,16 +5,16 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 9a3c965..11284ff 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -5,7 +5,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
         className,
       )}
       {...props}
@@ -40,7 +40,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index c4f1af3..85e27c2 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -61,7 +61,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video max-h-[min(45vh,20rem)] w-full justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video max-h-[min(45vh,20rem)] w-full justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -196,7 +196,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
@@ -213,7 +213,7 @@ const ChartTooltipContent = React.forwardRef<
                 <div
                   key={String(item.dataKey ?? index)}
                   className={cn(
-                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground",
                     indicator === "dot" && "items-center",
                   )}
                 >
@@ -258,7 +258,7 @@ const ChartTooltipContent = React.forwardRef<
                           </span>
                         </div>
                         {item.value && (
-                          <span className="font-mono font-medium tabular-nums text-foreground">
+                          <span className="font-mono font-medium text-foreground tabular-nums">
                             {item.value.toLocaleString()}
                           </span>
                         )}
@@ -314,7 +314,7 @@ const ChartLegendContent = React.forwardRef<
               <div
                 key={item.value}
                 className={cn(
-                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                  "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground",
                 )}
               >
                 {itemConfig?.icon && !hideIcon ? (
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 71a7bc9..6ae019f 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "cursor-pointer peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer size-4 shrink-0 cursor-pointer rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
         className,
       )}
       {...props}
diff --git a/src/components/ui/color-picker.tsx b/src/components/ui/color-picker.tsx
index 80831c0..82e9f8e 100644
--- a/src/components/ui/color-picker.tsx
+++ b/src/components/ui/color-picker.tsx
@@ -152,7 +152,7 @@ export const ColorPicker = ({
       }}
     >
       <div
-        className={cn("flex flex-col gap-4 size-full", className)}
+        className={cn("flex size-full flex-col gap-4", className)}
         {...props}
       >
         {children}
@@ -232,7 +232,7 @@ export const ColorPickerSelection = memo(
 
     return (
       <div
-        className={cn("relative rounded cursor-pointer size-full", className)}
+        className={cn("relative size-full cursor-pointer rounded", className)}
         onPointerDown={(e) => {
           e.preventDefault();
           setIsDragging(true);
@@ -245,7 +245,7 @@ export const ColorPickerSelection = memo(
         {...props}
       >
         <div
-          className="absolute size-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+          className="pointer-events-none absolute size-4 -translate-1/2 rounded-full border-2 border-white"
           style={{
             left: `${positionX * 100}%`,
             top: `${positionY * 100}%`,
@@ -269,7 +269,7 @@ export const ColorPickerHue = ({
 
   return (
     <Slider.Root
-      className={cn("flex relative w-full h-4 touch-none", className)}
+      className={cn("relative flex h-4 w-full touch-none", className)}
       max={360}
       onValueChange={([hue]) => {
         setHue(hue);
@@ -281,7 +281,7 @@ export const ColorPickerHue = ({
       <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
         <Slider.Range className="absolute h-full" />
       </Slider.Track>
-      <Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      <Slider.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
     </Slider.Root>
   );
 };
@@ -296,7 +296,7 @@ export const ColorPickerAlpha = ({
 
   return (
     <Slider.Root
-      className={cn("flex relative w-full h-4 touch-none", className)}
+      className={cn("relative flex h-4 w-full touch-none", className)}
       max={100}
       onValueChange={([alpha]) => {
         setAlpha(alpha);
@@ -312,10 +312,10 @@ export const ColorPickerAlpha = ({
             'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
         }}
       >
-        <div className="absolute inset-0 bg-linear-to-r from-transparent rounded-full to-black/50" />
-        <Slider.Range className="absolute h-full bg-transparent rounded-full" />
+        <div className="absolute inset-0 rounded-full bg-linear-to-r from-transparent to-black/50" />
+        <Slider.Range className="absolute h-full rounded-full bg-transparent" />
       </Slider.Track>
-      <Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      <Slider.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
     </Slider.Root>
   );
 };
@@ -372,7 +372,7 @@ export const ColorPickerOutput = ({
 
   return (
     <Select onValueChange={setMode} value={mode}>
-      <SelectTrigger className="w-20 h-8 text-xs shrink-0" {...props}>
+      <SelectTrigger className="h-8 w-20 shrink-0 text-xs" {...props}>
         <SelectValue placeholder={t("common.labels.mode")} />
       </SelectTrigger>
       <SelectContent>
@@ -396,11 +396,11 @@ const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
         type="text"
         {...props}
         className={cn(
-          "h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none",
+          "h-8 w-13 rounded-l-none bg-secondary px-2 text-xs shadow-none",
           className,
         )}
       />
-      <span className="absolute right-2 top-1/2 text-xs -translate-y-1/2 text-muted-foreground">
+      <span className="absolute top-1/2 right-2 -translate-y-1/2 text-xs text-muted-foreground">
         %
       </span>
     </div>
@@ -422,13 +422,13 @@ export const ColorPickerFormat = ({
     return (
       <div
         className={cn(
-          "flex relative items-center -space-x-px w-full rounded-md shadow-sm",
+          "relative flex w-full items-center -space-x-px rounded-md shadow-sm",
           className,
         )}
         {...props}
       >
         <Input
-          className="px-2 h-8 text-xs rounded-r-none shadow-none bg-secondary"
+          className="h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none"
           readOnly
           type="text"
           value={hex}
@@ -479,7 +479,7 @@ export const ColorPickerFormat = ({
     return (
       <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
         <Input
-          className="px-2 w-full h-8 text-xs shadow-none bg-secondary"
+          className="h-8 w-full bg-secondary px-2 text-xs shadow-none"
           readOnly
           type="text"
           value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 8d20bd9..f02e3a3 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -22,7 +22,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className,
       )}
       {...props}
@@ -57,7 +57,7 @@ function CommandDialog({
         <Command
           filter={filter}
           shouldFilter={shouldFilter}
-          className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+          className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]_svg]:size-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3"
         >
           {children}
         </Command>
@@ -79,7 +79,7 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
@@ -124,7 +124,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-x-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "overflow-x-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -139,7 +139,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   );
@@ -153,7 +153,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -169,7 +169,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index c6d9e11..e300dfa 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -258,14 +258,14 @@ function DialogContent({
             // w-[calc(100%-2rem)] (not w-full + max-w) keeps the 1rem window
             // gutter even when callers override max-w-*: tailwind-merge drops
             // a base max-w in favor of the caller's, but leaves width alone.
-            "bg-background fixed top-[50%] left-[50%] z-10000 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg max-h-[calc(100vh-3rem)] overflow-y-auto",
+            "fixed top-[50%] left-[50%] z-10000 grid max-h-[calc(100vh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-[50%] gap-4 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg",
             className,
           )}
           {...props}
         >
           {children}
           {!hideClose && dismissible && (
-            <DialogPrimitive.Close className="cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <DialogPrimitive.Close className="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
               <RxCross2 />
               <span className="sr-only">{t("common.buttons.close")}</span>
             </DialogPrimitive.Close>
@@ -286,7 +286,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-left pr-8", className)}
+      className={cn("flex flex-col gap-2 pr-8 text-left", className)}
       {...props}
     />
   );
@@ -297,7 +297,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-row flex-wrap justify-end gap-2 shrink-0",
+        "flex shrink-0 flex-row flex-wrap justify-end gap-2",
         className,
       )}
       {...props}
@@ -312,7 +312,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg font-semibold leading-none", className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 8326290..14332e7 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-[50000] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "z-50000 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className,
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "cursor-pointer focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className,
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
         className,
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   );
@@ -184,7 +184,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className,
       )}
       {...props}
@@ -232,7 +232,7 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       collisionPadding={collisionPadding}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-[50000] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-md border p-1 shadow-lg",
+        "z-50000 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className,
       )}
       {...props}
diff --git a/src/components/ui/fading-scroll-area.tsx b/src/components/ui/fading-scroll-area.tsx
index 05e71db..2e59417 100644
--- a/src/components/ui/fading-scroll-area.tsx
+++ b/src/components/ui/fading-scroll-area.tsx
@@ -9,7 +9,7 @@ export type FadingScrollAreaProps = HTMLAttributes<HTMLDivElement>;
 /**
  * Scrollable container with top/bottom fade overlays. The fades only become
  * visible when the matching direction is actually scrollable. Use in place
- * of `<div className="border rounded-md max-h-[...] overflow-auto">` for
+ * of `<div className="max-h-[...] overflow-auto rounded-md border">` for
  * lists that should match the borderless aesthetic of the profile table.
  */
 export function FadingScrollArea({
@@ -23,7 +23,7 @@ export function FadingScrollArea({
   return (
     <div
       ref={ref}
-      className={cn("overflow-y-auto scroll-fade", className)}
+      className={cn("scroll-fade overflow-y-auto", className)}
       {...props}
     >
       {children}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index cb0e803..68bcd08 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 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:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 6b89867..e79247f 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -32,7 +32,7 @@ function PopoverContent({
         sideOffset={sideOffset}
         collisionPadding={collisionPadding}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-[50000] max-h-(--radix-popover-content-available-height) origin-(--radix-popover-content-transform-origin) overflow-y-auto rounded-md border p-4 shadow-md outline-hidden",
+          "z-50000 max-h-(--radix-popover-content-available-height) origin-(--radix-popover-content-transform-origin) overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className,
         )}
         {...props}
diff --git a/src/components/ui/pro-badge.tsx b/src/components/ui/pro-badge.tsx
index 4c03381..5cd6cc3 100644
--- a/src/components/ui/pro-badge.tsx
+++ b/src/components/ui/pro-badge.tsx
@@ -4,7 +4,7 @@ export function ProBadge({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        "text-[10px] font-semibold px-1 py-0.5 rounded bg-primary text-primary-foreground",
+        "rounded bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground",
         className,
       )}
     >
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index d00d550..696f875 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -14,14 +14,14 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         className,
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
+        className="size-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index c024348..7e67ac7 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "cursor-pointer aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square size-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/src/components/ui/ripple.tsx b/src/components/ui/ripple.tsx
index a722f15..a9c0a31 100644
--- a/src/components/ui/ripple.tsx
+++ b/src/components/ui/ripple.tsx
@@ -7,15 +7,15 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-9 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-11 px-8 has-[>svg]:px-6",
         icon: "size-10",
       },
@@ -35,7 +35,7 @@ const buttonVariants = cva(
   },
 );
 
-const rippleVariants = cva("absolute rounded-full size-5 pointer-events-none", {
+const rippleVariants = cva("pointer-events-none absolute size-5 rounded-full", {
   variants: {
     variant: {
       default: "bg-primary-foreground",
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 554e349..9bc7b07 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -49,7 +49,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   );
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 4440c26..3968b27 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "cursor-pointer border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -61,7 +61,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-[50000] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "relative z-50000 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
@@ -74,7 +74,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
           )}
         >
           {children}
@@ -92,7 +92,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   );
@@ -107,7 +107,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "cursor-pointer focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
@@ -129,7 +129,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 7f7909b..4feb5d8 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -9,7 +9,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      className="group toaster"
       style={
         {
           "--normal-bg": "var(--card)",
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index d5d9f57..460ffe7 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -16,7 +16,7 @@ function Table({
     >
       <table
         data-slot="table"
-        className={cn("w-full text-sm caption-bottom", className)}
+        className={cn("w-full caption-bottom text-sm", className)}
         {...props}
       />
     </div>
@@ -48,7 +48,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className,
       )}
       {...props}
@@ -61,7 +61,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className,
       )}
       {...props}
@@ -74,7 +74,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "px-2 h-8 font-medium text-left align-middle whitespace-nowrap text-foreground",
+        "h-8 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground",
         className,
       )}
       {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 67bf0f6..6572f68 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -78,7 +78,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     data-slot="tabs-list"
     className={cn(
-      "inline-flex h-10 max-w-full items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground [scrollbar-width:none]",
+      "inline-flex h-10 max-w-full scrollbar-none items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -104,7 +104,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     data-slot="tabs-trigger"
     className={cn(
-      "cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex cursor-pointer items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -134,7 +134,7 @@ function TabsContent({
           exit={{ opacity: 0, filter: "blur(4px)" }}
           transition={transition}
           className={cn(
-            "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
             className,
           )}
           {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 7de5c4a..6d5cec6 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index ef440e8..202489c 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -51,14 +51,14 @@ function TooltipContent({
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-[50000] w-fit max-w-[min(24rem,calc(100vw-2rem))] origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "z-50000 w-fit max-w-[min(24rem,calc(100vw-2rem))] origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground fade-in-0 zoom-in-95 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className,
         )}
         {...props}
       >
         {children}
         <TooltipPrimitive.Arrow
-          className="fill-primary z-[50000]"
+          className="z-50000 fill-primary"
           style={
             arrowOffset !== 0
               ? { transform: `translateX(${-arrowOffset}px)` }
diff --git a/src/components/vpn-check-button.tsx b/src/components/vpn-check-button.tsx
index 490b9da..bc1fc60 100644
--- a/src/components/vpn-check-button.tsx
+++ b/src/components/vpn-check-button.tsx
@@ -75,11 +75,11 @@ export function VpnCheckButton({
           disabled={isCurrentlyChecking || disabled}
         >
           {isCurrentlyChecking ? (
-            <div className="size-3 rounded-full border border-current animate-spin border-t-transparent" />
+            <div className="size-3 animate-spin rounded-full border border-current border-t-transparent" />
           ) : result?.is_valid ? (
             <FiCheck className="size-3 text-success" />
           ) : result && !result.is_valid ? (
-            <span className="text-destructive text-sm">✕</span>
+            <span className="text-sm text-destructive">✕</span>
           ) : (
             <FiCheck className="size-3" />
           )}
diff --git a/src/components/vpn-import-dialog.tsx b/src/components/vpn-import-dialog.tsx
index debc3e4..fc4ae7b 100644
--- a/src/components/vpn-import-dialog.tsx
+++ b/src/components/vpn-import-dialog.tsx
@@ -219,8 +219,8 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
                 }
               }}
             >
-              <LuUpload className="size-10 text-muted-foreground mb-4" />
-              <p className="text-sm text-muted-foreground text-center">
+              <LuUpload className="mb-4 size-10 text-muted-foreground" />
+              <p className="text-center text-sm text-muted-foreground">
                 {t("vpns.import.dropzonePrompt")}
               </p>
               <input
@@ -235,7 +235,7 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
                 }}
               />
             </div>
-            <p className="text-xs text-muted-foreground text-center">
+            <p className="text-center text-xs text-muted-foreground">
               {t("vpns.import.pasteHint", { modKey })}
             </p>
           </div>
@@ -243,7 +243,7 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
 
         {step === "vpn-preview" && vpnPreview && (
           <div className="space-y-4">
-            <div className="flex items-center gap-3 p-4 bg-muted/30 rounded-lg">
+            <div className="flex items-center gap-3 rounded-lg bg-muted/30 p-4">
               <LuShield className="size-8 text-primary" />
               <div>
                 <div className="font-medium">
@@ -275,8 +275,8 @@ export function VpnImportDialog({ isOpen, onClose }: VpnImportDialogProps) {
 
             <div className="space-y-2">
               <Label>{t("vpns.import.configPreview")}</Label>
-              <ScrollArea className="h-[min(150px,25vh)] border rounded-md">
-                <pre className="p-2 text-xs font-mono whitespace-pre-wrap break-all">
+              <ScrollArea className="h-[min(150px,25vh)] rounded-md border">
+                <pre className="p-2 font-mono text-xs break-all whitespace-pre-wrap">
                   {vpnPreview.content.slice(0, 1000)}
                   {vpnPreview.content.length > 1000 && "..."}
                 </pre>
diff --git a/src/components/wayfern-config-form.tsx b/src/components/wayfern-config-form.tsx
index 31827d5..555ab28 100644
--- a/src/components/wayfern-config-form.tsx
+++ b/src/components/wayfern-config-form.tsx
@@ -227,7 +227,7 @@ export function WayfernConfigForm({
       </div>
 
       {/* Randomize Fingerprint Option */}
-      <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+      <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
         <div className="flex items-center gap-x-2">
           <Checkbox
             id="randomize-fingerprint"
@@ -241,7 +241,7 @@ export function WayfernConfigForm({
             {t("fingerprint.generateRandomOnLaunch")}
           </Label>
         </div>
-        <p className="text-sm text-muted-foreground ml-6">
+        <p className="ml-6 text-sm text-muted-foreground">
           {t("fingerprint.generateRandomDescription")}
         </p>
       </div>
@@ -290,8 +290,8 @@ export function WayfernConfigForm({
           {/* User Agent and Platform */}
           <div className="space-y-3">
             <Label>{t("fingerprint.userAgentAndPlatform")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
-              <div className="space-y-2 col-span-full">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
+              <div className="col-span-full space-y-2">
                 <Label htmlFor="user-agent">{t("fingerprint.userAgent")}</Label>
                 <Input
                   id="user-agent"
@@ -381,7 +381,7 @@ export function WayfernConfigForm({
           {/* Hardware Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.hardwareProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="hardware-concurrency">
                   {t("fingerprint.hardwareConcurrency")}
@@ -439,7 +439,7 @@ export function WayfernConfigForm({
           {/* Screen Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.screenProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="screen-width">
                   {t("fingerprint.screenWidth")}
@@ -561,7 +561,7 @@ export function WayfernConfigForm({
           {/* Window Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.windowProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="window-outer-width">
                   {t("fingerprint.outerWidth")}
@@ -674,7 +674,7 @@ export function WayfernConfigForm({
           {/* Language & Locale */}
           <div className="space-y-3">
             <Label>{t("fingerprint.languageAndLocale")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="language">
                   {t("fingerprint.primaryLanguage")}
@@ -756,7 +756,7 @@ export function WayfernConfigForm({
             <p className="text-sm text-muted-foreground">
               {t("fingerprint.timezoneGeolocationDescription")}
             </p>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="timezone">
                   {t("fingerprint.timezoneIana")}
@@ -853,7 +853,7 @@ export function WayfernConfigForm({
           {/* WebGL Properties */}
           <div className="space-y-3">
             <Label>{t("fingerprint.webglProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="webgl-vendor">
                   {t("fingerprint.webglVendor")}
@@ -951,7 +951,7 @@ export function WayfernConfigForm({
           {/* Audio */}
           <div className="space-y-3">
             <Label>{t("fingerprint.audioProperties")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="audio-sample-rate">
                   {t("fingerprint.sampleRate")}
@@ -994,7 +994,7 @@ export function WayfernConfigForm({
           {/* Battery */}
           <div className="space-y-3">
             <Label>{t("fingerprint.battery")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <div className="flex items-center gap-x-2">
                   <Checkbox
@@ -1040,7 +1040,7 @@ export function WayfernConfigForm({
           {/* Vendor Info */}
           <div className="space-y-3">
             <Label>{t("fingerprint.vendorInfo")}</Label>
-            <div className="grid grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 @md:grid-cols-2 @2xl:grid-cols-3">
               <div className="space-y-2">
                 <Label htmlFor="vendor">{t("fingerprint.vendor")}</Label>
                 <Input
@@ -1094,12 +1094,12 @@ export function WayfernConfigForm({
         </fieldset>
         {limitedMode && (
           <>
-            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
-            <div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" />
-            <div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" />
-            <div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" />
-            <div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" />
-            <div className="absolute inset-0 flex items-center justify-center z-[3]">
+            <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
+            <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
+            <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
+            <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
+            <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
+            <div className="absolute inset-0 z-3 flex items-center justify-center">
               <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                 <ProBadge />
                 <span className="text-sm font-medium text-muted-foreground">
@@ -1123,7 +1123,7 @@ export function WayfernConfigForm({
           onValueChange={readOnly ? undefined : setActiveTab}
           className="w-full"
         >
-          <TabsList className="grid grid-cols-2 w-full">
+          <TabsList className="grid w-full grid-cols-2">
             <TabsTrigger value="automatic" disabled={readOnly}>
               {t("fingerprint.automatic")}
             </TabsTrigger>
@@ -1180,7 +1180,7 @@ export function WayfernConfigForm({
             </div>
 
             {/* Randomize Fingerprint Option */}
-            <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+            <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
               <div className="flex items-center gap-x-2">
                 <Checkbox
                   id="randomize-fingerprint-auto"
@@ -1197,7 +1197,7 @@ export function WayfernConfigForm({
                   {t("fingerprint.generateRandomOnLaunch")}
                 </Label>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-sm text-muted-foreground">
                 {t("fingerprint.generateRandomDescription")}
               </p>
             </div>
@@ -1228,7 +1228,7 @@ export function WayfernConfigForm({
                 className="space-y-3"
               >
                 <Label>{t("fingerprint.screenResolution")}</Label>
-                <div className="grid grid-cols-1 @md:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 @md:grid-cols-2">
                   <div className="space-y-2">
                     <Label htmlFor="screen-max-width">
                       {t("fingerprint.maxWidth")}
@@ -1317,12 +1317,12 @@ export function WayfernConfigForm({
               </fieldset>
               {limitedMode && (
                 <>
-                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
-                  <div className="absolute inset-y-0 left-0 w-6 bg-linear-to-r from-background to-transparent z-[2]" />
-                  <div className="absolute inset-y-0 right-0 w-6 bg-linear-to-l from-background to-transparent z-[2]" />
-                  <div className="absolute inset-x-0 top-0 h-6 bg-linear-to-b from-background to-transparent z-[2]" />
-                  <div className="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background to-transparent z-[2]" />
-                  <div className="absolute inset-0 flex items-center justify-center z-[3]">
+                  <div className="absolute inset-0 z-1 bg-background/30 backdrop-blur-[6px]" />
+                  <div className="absolute inset-y-0 left-0 z-2 w-6 bg-linear-to-r from-background to-transparent" />
+                  <div className="absolute inset-y-0 right-0 z-2 w-6 bg-linear-to-l from-background to-transparent" />
+                  <div className="absolute inset-x-0 top-0 z-2 h-6 bg-linear-to-b from-background to-transparent" />
+                  <div className="absolute inset-x-0 bottom-0 z-2 h-6 bg-linear-to-t from-background to-transparent" />
+                  <div className="absolute inset-0 z-3 flex items-center justify-center">
                     <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                       <ProBadge />
                       <span className="text-sm font-medium text-muted-foreground">
diff --git a/src/components/wayfern-terms-dialog.tsx b/src/components/wayfern-terms-dialog.tsx
index 60c74ca..e2a6d0f 100644
--- a/src/components/wayfern-terms-dialog.tsx
+++ b/src/components/wayfern-terms-dialog.tsx
@@ -70,7 +70,7 @@ export function WayfernTermsDialog({
             href="https://wayfern.com/tos"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-primary hover:underline text-sm font-medium block"
+            className="block text-sm font-medium text-primary hover:underline"
           >
             https://wayfern.com/tos
           </a>
diff --git a/src/components/welcome-dialog.tsx b/src/components/welcome-dialog.tsx
index 3cb8ffd..0b86aef 100644
--- a/src/components/welcome-dialog.tsx
+++ b/src/components/welcome-dialog.tsx
@@ -214,7 +214,7 @@ export function WelcomeDialog({
                 <h2 className="text-2xl font-semibold tracking-tight text-balance">
                   {t("welcome.license.title")}
                 </h2>
-                <p className="mx-auto max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground">
+                <p className="mx-auto max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
                   {t("welcome.license.body")}
                 </p>
               </div>
@@ -286,7 +286,7 @@ export function WelcomeDialog({
                   <LuMic className="size-5 shrink-0" />
                   {t("welcome.permissions.title")}
                 </h2>
-                <p className="mx-auto max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground">
+                <p className="mx-auto max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
                   {t("welcome.permissions.desc")}
                 </p>
               </div>
@@ -337,7 +337,7 @@ export function WelcomeDialog({
                       <LuTriangleAlert className="size-5 shrink-0" />
                       {t("welcome.ready.errorTitle")}
                     </h2>
-                    <p className="max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground">
+                    <p className="max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
                       {setup.error?.stage === "downloading"
                         ? t("welcome.ready.errorDownload", {
                             browser: browserName,
@@ -371,7 +371,7 @@ export function WelcomeDialog({
                     <h2 className="text-2xl font-semibold tracking-tight text-balance">
                       {t("welcome.ready.title")}
                     </h2>
-                    <p className="max-w-[55ch] text-sm leading-6 text-pretty text-muted-foreground">
+                    <p className="max-w-[55ch] text-sm/6 text-pretty text-muted-foreground">
                       {setup.phase === "ready"
                         ? t("welcome.ready.descReady")
                         : setup.phase === "extracting"
@@ -396,14 +396,14 @@ export function WelcomeDialog({
                           }}
                         />
                       </div>
-                      <div className="flex items-center justify-between text-sm tabular-nums text-muted-foreground">
+                      <div className="flex items-center justify-between text-sm text-muted-foreground tabular-nums">
                         <span className="inline-flex items-center gap-1.5">
                           <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
                           {t("welcome.ready.downloading")}
                         </span>
                         <span>{setup.downloadPercent}%</span>
                       </div>
-                      <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-0.5 text-xs tabular-nums text-muted-foreground">
+                      <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground tabular-nums">
                         <span>
                           {setup.totalBytes != null
                             ? t("welcome.ready.stats", {
@@ -435,7 +435,7 @@ export function WelcomeDialog({
                   {setup.phase === "extracting" && (
                     <div className="flex w-full max-w-xs flex-col gap-2">
                       {setup.extractionOvertime ? (
-                        <div className="flex items-center justify-center gap-1.5 text-sm tabular-nums text-muted-foreground">
+                        <div className="flex items-center justify-center gap-1.5 text-sm text-muted-foreground tabular-nums">
                           <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
                           {t("welcome.ready.almostFinished")}
                         </div>
@@ -455,7 +455,7 @@ export function WelcomeDialog({
                               }}
                             />
                           </div>
-                          <div className="flex items-center justify-between text-sm tabular-nums text-muted-foreground">
+                          <div className="flex items-center justify-between text-sm text-muted-foreground tabular-nums">
                             <span className="inline-flex items-center gap-1.5">
                               <LuLoaderCircle className="size-4 shrink-0 animate-spin" />
                               {t("welcome.ready.extracting")}
diff --git a/src/components/window-drag-area.tsx b/src/components/window-drag-area.tsx
index ea44b28..80d7d3e 100644
--- a/src/components/window-drag-area.tsx
+++ b/src/components/window-drag-area.tsx
@@ -109,7 +109,7 @@ export function WindowDragArea() {
 
   return (
     <div
-      className="fixed top-0 right-0 z-50 flex items-center h-11 select-none"
+      className="fixed top-0 right-0 z-50 flex h-11 items-center select-none"
       aria-hidden="false"
     >
       <button
@@ -117,7 +117,7 @@ export function WindowDragArea() {
         onClick={() => {
           void handleMinimize();
         }}
-        className="flex items-center justify-center w-11 h-full hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground"
+        className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
         aria-label={t("common.window.minimize")}
       >
         <svg
@@ -136,7 +136,7 @@ export function WindowDragArea() {
         onClick={() => {
           void handleToggleMaximize();
         }}
-        className="flex items-center justify-center w-11 h-full hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground"
+        className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
         aria-label={
           isMaximized ? t("common.window.restore") : t("common.window.maximize")
         }
@@ -175,7 +175,7 @@ export function WindowDragArea() {
         onClick={() => {
           void handleClose();
         }}
-        className="flex items-center justify-center w-11 h-full hover:bg-destructive/90 transition-colors text-muted-foreground hover:text-destructive-foreground"
+        className="flex h-full w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-destructive/90 hover:text-destructive-foreground"
         aria-label={t("common.buttons.close")}
       >
         <svg