diff --git a/client/components/BillMerchantRules.tsx b/client/components/BillMerchantRules.tsx
index 8292919..acc05af 100644
--- a/client/components/BillMerchantRules.tsx
+++ b/client/components/BillMerchantRules.tsx
@@ -77,7 +77,7 @@ function RuleChip({
       <div className="flex items-center gap-1.5 min-w-0">
         <Tag className="h-3 w-3 shrink-0 text-primary" />
         <span
-          className="text-xs font-medium text-foreground truncate max-w-[10rem]"
+          className="text-xs font-medium text-foreground truncate max-w-40"
           title={rule.merchant}
         >
           {rule.merchant}
diff --git a/client/components/CalendarFeedManager.tsx b/client/components/CalendarFeedManager.tsx
index ff547e3..15f8826 100644
--- a/client/components/CalendarFeedManager.tsx
+++ b/client/components/CalendarFeedManager.tsx
@@ -177,7 +177,7 @@ export function CalendarFeedManager({
 
       {!loading && active && (
         <>
-          <div className="rounded-lg border border-amber-500/25 bg-amber-500/[0.08] px-3 py-2 text-xs leading-5 text-amber-800 dark:text-amber-200">
+          <div className="rounded-lg border border-amber-500/25 bg-amber-500/8 px-3 py-2 text-xs leading-5 text-amber-800 dark:text-amber-200">
             Anyone with this URL can see the bill events in this feed. Regenerate or revoke it if it
             was shared somewhere it should not be.
           </div>
diff --git a/client/components/ReleaseNotesDialog.tsx b/client/components/ReleaseNotesDialog.tsx
index c1b0b05..bab7119 100644
--- a/client/components/ReleaseNotesDialog.tsx
+++ b/client/components/ReleaseNotesDialog.tsx
@@ -75,7 +75,7 @@ export function ReleaseNotesDialog() {
                 src={RELEASE_NOTES.image.src}
                 alt={RELEASE_NOTES.image.alt}
                 loading="lazy"
-                className="aspect-[16/10] w-full object-contain"
+                className="aspect-16/10 w-full object-contain"
               />
             </div>
           </figure>
diff --git a/client/components/admin/OnboardingWizard.tsx b/client/components/admin/OnboardingWizard.tsx
index eb9f81b..1664941 100644
--- a/client/components/admin/OnboardingWizard.tsx
+++ b/client/components/admin/OnboardingWizard.tsx
@@ -86,7 +86,7 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
       <div className="mx-auto grid min-h-[calc(100vh-64px-5rem)] w-full max-w-5xl items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(23rem,28rem)]">
         <section className="space-y-6">
           <div className="max-w-xl">
-            <BrandMark className="h-auto w-[15rem] drop-shadow-[0_14px_36px_rgba(0,0,0,0.18)]" />
+            <BrandMark className="h-auto w-60 drop-shadow-[0_14px_36px_rgba(0,0,0,0.18)]" />
             <h1 className="mt-6 text-3xl font-semibold tracking-tight sm:text-4xl">
               Set up {BRAND.name} with a clean privacy line.
             </h1>
diff --git a/client/components/bill-modal/PaymentHistoryList.tsx b/client/components/bill-modal/PaymentHistoryList.tsx
index 63e625b..99d6f28 100644
--- a/client/components/bill-modal/PaymentHistoryList.tsx
+++ b/client/components/bill-modal/PaymentHistoryList.tsx
@@ -99,7 +99,7 @@ export default function PaymentHistoryList({
                 className={cn(
                   'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5',
                   historyOnly
-                    ? 'border-amber-500/25 bg-amber-500/[0.06] opacity-85'
+                    ? 'border-amber-500/25 bg-amber-500/6 opacity-85'
                     : 'border-border/60 bg-background/35',
                 )}
               >
diff --git a/client/components/data/DownloadMyDataSection.tsx b/client/components/data/DownloadMyDataSection.tsx
index 50be9c9..9b001fc 100644
--- a/client/components/data/DownloadMyDataSection.tsx
+++ b/client/components/data/DownloadMyDataSection.tsx
@@ -79,11 +79,11 @@ function PaymentsExport() {
         <div className="mt-3 flex flex-wrap items-end gap-3">
           <div>
             <Label htmlFor="pe-from" className="text-xs">From</Label>
-            <Input id="pe-from" type="date" value={from} onChange={e => setFrom(e.target.value)} className="mt-1 h-9 w-[9.5rem]" />
+            <Input id="pe-from" type="date" value={from} onChange={e => setFrom(e.target.value)} className="mt-1 h-9 w-38" />
           </div>
           <div>
             <Label htmlFor="pe-to" className="text-xs">To</Label>
-            <Input id="pe-to" type="date" value={to} onChange={e => setTo(e.target.value)} className="mt-1 h-9 w-[9.5rem]" />
+            <Input id="pe-to" type="date" value={to} onChange={e => setTo(e.target.value)} className="mt-1 h-9 w-38" />
           </div>
           <div>
             <span className="block text-xs text-muted-foreground">Format</span>
diff --git a/client/components/data/TransactionMatchingSection.tsx b/client/components/data/TransactionMatchingSection.tsx
index f9e449e..00a3885 100644
--- a/client/components/data/TransactionMatchingSection.tsx
+++ b/client/components/data/TransactionMatchingSection.tsx
@@ -140,7 +140,7 @@ function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onRej
                   </p>
                 </div>
 
-                <div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/[0.045] px-2.5 py-2">
+                <div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/4.5 px-2.5 py-2">
                   <Link2 className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
                   <div className="min-w-0">
                     <p className="truncate text-sm font-medium">{bill.name || `Bill ${suggestion.billId}`}</p>
diff --git a/client/components/layout/BrandBlock.tsx b/client/components/layout/BrandBlock.tsx
index 7884d5b..55b4326 100644
--- a/client/components/layout/BrandBlock.tsx
+++ b/client/components/layout/BrandBlock.tsx
@@ -14,13 +14,13 @@ export const BrandBlock = React.memo(function BrandBlock({
       aria-label={BRAND.name}
       className="group flex min-w-0 items-center gap-3 rounded-2xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
     >
-      <BrandMark className="h-12 w-auto max-w-[6.75rem] drop-shadow-[0_1px_2px_rgba(0,0,0,0.24)] transition-transform duration-200 group-hover:scale-[1.015]" />
+      <BrandMark className="h-12 w-auto max-w-27 drop-shadow-[0_1px_2px_rgba(0,0,0,0.24)] transition-transform duration-200 group-hover:scale-[1.015]" />
       <BrandWordmark className="sr-only" />
       <span className="hidden min-w-0 flex-col leading-none xl:flex">
         <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/80">
           {adminMode ? 'Admin workspace' : 'Home workspace'}
         </span>
-        <span className="mt-1 max-w-[12rem] truncate text-xs text-muted-foreground">
+        <span className="mt-1 max-w-48 truncate text-xs text-muted-foreground">
           {adminMode ? 'System care and access' : 'Bills, timing, and clarity'}
         </span>
       </span>
diff --git a/client/components/layout/NavPill.tsx b/client/components/layout/NavPill.tsx
index d29db2b..d7520fb 100644
--- a/client/components/layout/NavPill.tsx
+++ b/client/components/layout/NavPill.tsx
@@ -50,7 +50,7 @@ export const NavPill = React.memo(function NavPill({
         <TooltipProvider delayDuration={300}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="ml-0.5 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
+              <span className="ml-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
                 {badge > 99 ? '99+' : badge}
               </span>
             </TooltipTrigger>
diff --git a/client/components/layout/Sidebar.tsx b/client/components/layout/Sidebar.tsx
index 344ab3a..70c40bc 100644
--- a/client/components/layout/Sidebar.tsx
+++ b/client/components/layout/Sidebar.tsx
@@ -124,7 +124,7 @@ function TrackerMenu({
             <TooltipProvider delayDuration={300}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
+                  <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
                     {badge > 99 ? '99+' : badge}
                   </span>
                 </TooltipTrigger>
@@ -309,8 +309,8 @@ export default function Sidebar({
   }, [adminMode]);
 
   return (
-    <header className="sticky top-0 z-40 border-b border-border/65 bg-card/90 shadow-sm shadow-black/10 backdrop-blur-xl supports-[backdrop-filter]:bg-card/82">
-      <div className="mx-auto flex h-[4.5rem] w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-40 border-b border-border/65 bg-card/90 shadow-sm shadow-black/10 backdrop-blur-xl supports-backdrop-filter:bg-card/82">
+      <div className="mx-auto flex h-18 w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
         <BrandBlock adminMode={adminMode} />
 
         <nav
diff --git a/client/components/snowball/PlanHistoryPanel.tsx b/client/components/snowball/PlanHistoryPanel.tsx
index 143614f..40bef9a 100644
--- a/client/components/snowball/PlanHistoryPanel.tsx
+++ b/client/components/snowball/PlanHistoryPanel.tsx
@@ -148,7 +148,7 @@ function PlanDetail({ plan }: { plan: SnowballPlan }) {
       {/* Per-debt snapshot table */}
       {debts.length > 0 && (
         <div className="space-y-1.5">
-          <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-muted-foreground/50">
+          <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50">
             Debt snapshot at start of plan
           </p>
           <div className="rounded-lg border border-border/50 overflow-hidden">
diff --git a/client/components/snowball/PlanStatusBanner.tsx b/client/components/snowball/PlanStatusBanner.tsx
index ba900f8..b0d4af5 100644
--- a/client/components/snowball/PlanStatusBanner.tsx
+++ b/client/components/snowball/PlanStatusBanner.tsx
@@ -213,7 +213,7 @@ export default function PlanStatusBanner({
   return (
     <>
       <Collapsible open={open} onOpenChange={setOpen}>
-        <div className="mb-4 rounded-xl border border-emerald-400/25 bg-emerald-500/[0.05] dark:bg-emerald-400/[0.04] shadow-sm overflow-hidden">
+        <div className="mb-4 rounded-xl border border-emerald-400/25 bg-emerald-500/5 dark:bg-emerald-400/4 shadow-sm overflow-hidden">
           {/* Header row. The name/progress area and the chevron are the collapsible
               toggles; the action buttons are siblings (not nested inside a trigger
               button) so they don't trip axe nested-interactive (a11y QA-B14-02). */}
diff --git a/client/components/tracker/CashFlowCard.tsx b/client/components/tracker/CashFlowCard.tsx
index 52f0c73..c8460ac 100644
--- a/client/components/tracker/CashFlowCard.tsx
+++ b/client/components/tracker/CashFlowCard.tsx
@@ -222,14 +222,14 @@ export default function CashFlowCard({
     >
       <div
         className={cn(
-          'absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r',
+          'absolute top-0 left-0 right-0 h-[3px] bg-linear-to-r',
           positive
             ? 'from-emerald-500 via-teal-400 to-emerald-300'
             : 'from-rose-500 via-rose-400 to-orange-300',
         )}
       />
 
-      <div className="grid gap-5 px-5 py-4 md:grid-cols-[200px,minmax(0,1fr),220px] md:items-center">
+      <div className="grid gap-5 px-5 py-4 md:grid-cols-[200px_minmax(0,1fr)_220px] md:items-center">
         {/* ── Number ── */}
         <div>
           <div className="mb-2 flex items-center gap-2">
diff --git a/client/components/tracker/DriftInsightPanel.tsx b/client/components/tracker/DriftInsightPanel.tsx
index 04c824e..885e830 100644
--- a/client/components/tracker/DriftInsightPanel.tsx
+++ b/client/components/tracker/DriftInsightPanel.tsx
@@ -120,8 +120,8 @@ function DriftRow({ row, refresh }: { row: DriftBill; refresh: () => void }) {
           className={cn(
             'h-7 gap-1.5 px-2.5 text-xs',
             isUp
-              ? 'border-amber-400/40 text-amber-600 hover:border-amber-400/70 hover:bg-amber-500/[0.08] hover:text-amber-500 dark:text-amber-400'
-              : 'border-teal-400/40 text-teal-600 hover:border-teal-400/70 hover:bg-teal-500/[0.08] hover:text-teal-500 dark:text-teal-400',
+              ? 'border-amber-400/40 text-amber-600 hover:border-amber-400/70 hover:bg-amber-500/8 hover:text-amber-500 dark:text-amber-400'
+              : 'border-teal-400/40 text-teal-600 hover:border-teal-400/70 hover:bg-teal-500/8 hover:text-teal-500 dark:text-teal-400',
           )}
           disabled={loading}
           onClick={handleUpdate}
@@ -182,7 +182,7 @@ export default function DriftInsightPanel({
 
   return (
     <Collapsible open={isOpen} onOpenChange={setOpen}>
-      <div className="rounded-xl border border-amber-400/30 bg-amber-500/[0.06] shadow-sm overflow-hidden dark:bg-amber-400/[0.05]">
+      <div className="rounded-xl border border-amber-400/30 bg-amber-500/6 shadow-sm overflow-hidden dark:bg-amber-400/5">
         {/* Header */}
         <div className="flex items-center gap-2 px-4 py-3">
           <CollapsibleTrigger asChild>
diff --git a/client/components/tracker/OverdueCommandCenter.tsx b/client/components/tracker/OverdueCommandCenter.tsx
index 7c3ca63..fbfc29c 100644
--- a/client/components/tracker/OverdueCommandCenter.tsx
+++ b/client/components/tracker/OverdueCommandCenter.tsx
@@ -226,7 +226,7 @@ export default function OverdueCommandCenter({
 
   return (
     <Collapsible open={isOpen} onOpenChange={setOpen}>
-      <div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/[0.055] dark:border-amber-300/25 dark:bg-amber-400/[0.05]">
+      <div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/5.5 dark:border-amber-300/25 dark:bg-amber-400/5">
         {/* Header */}
         <div className="flex items-center gap-2 px-3 py-3 sm:px-4">
           <CollapsibleTrigger asChild>
diff --git a/client/components/tracker/TrackerBucket.tsx b/client/components/tracker/TrackerBucket.tsx
index e738e52..f348287 100644
--- a/client/components/tracker/TrackerBucket.tsx
+++ b/client/components/tracker/TrackerBucket.tsx
@@ -282,7 +282,7 @@ export function TrackerBucket({
               </span>
             )}
           </div>
-          <div className="flex min-w-[7rem] items-center gap-2">
+          <div className="flex min-w-28 items-center gap-2">
             <div className="h-1.5 w-16 overflow-hidden rounded-full bg-border sm:w-24">
               <div
                 className={cn(
diff --git a/client/components/tracker/TrackerRow.tsx b/client/components/tracker/TrackerRow.tsx
index 8734636..8d4c4f2 100644
--- a/client/components/tracker/TrackerRow.tsx
+++ b/client/components/tracker/TrackerRow.tsx
@@ -549,7 +549,7 @@ export function TrackerRow({
                     setEditingDue(false);
                   }
                 }}
-                className="tracker-number w-12 rounded border border-border bg-transparent px-1 py-0.5 text-sm font-medium text-foreground outline-none focus:ring-[2px] focus:ring-ring/50"
+                className="tracker-number w-12 rounded border border-border bg-transparent px-1 py-0.5 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring/50"
                 title="Day of month (1–31)"
               />
             ) : (
@@ -586,7 +586,7 @@ export function TrackerRow({
                     setEditingExpected(false);
                   }
                 }}
-                className="tracker-number mx-auto w-24 rounded border border-border bg-transparent px-1 py-0.5 text-center text-sm font-semibold text-foreground outline-none focus:ring-[2px] focus:ring-ring/50"
+                className="tracker-number mx-auto w-24 rounded border border-border bg-transparent px-1 py-0.5 text-center text-sm font-semibold text-foreground outline-none focus:ring-2 focus:ring-ring/50"
               />
             ) : effectiveActual != null ? (
               <button
@@ -679,7 +679,7 @@ export function TrackerRow({
             <PaymentProgress
               row={row}
               threshold={threshold}
-              className="mx-auto max-w-[7.5rem]"
+              className="mx-auto max-w-30"
               onOpen={() => setPaymentLedgerOpen(true)}
               onMarkFullAmount={!isSkipped ? handleMarkFullAmount : undefined}
             />
diff --git a/client/components/ui/app-primitives.tsx b/client/components/ui/app-primitives.tsx
index 1053b51..e444e05 100644
--- a/client/components/ui/app-primitives.tsx
+++ b/client/components/ui/app-primitives.tsx
@@ -9,8 +9,8 @@ type Tone = 'neutral' | 'good' | 'warn' | 'danger' | 'info';
 const toneClasses: Record<Tone, string> = {
   neutral: 'border-border/75 bg-card/95 text-muted-foreground',
   good: 'border-emerald-500/25 bg-emerald-500/[0.07] text-emerald-700 dark:text-emerald-300',
-  warn: 'border-amber-500/30 bg-amber-500/[0.08] text-amber-700 dark:text-amber-300',
-  danger: 'border-rose-500/30 bg-rose-500/[0.08] text-rose-700 dark:text-rose-300',
+  warn: 'border-amber-500/30 bg-amber-500/8 text-amber-700 dark:text-amber-300',
+  danger: 'border-rose-500/30 bg-rose-500/8 text-rose-700 dark:text-rose-300',
   info: 'border-sky-500/25 bg-sky-500/[0.07] text-sky-700 dark:text-sky-300',
 };
 
@@ -50,7 +50,7 @@ export function PageHeader({
       <div className="flex min-w-0 items-start gap-3">
         {glyph && <BrandGlyph name={glyph} className="mt-0.5 hidden sm:inline-block" />}
         {Icon && !glyph && (
-          <span className="mt-0.5 hidden h-10 w-10 shrink-0 place-items-center rounded-xl border border-primary/20 bg-primary/[0.08] text-primary shadow-sm shadow-primary/10 sm:grid">
+          <span className="mt-0.5 hidden h-10 w-10 shrink-0 place-items-center rounded-xl border border-primary/20 bg-primary/8 text-primary shadow-sm shadow-primary/10 sm:grid">
             <Icon className="h-5 w-5" />
           </span>
         )}
@@ -136,7 +136,7 @@ export function MetricCard({
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2">
           {Icon && (
-            <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-current/15 bg-current/[0.08] text-current">
+            <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-current/15 bg-current/8 text-current">
               <Icon className="h-3.5 w-3.5 opacity-90" />
             </span>
           )}
diff --git a/client/components/ui/dropdown-menu.tsx b/client/components/ui/dropdown-menu.tsx
index 9f86eb1..e616210 100644
--- a/client/components/ui/dropdown-menu.tsx
+++ b/client/components/ui/dropdown-menu.tsx
@@ -40,7 +40,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border/70 bg-popover/95 p-1 text-popover-foreground shadow-xl backdrop-blur-sm 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-50 min-w-32 overflow-hidden rounded-xl border border-border/70 bg-popover/95 p-1 text-popover-foreground shadow-xl backdrop-blur-sm 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',
         className,
       )}
       role="menu"
@@ -60,7 +60,7 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[10rem] overflow-hidden rounded-xl border border-border/70 bg-popover/95 p-1 text-popover-foreground shadow-xl backdrop-blur-sm 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-50 min-w-40 overflow-hidden rounded-xl border border-border/70 bg-popover/95 p-1 text-popover-foreground shadow-xl backdrop-blur-sm 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',
           className,
         )}
         role="menu"
@@ -80,7 +80,7 @@ function DropdownMenuItem({
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
         inset && 'pl-8',
         destructive && 'text-destructive focus:bg-destructive/10 focus:text-destructive',
         className,
@@ -100,7 +100,7 @@ function DropdownMenuCheckboxItem({
   return (
     <DropdownMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'relative flex cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
         className,
       )}
       role="menuitemcheckbox"
@@ -125,7 +125,7 @@ function DropdownMenuRadioItem({
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'relative flex cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
         className,
       )}
       role="menuitemradio"
diff --git a/client/components/ui/select.tsx b/client/components/ui/select.tsx
index 8599a5d..0cd21f7 100644
--- a/client/components/ui/select.tsx
+++ b/client/components/ui/select.tsx
@@ -76,7 +76,7 @@ function SelectContent({
       <SelectPrimitive.Content
         ref={ref}
         className={cn(
-          'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border/80 bg-popover/95 text-popover-foreground shadow-xl shadow-black/25 backdrop-blur-sm 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]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-xl border border-border/80 bg-popover/95 text-popover-foreground shadow-xl shadow-black/25 backdrop-blur-sm 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]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           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,
@@ -91,7 +91,7 @@ function SelectContent({
           className={cn(
             'p-1',
             position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
           )}
         >
           {children}
@@ -122,7 +122,7 @@ function SelectItem({
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm font-medium outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm font-medium outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
         className,
       )}
       role="option"
diff --git a/client/components/ui/table.tsx b/client/components/ui/table.tsx
index 14a3f5d..56e8833 100644
--- a/client/components/ui/table.tsx
+++ b/client/components/ui/table.tsx
@@ -66,8 +66,8 @@ function TableHead({ className, ref, ...props }: ComponentProps<'th'>) {
         'h-10 px-4 text-left align-middle',
         'text-xs font-semibold uppercase tracking-normal',
         'text-muted-foreground',
-        '[&:has([role=checkbox])]:pr-0',
-        '[&>[role=checkbox]]:translate-y-[2px]',
+        'has-[[role=checkbox]]:pr-0',
+        '*:[[role=checkbox]]:translate-y-[2px]',
         className,
       )}
       {...props}
@@ -82,8 +82,8 @@ function TableCell({ className, ref, ...props }: ComponentProps<'td'>) {
       className={cn(
         'px-5 py-3 align-middle',
         'text-sm font-medium text-foreground',
-        '[&:has([role=checkbox])]:pr-0',
-        '[&>[role=checkbox]]:translate-y-[2px]',
+        'has-[[role=checkbox]]:pr-0',
+        '*:[[role=checkbox]]:translate-y-[2px]',
         className,
       )}
       {...props}
diff --git a/client/components/ui/theme-toggle.tsx b/client/components/ui/theme-toggle.tsx
index d3c4d32..8cdd6ef 100644
--- a/client/components/ui/theme-toggle.tsx
+++ b/client/components/ui/theme-toggle.tsx
@@ -46,7 +46,7 @@ function DropdownMenuItem({
       className={cn(
         'relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none',
         'transition-colors focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         inset && 'pl-8',
         className,
       )}
diff --git a/client/index.css b/client/index.css
index 2bcb245..c65671a 100644
--- a/client/index.css
+++ b/client/index.css
@@ -5,29 +5,294 @@
 
 /* ── Georgia for digits only ─────────────────────────────── */
 
-@font-face {
-  font-family: 'GeorgiaDigits';
-  src: local('Georgia');
-  unicode-range:
-    U+0030- U+0039,
-    /* 0–9 */ U+002C,
-    /* , thousands separator */ U+002E,
-    /* . decimal point */ U+002D,
-    /* - minus / hyphen */ U+002B,
-    /* + plus */ U+0025,
-    /* % percent */ U+0024,
-    /* $ dollar */ U+00A2,
-    /* ¢ cent */ U+00A3,
-    /* £ pound */ U+00A5,
-    /* ¥ yen */ U+20AC; /* € euro */
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@theme {
+  --color-border: oklch(var(--border));
+  --color-input: oklch(var(--input));
+  --color-ring: oklch(var(--ring));
+  --color-background: oklch(var(--background));
+  --color-foreground: oklch(var(--foreground));
+
+  --color-primary: oklch(var(--primary));
+  --color-primary-foreground: oklch(var(--primary-foreground));
+
+  --color-secondary: oklch(var(--secondary));
+  --color-secondary-foreground: oklch(var(--secondary-foreground));
+
+  --color-destructive: oklch(var(--destructive));
+  --color-destructive-foreground: oklch(var(--destructive-foreground));
+
+  --color-muted: oklch(var(--muted));
+  --color-muted-foreground: oklch(var(--muted-foreground));
+
+  --color-accent: oklch(var(--accent));
+  --color-accent-foreground: oklch(var(--accent-foreground));
+
+  --color-popover: oklch(var(--popover));
+  --color-popover-foreground: oklch(var(--popover-foreground));
+
+  --color-card: oklch(var(--card));
+  --color-card-foreground: oklch(var(--card-foreground));
+
+  --color-sidebar: oklch(var(--sidebar));
+  --color-sidebar-foreground: oklch(var(--sidebar-foreground));
+  --color-sidebar-primary: oklch(var(--sidebar-primary));
+  --color-sidebar-accent: oklch(var(--sidebar-accent));
+  --color-sidebar-border: oklch(var(--sidebar-border));
+  --color-sidebar-ring: oklch(var(--sidebar-ring));
+
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-serif: var(--font-serif), ui-serif, serif;
+  --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+/* ── Utilities ───────────────────────────────────────────── */
+
+@utility surface {
+  /* Generic surface */
+  @apply rounded-xl border border-border/75 bg-card/95 shadow-xs shadow-black/10;
+}
+
+@utility surface-elevated {
+  /* Elevated surface */
+  @apply surface backdrop-blur-xs;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 10px 30px rgb(15 23 42 / 0.07);
+
+  .dark & {
+    box-shadow:
+      0 0 0 1px oklch(var(--border) / 0.7),
+      0 14px 34px rgb(0 0 0 / 0.42);
+  }
+}
+
+@utility dark {
+  & .surface-elevated {
+    box-shadow:
+      0 0 0 1px oklch(var(--border) / 0.7),
+      0 14px 34px rgb(0 0 0 / 0.42);
+  }
+
+  & .surface-premium {
+    box-shadow:
+      0 0 0 1px oklch(var(--border) / 0.55),
+      0 12px 30px rgb(0 0 0 / 0.34);
+  }
+
+  /* Faded muted-text variants: keep them readable in dark mode — Tailwind's
+     raw /40–/70 alphas dissolve into the background. */
+  & .text-muted-foreground\/40 {
+    color: oklch(var(--muted-foreground) / 0.8);
+  }
+
+  & .text-muted-foreground\/50 {
+    color: oklch(var(--muted-foreground) / 0.85);
+  }
+
+  & .text-muted-foreground\/60 {
+    color: oklch(var(--muted-foreground) / 0.9);
+  }
+
+  & .text-muted-foreground\/70 {
+    color: oklch(var(--muted-foreground) / 0.95);
+  }
+}
+
+@utility surface-premium {
+  @apply rounded-xl border border-border/75 bg-card/95 shadow-xs shadow-black/10 backdrop-blur-xs;
+
+  .dark & {
+    box-shadow:
+      0 0 0 1px oklch(var(--border) / 0.55),
+      0 12px 30px rgb(0 0 0 / 0.34);
+  }
+}
+
+@utility metric-card {
+  @apply relative min-h-31 overflow-hidden rounded-xl border border-border/75 bg-card/95 px-4 py-4 shadow-xs shadow-black/10 sm:px-5;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 2px;
+    background: currentColor;
+    opacity: 0.24;
+  }
+}
+
+@utility stat-card {
+  /* Stat cards */
+  @apply surface-elevated p-6;
+}
+
+@utility table-surface {
+  /* Table */
+  @apply surface-premium overflow-hidden;
+}
+
+@utility tracker-number {
+  font-family: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    'tnum' 1,
+    'lnum' 1;
+  -webkit-font-smoothing: auto;
+  text-rendering: optimizeLegibility;
+}
+
+@utility metric-value {
+  @apply tracker-number font-bold tracking-tight text-foreground;
+  overflow-wrap: anywhere;
+}
+
+@utility text-muted-foreground/40 {
+  /* Faded muted-text variants: keep them readable in dark mode — Tailwind's
+     raw /40–/70 alphas dissolve into the background. */
+  .dark & {
+    color: oklch(var(--muted-foreground) / 0.8);
+  }
+}
+
+@utility text-muted-foreground/50 {
+  .dark & {
+    color: oklch(var(--muted-foreground) / 0.85);
+  }
+}
+
+@utility text-muted-foreground/60 {
+  .dark & {
+    color: oklch(var(--muted-foreground) / 0.9);
+  }
+}
+
+@utility text-muted-foreground/70 {
+  .dark & {
+    color: oklch(var(--muted-foreground) / 0.95);
+  }
+}
+
+@utility scrollbar-thin {
+  /* Custom Scrollbar */
+  scrollbar-width: thin;
+}
+
+@utility scrollbar-thumb-muted {
+  scrollbar-color: oklch(var(--muted) / 0.3) transparent;
+  &::-webkit-scrollbar-thumb {
+    background-color: oklch(var(--muted) / 0.3);
+    border-radius: 8px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: oklch(var(--muted) / 0.5);
+  }
+}
+
+@utility scrollbar-track-transparent {
+  scrollbar-color: oklch(var(--muted) / 0.3) transparent;
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+@layer base {
+  @font-face {
+    font-family: 'GeorgiaDigits';
+    src: local('Georgia');
+    unicode-range:
+      U+0030- U+0039,
+      /* 0–9 */ U+002C,
+      /* , thousands separator */ U+002E,
+      /* . decimal point */ U+002D,
+      /* - minus / hyphen */ U+002B,
+      /* + plus */ U+0025,
+      /* % percent */ U+0024,
+      /* $ dollar */ U+00A2,
+      /* ¢ cent */ U+00A3,
+      /* £ pound */ U+00A5,
+      /* ¥ yen */ U+20AC; /* € euro */
+  }
 }
 
 /* ── Tailwind base ───────────────────────────────────────── */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
   :root {
     --background: 0.985 0.006 235;
@@ -130,116 +395,6 @@
   }
 }
 
-/* ── Utilities ───────────────────────────────────────────── */
-
-@layer utilities {
-  /* Generic surface */
-  .surface {
-    @apply rounded-xl border border-border/75 bg-card/95 shadow-sm shadow-black/10;
-  }
-
-  /* Elevated surface */
-  .surface-elevated {
-    @apply surface backdrop-blur-sm;
-    box-shadow:
-      0 1px 2px rgb(0 0 0 / 0.05),
-      0 10px 30px rgb(15 23 42 / 0.07);
-  }
-
-  .dark .surface-elevated {
-    box-shadow:
-      0 0 0 1px oklch(var(--border) / 0.7),
-      0 14px 34px rgb(0 0 0 / 0.42);
-  }
-
-  .surface-premium {
-    @apply rounded-xl border border-border/75 bg-card/95 shadow-sm shadow-black/10 backdrop-blur-sm;
-  }
-
-  .dark .surface-premium {
-    box-shadow:
-      0 0 0 1px oklch(var(--border) / 0.55),
-      0 12px 30px rgb(0 0 0 / 0.34);
-  }
-
-  .metric-card {
-    @apply relative min-h-[7.75rem] overflow-hidden rounded-xl border border-border/75 bg-card/95 px-4 py-4 shadow-sm shadow-black/10 sm:px-5;
-  }
-
-  .metric-card::before {
-    content: '';
-    position: absolute;
-    inset: 0 0 auto;
-    height: 2px;
-    background: currentColor;
-    opacity: 0.24;
-  }
-
-  /* Stat cards */
-  .stat-card {
-    @apply surface-elevated p-6;
-  }
-
-  /* Table */
-  .table-surface {
-    @apply surface-premium overflow-hidden;
-  }
-
-  .tracker-number {
-    font-family: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
-    font-variant-numeric: tabular-nums lining-nums;
-    font-feature-settings:
-      'tnum' 1,
-      'lnum' 1;
-    -webkit-font-smoothing: auto;
-    text-rendering: optimizeLegibility;
-  }
-
-  .metric-value {
-    @apply tracker-number font-bold tracking-tight text-foreground;
-    overflow-wrap: anywhere;
-  }
-
-  /* Faded muted-text variants: keep them readable in dark mode — Tailwind's
-     raw /40–/70 alphas dissolve into the background. */
-  .dark .text-muted-foreground\/40 {
-    color: oklch(var(--muted-foreground) / 0.8);
-  }
-
-  .dark .text-muted-foreground\/50 {
-    color: oklch(var(--muted-foreground) / 0.85);
-  }
-
-  .dark .text-muted-foreground\/60 {
-    color: oklch(var(--muted-foreground) / 0.9);
-  }
-
-  .dark .text-muted-foreground\/70 {
-    color: oklch(var(--muted-foreground) / 0.95);
-  }
-
-  /* Custom Scrollbar */
-  .scrollbar-thin {
-    scrollbar-width: thin;
-  }
-  .scrollbar-thumb-muted {
-    scrollbar-color: oklch(var(--muted) / 0.3) transparent;
-  }
-  .scrollbar-track-transparent {
-    scrollbar-color: oklch(var(--muted) / 0.3) transparent;
-  }
-  .scrollbar-thumb-muted::-webkit-scrollbar-thumb {
-    background-color: oklch(var(--muted) / 0.3);
-    border-radius: 8px;
-  }
-  .scrollbar-track-transparent::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  .scrollbar-thumb-muted::-webkit-scrollbar-thumb:hover {
-    background-color: oklch(var(--muted) / 0.5);
-  }
-}
-
 @media print {
   body {
     background: white !important;
diff --git a/client/lib/trackerUtils.ts b/client/lib/trackerUtils.ts
index 7b2caf1..4ae0c4c 100644
--- a/client/lib/trackerUtils.ts
+++ b/client/lib/trackerUtils.ts
@@ -51,16 +51,16 @@ export const TRACKER_SORT_DEFAULT_DIRS = Object.fromEntries(
 );
 
 export const ROW_STATUS_CLS: Record<string, string> = {
-  paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/[0.025] dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
+  paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/2.5 dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
   autodraft:
-    'border-l-2 border-l-teal-500/45 bg-teal-500/[0.025] dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
+    'border-l-2 border-l-teal-500/45 bg-teal-500/2.5 dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
   upcoming:
     'border-l-2 border-l-transparent [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-transparent',
   due_soon:
-    'border-l-2 border-l-amber-400/65 bg-amber-400/[0.055] dark:bg-amber-300/[0.02] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
-  late: 'border-l-2 border-l-orange-400/80 bg-orange-500/[0.09] ring-1 ring-inset ring-orange-400/20 dark:bg-orange-400/[0.07] dark:ring-orange-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-orange-400/80',
+    'border-l-2 border-l-amber-400/65 bg-amber-400/5.5 dark:bg-amber-300/2 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
+  late: 'border-l-2 border-l-orange-400/80 bg-orange-500/9 ring-1 ring-inset ring-orange-400/20 dark:bg-orange-400/[0.07] dark:ring-orange-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-orange-400/80',
   missed:
-    'border-l-2 border-l-rose-400/80 bg-rose-500/[0.1] ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/[0.075] dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
+    'border-l-2 border-l-rose-400/80 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/7.5 dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
 };
 
 export const STATUS_META = {
diff --git a/client/pages/AboutPage.tsx b/client/pages/AboutPage.tsx
index 4b4f9b9..a347920 100644
--- a/client/pages/AboutPage.tsx
+++ b/client/pages/AboutPage.tsx
@@ -182,7 +182,7 @@ export default function AboutPage() {
               </div>
             </div>
 
-            <div className="rounded-xl border border-primary/20 bg-primary/[0.06] p-4">
+            <div className="rounded-xl border border-primary/20 bg-primary/6 p-4">
               <div className="flex items-start gap-3">
                 <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                 <div>
diff --git a/client/pages/CalendarPage.tsx b/client/pages/CalendarPage.tsx
index 090d5d8..16f5c2d 100644
--- a/client/pages/CalendarPage.tsx
+++ b/client/pages/CalendarPage.tsx
@@ -592,11 +592,11 @@ function CalendarGrid({
               className={cn(
                 'flex min-h-16 flex-col border-b border-r border-border/60 bg-card/70 p-1.5 text-left transition-colors sm:min-h-24 sm:p-2',
                 'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
-                hasActivity && 'bg-primary/[0.06] hover:bg-accent/70',
-                isPaidDay && 'bg-emerald-500/[0.10]',
+                hasActivity && 'bg-primary/6 hover:bg-accent/70',
+                isPaidDay && 'bg-emerald-500/10',
                 hasMissed &&
-                  'border-rose-400/40 bg-rose-500/[0.18] ring-1 ring-inset ring-rose-400/30 dark:bg-rose-400/[0.12]',
-                isSelected && 'ring-2 ring-primary ring-inset bg-primary/[0.09]',
+                  'border-rose-400/40 bg-rose-500/18 ring-1 ring-inset ring-rose-400/30 dark:bg-rose-400/12',
+                isSelected && 'ring-2 ring-primary ring-inset bg-primary/9',
               )}
               aria-label={`View ${fmtDate(day.date)}`}
             >
@@ -861,7 +861,7 @@ function DebtPayoffGlance({ projection }: { projection: SnowballProjection | nul
         {snowball?.months_to_freedom ? (
           <div className="space-y-3">
             {targetDebt && (
-              <div className="rounded-xl border border-emerald-500/25 bg-emerald-500/[0.08] p-3">
+              <div className="rounded-xl border border-emerald-500/25 bg-emerald-500/8 p-3">
                 <div className="flex items-start gap-3">
                   <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-300">
                     <Target className="h-5 w-5" />
@@ -886,7 +886,7 @@ function DebtPayoffGlance({ projection }: { projection: SnowballProjection | nul
                       {targetMonths ? `${targetMonths} mo` : '—'}
                     </p>
                   </div>
-                  <div className="rounded-lg border border-sky-500/15 bg-sky-500/[0.08] p-3">
+                  <div className="rounded-lg border border-sky-500/15 bg-sky-500/8 p-3">
                     <p className="text-xs text-muted-foreground">Debt-free</p>
                     <p className="font-semibold text-sky-600 dark:text-sky-300">
                       {snowball.payoff_display}
@@ -918,7 +918,7 @@ function DebtPayoffGlance({ projection }: { projection: SnowballProjection | nul
             </div>
 
             {!targetDebt && (
-              <div className="rounded-lg border border-sky-500/25 bg-sky-500/[0.08] p-3">
+              <div className="rounded-lg border border-sky-500/25 bg-sky-500/8 p-3">
                 <p className="text-sm font-medium text-sky-700 dark:text-sky-300">
                   Projection ready
                 </p>
@@ -950,7 +950,7 @@ function DebtPayoffGlance({ projection }: { projection: SnowballProjection | nul
             </Button>
           </div>
         ) : (
-          <div className="space-y-3 rounded-xl border border-sky-500/25 bg-sky-500/[0.08] p-3">
+          <div className="space-y-3 rounded-xl border border-sky-500/25 bg-sky-500/8 p-3">
             <div className="flex items-start gap-3">
               <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/15 text-sky-600 dark:text-sky-300">
                 <Target className="h-5 w-5" />
@@ -1029,7 +1029,7 @@ function DayDetailDialog({
                       className={cn(
                         'rounded-lg border border-border/70 bg-background/75 p-3',
                         (bill.status === 'late' || bill.status === 'missed') &&
-                          'border-rose-400/40 bg-rose-500/[0.10] ring-1 ring-inset ring-rose-400/20',
+                          'border-rose-400/40 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20',
                       )}
                     >
                       <div className="flex items-start justify-between gap-3">
@@ -1142,7 +1142,7 @@ function CalendarSubscribeDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="rounded-lg border border-primary/20 bg-primary/[0.06] p-3">
+        <div className="rounded-lg border border-primary/20 bg-primary/6 p-3">
           <p className="text-sm font-medium text-foreground">Best for keeping calendars updated</p>
           <p className="mt-1 text-xs leading-5 text-muted-foreground">
             A subscription stays linked to Bill Tracker, so future due-date or amount changes can
@@ -1284,7 +1284,7 @@ export default function CalendarPage() {
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
-            <span className="min-w-[8rem] px-1 text-center text-sm font-semibold tabular-nums select-none">
+            <span className="min-w-32 px-1 text-center text-sm font-semibold tabular-nums select-none">
               {monthLabel}
             </span>
             <Button
diff --git a/client/pages/LoginPage.tsx b/client/pages/LoginPage.tsx
index c3c8586..c524e9d 100644
--- a/client/pages/LoginPage.tsx
+++ b/client/pages/LoginPage.tsx
@@ -304,7 +304,7 @@ export default function LoginPage() {
         <div className="mx-auto w-full max-w-sm space-y-6">
           {/* Logo / Brand */}
           <div className="flex flex-col items-center text-center lg:hidden">
-            <BrandMark className="h-auto w-[78%] max-w-[12rem] drop-shadow-[0_10px_28px_rgba(0,0,0,0.18)]" />
+            <BrandMark className="h-auto w-[78%] max-w-48 drop-shadow-[0_10px_28px_rgba(0,0,0,0.18)]" />
             <p className="mt-3 max-w-xs text-sm leading-6 text-muted-foreground">{BRAND.tagline}</p>
           </div>
           {/* TOTP step — shown after password is accepted */}
diff --git a/client/pages/ReleaseNotesPage.tsx b/client/pages/ReleaseNotesPage.tsx
index 1e48987..093d6a8 100644
--- a/client/pages/ReleaseNotesPage.tsx
+++ b/client/pages/ReleaseNotesPage.tsx
@@ -41,7 +41,7 @@ function HistoryLine({ line, index }: { line: string; index: number }) {
             src={image.src}
             alt={image.alt}
             loading="lazy"
-            className="aspect-[16/10] w-full object-contain"
+            className="aspect-16/10 w-full object-contain"
           />
         </div>
       </figure>
diff --git a/client/pages/RoadmapPage.tsx b/client/pages/RoadmapPage.tsx
index ef4b9be..ebbb7e8 100644
--- a/client/pages/RoadmapPage.tsx
+++ b/client/pages/RoadmapPage.tsx
@@ -202,7 +202,7 @@ function IssueCard({ issue }: { issue: Issue }) {
     >
       {/* Title row */}
       <div className="px-4 pt-3 pb-1.5 flex items-start gap-3">
-        <p className="flex-1 min-w-0 text-sm font-semibold leading-snug break-words">{title}</p>
+        <p className="flex-1 min-w-0 text-sm font-semibold leading-snug wrap-break-word">{title}</p>
         <span className="shrink-0 font-mono text-[11px] text-muted-foreground/60 mt-px tabular-nums">
           #{issue.number}
         </span>
@@ -436,7 +436,7 @@ function DevLogEntry({ entry }: { entry: DevLogEntryData }) {
                         className="text-sm text-muted-foreground flex items-start gap-1.5"
                       >
                         <span className="text-emerald-500 mt-0.5 shrink-0">✓</span>
-                        <span className="min-w-0 break-words">{work}</span>
+                        <span className="min-w-0 wrap-break-word">{work}</span>
                       </li>
                     ))}
                   </ul>
diff --git a/client/pages/SnowballPage.tsx b/client/pages/SnowballPage.tsx
index 69cc34c..c732530 100644
--- a/client/pages/SnowballPage.tsx
+++ b/client/pages/SnowballPage.tsx
@@ -962,7 +962,7 @@ export default function SnowballPage() {
                   </p>
                 </div>
               </div>
-              <div className="surface-elevated min-h-[58px] rounded-xl border border-primary/25 bg-primary/[0.04] px-4 py-3 shadow-sm shadow-primary/5">
+              <div className="surface-elevated min-h-[58px] rounded-xl border border-primary/25 bg-primary/4 px-4 py-3 shadow-sm shadow-primary/5">
                 <div className="flex items-center justify-between gap-4">
                   <div>
                     <Label
diff --git a/client/pages/SubscriptionsPage.tsx b/client/pages/SubscriptionsPage.tsx
index 9d33f3e..edd00e3 100644
--- a/client/pages/SubscriptionsPage.tsx
+++ b/client/pages/SubscriptionsPage.tsx
@@ -894,7 +894,7 @@ function RecommendationCard({
 
   return (
     <TooltipProvider delayDuration={180}>
-      <div className="rounded-lg border border-primary/20 bg-primary/[0.05] p-4">
+      <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
         <div className="space-y-3">
           <div className="flex min-w-0 items-start justify-between gap-3">
             <div className="min-w-0 flex-1">
diff --git a/client/pages/TrackerPage.tsx b/client/pages/TrackerPage.tsx
index f2ea466..3f8bcfe 100644
--- a/client/pages/TrackerPage.tsx
+++ b/client/pages/TrackerPage.tsx
@@ -169,10 +169,10 @@ function HeaderStat({
 }) {
   const toneClass = {
     neutral: 'border-border/70 bg-card/65 text-muted-foreground',
-    good: 'border-emerald-500/25 bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-300',
-    warn: 'border-amber-500/30 bg-amber-500/[0.08] text-amber-700 dark:text-amber-300',
-    danger: 'border-rose-500/30 bg-rose-500/[0.08] text-rose-700 dark:text-rose-300',
-    info: 'border-sky-500/25 bg-sky-500/[0.08] text-sky-700 dark:text-sky-300',
+    good: 'border-emerald-500/25 bg-emerald-500/8 text-emerald-700 dark:text-emerald-300',
+    warn: 'border-amber-500/30 bg-amber-500/8 text-amber-700 dark:text-amber-300',
+    danger: 'border-rose-500/30 bg-rose-500/8 text-rose-700 dark:text-rose-300',
+    info: 'border-sky-500/25 bg-sky-500/8 text-sky-700 dark:text-sky-300',
   }[tone];
 
   return (
@@ -1176,7 +1176,7 @@ export default function TrackerPage() {
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
-              <span className="min-w-[8rem] px-1 text-center text-xs font-semibold tabular-nums select-none">
+              <span className="min-w-32 px-1 text-center text-xs font-semibold tabular-nums select-none">
                 {activeMonthLabel}
               </span>
               <Button
@@ -1495,7 +1495,7 @@ export default function TrackerPage() {
                 <div className="flex min-w-0 items-center gap-2">
                   <span
                     className={cn(
-                      'grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-current/15 bg-current/[0.08]',
+                      'grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-current/15 bg-current/8',
                       Number(bankTracking.remaining ?? 0) >= 0
                         ? 'text-emerald-600 dark:text-emerald-300'
                         : 'text-destructive',
@@ -1901,7 +1901,7 @@ export default function TrackerPage() {
           <div
             role="toolbar"
             aria-label="Bulk actions for selected bills"
-            className="flex items-center gap-2 rounded-full border border-border bg-card/95 px-3 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-card/80"
+            className="flex items-center gap-2 rounded-full border border-border bg-card/95 px-3 py-2 shadow-lg backdrop-blur supports-backdrop-filter:bg-card/80"
           >
             <span className="px-2 text-sm font-medium tabular-nums">
               {selectedRows.length} selected
diff --git a/docs/UI_IMPROVEMENTS.md b/docs/UI_IMPROVEMENTS.md
index 86f5868..4023015 100644
--- a/docs/UI_IMPROVEMENTS.md
+++ b/docs/UI_IMPROVEMENTS.md
@@ -21,20 +21,22 @@ No critical issues found. Core functionality is solid.
 **Why it matters:** On small screens, the mobile navigation menu doesn't adapt to content width, causing horizontal scroll or content cutoff. This is a blocking accessibility issue for mobile users.
 
 **Current behavior:**
+
 - Mobile menu uses fixed max-width container
 - Nav items with long text (e.g., "Notification Preferences") wrap poorly
 - No vertical scrolling within the mobile overlay
 
 **Suggested fix:**
+
 ```jsx
 // In Sidebar.jsx mobile menu section:
-<div className={cn(
-  'border-t border-border/60 bg-background/95 px-4 py-3 shadow-lg shadow-foreground/5 lg:hidden',
-  'max-h-[70vh] overflow-y-auto', // Add scrollable container
-)}>
-  <nav className="mx-auto grid max-w-[1500px] gap-1">
-    {/* ... */}
-  </nav>
+<div
+  className={cn(
+    'border-t border-border/60 bg-background/95 px-4 py-3 shadow-lg shadow-foreground/5 lg:hidden',
+    'max-h-[70vh] overflow-y-auto', // Add scrollable container
+  )}
+>
+  <nav className="mx-auto grid max-w-[1500px] gap-1">{/* ... */}</nav>
 </div>
 ```
 
@@ -49,6 +51,7 @@ No critical issues found. Core functionality is solid.
 **Why it matters:** The entire page shows a full-page loader (`Loading…`) during initial data fetch, resulting in a blank white screen for 200–500ms. This feels slower than needed.
 
 **Suggested fix:**
+
 - Replace full-page loader with skeleton cards matching the layout
 - Show placeholder content: 2-3 shimmering `SectionCard` components
 - Fade out skeletons when data arrives
@@ -62,22 +65,27 @@ No critical issues found. Core functionality is solid.
 **Where:** `client/components/BillModal.jsx`
 
 **Why it matters:** The `handleChange` function debounces validation but still triggers re-renders on every keystroke. This causes:
+
 - Input field height changes when error messages appear/disappear
 - Jarring UX during form entry
 - Potential focus loss on fast typists
 
 **Suggested fix:**
+
 - Only show error messages after field blur or form submit attempt
 - Pre-allocate error message space (min-height: 12px)
 - Use `aria-live="polite"` for screen reader notifications
 
 **Alternative:**
+
 ```jsx
 // Only validate on blur or submit, not on every change
 // Keep error state but don't re-render unless visibility changes
-{errors.name && errorStateVisible && (
-  <span className="text-[10px] text-red-500 font-medium">{errors.name}</span>
-)}
+{
+  errors.name && errorStateVisible && (
+    <span className="text-[10px] text-red-500 font-medium">{errors.name}</span>
+  );
+}
 ```
 
 ---
@@ -91,20 +99,23 @@ No critical issues found. Core functionality is solid.
 **Why it matters:** When users navigate to `/bills`, `/categories`, or `/summary`, the main "Tracker" dropdown remains unhighlighted. This creates ambiguity about current location.
 
 **Current behavior:**
+
 - Only the dropdown trigger is highlighted when on `/` (Overview)
 - Child routes like `/bills` don't indicate they're part of the Tracker group
 
 **Suggested fix:**
+
 - Detect when any child route is active via `location.pathname.startsWith('/bills')` etc.
 - Apply `bg-primary text-primary-foreground` style to the Tracker dropdown when any tracker subpage is active
 
 **Code hint:**
+
 ```jsx
-const isTrackerActive = trackerItems.some(item => 
-  item.end ? location.pathname === item.to 
-  : location.pathname.startsWith(item.to)
+const isTrackerActive = trackerItems.some((item) =>
+  item.end ? location.pathname === item.to : location.pathname.startsWith(item.to),
 );
 ```
+
 Already implemented in the code, but the `TrackerMenu` trigger needs styling update.
 
 ---
@@ -116,18 +127,21 @@ Already implemented in the code, but the `TrackerMenu` trigger needs styling upd
 **Why it matters:** Several complex cards (Backup, Email, Users) lack explicit error boundaries. If an API call fails mid-render or throws, the entire admin panel goes blank with no recovery path.
 
 **Suggested fix:**
+
 - Wrap each major card in a `try/catch` or React Error Boundary
 - Show "Failed to load" state with retry button
 - Example:
+
 ```jsx
 function BackupSection() {
   const [error, setError] = useState(null);
   const [data, setData] = useState(null);
 
   useEffect(() => {
-    api.getBackups()
+    api
+      .getBackups()
       .then(setData)
-      .catch(err => setError(err));
+      .catch((err) => setError(err));
   }, []);
 
   if (error) {
@@ -151,8 +165,10 @@ function BackupSection() {
 **Why it matters:** While `label` elements exist, they're not explicitly tied to inputs via `htmlFor`. Some components (e.g., theme cards) use buttons without labels, making screen reader navigation difficult.
 
 **Suggested fix:**
+
 - Ensure all form inputs have explicit `id` and corresponding `label htmlFor`
 - Add `aria-label` or `aria-describedby` to interactive elements:
+
 ```jsx
 <button
   type="button"
@@ -173,6 +189,7 @@ function BackupSection() {
 **Why it matters:** The email input field accepts any string, including invalid formats like `test@localhost` or `not-an-email`. Validation only happens server-side, leading to delayed error feedback.
 
 **Suggested fix:**
+
 - Add client-side email regex check before save
 - Show inline error if invalid: `^[\w.-]+@[\w.-]+\.\w+$`
 - Debounce validation to avoid spamming errors during typing
@@ -184,11 +201,13 @@ function BackupSection() {
 **Where:** `client/components/BillModal.jsx`
 
 **Why it matters:** The "Due day of month" input expects a number (1-31) instead of a standard date picker or calendar selection. This is confusing for:
+
 - Users expecting a full date picker
 - International users (some countries use DD/MM vs MM/DD)
 - Edge cases like February 30th (which doesn't exist)
 
 **Suggested improvement:**
+
 - Consider using `react-datepicker` or similar for full date selection
 - Alternatively, add a helper tooltip: "Enter day number only (e.g., 15 for the 15th)"
 - Add a validation example: "Due on the 15th → enter 15"
@@ -204,7 +223,8 @@ function BackupSection() {
 **Why it matters:** The `backdrop-blur-xl` class relies on CSS `backdrop-filter`, which is unsupported in older browsers (e.g., Safari <14, some Android WebView versions). This results in a solid background instead of glassmorphism.
 
 **Suggested fix:**
-- Add a CSS fallback: `bg-background/85 supports-[backdrop-filter]:bg-background/70`
+
+- Add a CSS fallback: `bg-background/85 supports-backdrop-filter:bg-background/70`
 - Already implemented ✅ — no changes needed
 
 ---
@@ -216,7 +236,9 @@ function BackupSection() {
 **Why it matters:** Modern apps often include a "remember me" option to reduce login friction on trusted devices. Without it, users must re-authenticate on every session.
 
 **Suggested fix:**
+
 - Add a checkbox below the password field:
+
 ```jsx
 <div className="flex items-center gap-2">
   <input type="checkbox" id="remember" />
@@ -225,6 +247,7 @@ function BackupSection() {
   </label>
 </div>
 ```
+
 - Set `rememberMe` flag in localStorage or via cookie (if server supports it)
 
 ---
@@ -236,6 +259,7 @@ function BackupSection() {
 **Why it matters:** The theme toggle button doesn't indicate which theme is currently active. Users must click to discover the current state or remember manually.
 
 **Suggested fix:**
+
 - Add subtle text label: "Light" / "Dark" next to the icon
 - Or use a tooltip: `aria-label="Current theme: Dark"`
 - Or change icon (sun/moon) based on theme (already done ✅)
@@ -249,6 +273,7 @@ function BackupSection() {
 **Why it matters:** When there are no bills, the calendar shows a generic "No bills found" message. This doesn't guide users toward creating their first bill.
 
 **Suggested fix:**
+
 - Add a CTA button: "Create your first bill"
 - Link directly to the modal with a pre-filled category or default values
 - Include a placeholder image or illustration
@@ -264,6 +289,7 @@ function BackupSection() {
 **Why it matters:** The `table-surface` utility (used in Settings and Profile pages) applies `mb-4` and internal padding, but the spacing isn't uniform across all pages. Some sections have excessive vertical space, others feel cramped.
 
 **Suggested fix:**
+
 - Audit and standardize spacing tokens:
   - `section-spacing` = `mb-6` (1.5rem)
   - `card-spacing` = `mb-4` (1rem)
@@ -277,11 +303,13 @@ function BackupSection() {
 **Where:** Across all components
 
 **Why it matters:** Different icon sets are used inconsistently:
+
 - `lucide-react` (primary)
 - Custom SVGs (logo)
 - Some components import icons but don't use them
 
 **Suggested fix:**
+
 - Standardize on `lucide-react` for all icons
 - Create a shared `icons/` directory with named exports if custom icons are needed
 - Document icon usage in `CONTRIBUTING.md`
@@ -290,13 +318,13 @@ function BackupSection() {
 
 ## Summary
 
-| Priority | Count | Key Impact |
-|----------|-------|------------|
-| CRITICAL | 0     | — |
+| Priority | Count | Key Impact                                           |
+| -------- | ----- | ---------------------------------------------------- |
+| CRITICAL | 0     | —                                                    |
 | HIGH     | 3     | Mobile accessibility, perceived performance, form UX |
-| MEDIUM   | 5     | Navigation clarity, error resilience, keyboard nav |
-| LOW      | 4     | Convenience, consistency, discoverability |
-| MEH      | 2     | Minor polish, standardization |
+| MEDIUM   | 5     | Navigation clarity, error resilience, keyboard nav   |
+| LOW      | 4     | Convenience, consistency, discoverability            |
+| MEH      | 2     | Minor polish, standardization                        |
 
 ---
 
@@ -309,4 +337,4 @@ function BackupSection() {
 
 ---
 
-*Generated by Scarlett (Frontend/UX Authority) on 2026-05-08*
+_Generated by Scarlett (Frontend/UX Authority) on 2026-05-08_
diff --git a/e2e/smoke.spec.js-snapshots/login-chromium-desktop-linux.png b/e2e/smoke.spec.js-snapshots/login-chromium-desktop-linux.png
index 42dda35..4f2b11a 100644
Binary files a/e2e/smoke.spec.js-snapshots/login-chromium-desktop-linux.png and b/e2e/smoke.spec.js-snapshots/login-chromium-desktop-linux.png differ
diff --git a/e2e/smoke.spec.js-snapshots/login-chromium-mobile-linux.png b/e2e/smoke.spec.js-snapshots/login-chromium-mobile-linux.png
index f2d684e..f7de938 100644
Binary files a/e2e/smoke.spec.js-snapshots/login-chromium-mobile-linux.png and b/e2e/smoke.spec.js-snapshots/login-chromium-mobile-linux.png differ
diff --git a/package-lock.json b/package-lock.json
index d336d6a..8c6c2fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
         "react-dom": "^19.2.7",
         "react-router-dom": "^7.18.1",
         "sonner": "^2.0.7",
-        "tailwind-merge": "^2.5.4",
+        "tailwind-merge": "^3.6.0",
         "tailwindcss-animate": "^1.0.7",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
       },
@@ -53,6 +53,7 @@
         "@axe-core/playwright": "^4.10.1",
         "@eslint/js": "^10.0.1",
         "@playwright/test": "^1.50.1",
+        "@tailwindcss/vite": "^4.3.2",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.2",
         "@types/node": "^26.1.0",
@@ -72,7 +73,7 @@
         "lefthook": "^2.1.9",
         "postcss": "^8.4.47",
         "prettier": "3.9.4",
-        "tailwindcss": "^3.4.14",
+        "tailwindcss": "^4.3.2",
         "typescript": "^6.0.3",
         "typescript-eslint": "^8.62.1",
         "vite": "^8.1.4",
@@ -83,19 +84,6 @@
         "node": ">=22.18.0"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "5.1.11",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
@@ -2253,44 +2241,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@otplib/core": {
       "version": "13.4.1",
       "resolved": "https://registry.npmjs.org/@otplib/core/-/core-13.4.1.tgz",
@@ -4915,6 +4865,290 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
+      "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
+      "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-x64": "4.3.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
+      "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
+      "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
+      "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
+      "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
+      "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
+      "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
+      "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
+      "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
+      "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
+      "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
+      "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
+      "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.2.tgz",
+      "integrity": "sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.2",
+        "@tailwindcss/oxide": "4.3.2",
+        "tailwindcss": "4.3.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.101.2",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.2.tgz",
@@ -5592,47 +5826,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/aria-hidden": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -5933,19 +6126,6 @@
         "require-from-string": "^2.0.2"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -6026,19 +6206,6 @@
         "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.5.tgz",
@@ -6170,16 +6337,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001803",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001803.tgz",
@@ -6211,44 +6368,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/chownr": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
@@ -6363,16 +6482,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/common-tags": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
@@ -6548,19 +6657,6 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -6780,26 +6876,12 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/dijkstrajs": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
       "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
       "license": "MIT"
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -6874,6 +6956,20 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -7411,36 +7507,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -7472,16 +7538,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/fd-package-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fd-package-json/-/fd-package-json-2.0.0.tgz",
@@ -7562,19 +7618,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/finalhandler": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
@@ -8335,19 +8378,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -8546,16 +8576,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/is-number-object": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
@@ -9490,26 +9510,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -9616,43 +9616,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
@@ -9752,18 +9715,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.15",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -9857,16 +9808,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -10284,26 +10225,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/playwright": {
       "version": "1.61.1",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
@@ -10384,133 +10305,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
-      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "jiti": ">=1.21.0",
-        "postcss": ">=8.0.9",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
-      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -10831,27 +10625,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/range-parser": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
@@ -11052,16 +10825,6 @@
         }
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -11076,32 +10839,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/reflect-metadata": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
@@ -11267,17 +11004,6 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rolldown": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",
@@ -11383,30 +11109,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -12114,29 +11816,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.1",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
-      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "tinyglobby": "^0.2.11",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/supports-color": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
@@ -12171,9 +11850,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
-      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12181,42 +11860,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
-      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
+      "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.7",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -12227,24 +11875,18 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
-    "node_modules/tailwindcss/node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tar-fs": {
@@ -12330,29 +11972,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -12417,19 +12036,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -12488,13 +12094,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
diff --git a/package.json b/package.json
index 26d1622..a28a550 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.18.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^2.5.4",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss-animate": "^1.0.7",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
@@ -76,6 +76,7 @@
     "@axe-core/playwright": "^4.10.1",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/vite": "^4.3.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.0",
@@ -95,7 +96,7 @@
     "lefthook": "^2.1.9",
     "postcss": "^8.4.47",
     "prettier": "3.9.4",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.3.2",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.62.1",
     "vite": "^8.1.4",
diff --git a/playwright.config.js b/playwright.config.js
index 8904dee..4d1830b 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -44,13 +44,27 @@ module.exports = defineConfig({
       name: 'chromium-desktop',
       use: { ...devices['Desktop Chrome'] },
       dependencies: ['setup'],
-      testIgnore: [/auth\.setup\.js/, /api\.probe\.spec\.js/, /a11y\.authed\.spec\.js/],
+      testIgnore: [
+        /auth\.setup\.js/,
+        /api\.probe\.spec\.js/,
+        /a11y\.authed\.spec\.js/,
+        // probe-only: enables WebAuthn for the seeded user mid-test, which would
+        // race the password logins in these parallel UI projects
+        /webauthn\.probe\.spec\.js/,
+      ],
     },
     {
       name: 'chromium-mobile',
       use: { ...devices['Pixel 5'] },
       dependencies: ['setup'],
-      testIgnore: [/auth\.setup\.js/, /api\.probe\.spec\.js/, /a11y\.authed\.spec\.js/],
+      testIgnore: [
+        /auth\.setup\.js/,
+        /api\.probe\.spec\.js/,
+        /a11y\.authed\.spec\.js/,
+        // probe-only: enables WebAuthn for the seeded user mid-test, which would
+        // race the password logins in these parallel UI projects
+        /webauthn\.probe\.spec\.js/,
+      ],
     },
     // Find-mode diagnostics (adversarial API probe + authenticated a11y scan).
     // Own project so they don't run concurrently with / pollute the UI specs, and
diff --git a/postcss.config.js b/postcss.config.js
index cce4985..6a9a85c 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1 +1,3 @@
-module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };
+// Tailwind v4 runs via @tailwindcss/vite (see vite.config.mjs); autoprefixing
+// is built into v4, so PostCSS needs no plugins here anymore.
+module.exports = { plugins: {} };
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 8ba07eb..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['./index.html', './client/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    container: { center: true, padding: '2rem', screens: { '2xl': '1400px' } },
-    extend: {
-      colors: {
-        border:      'oklch(var(--border) / <alpha-value>)',
-        input:       'oklch(var(--input) / <alpha-value>)',
-        ring:        'oklch(var(--ring) / <alpha-value>)',
-        background:  'oklch(var(--background) / <alpha-value>)',
-        foreground:  'oklch(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT:    'oklch(var(--primary) / <alpha-value>)',
-          foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT:    'oklch(var(--secondary) / <alpha-value>)',
-          foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT:    'oklch(var(--destructive) / <alpha-value>)',
-          foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT:    'oklch(var(--muted) / <alpha-value>)',
-          foreground: 'oklch(var(--muted-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT:    'oklch(var(--accent) / <alpha-value>)',
-          foreground: 'oklch(var(--accent-foreground) / <alpha-value>)',
-        },
-        popover: {
-          DEFAULT:    'oklch(var(--popover) / <alpha-value>)',
-          foreground: 'oklch(var(--popover-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT:    'oklch(var(--card) / <alpha-value>)',
-          foreground: 'oklch(var(--card-foreground) / <alpha-value>)',
-        },
-        sidebar: {
-          DEFAULT:    'oklch(var(--sidebar) / <alpha-value>)',
-          foreground: 'oklch(var(--sidebar-foreground) / <alpha-value>)',
-          primary:    'oklch(var(--sidebar-primary) / <alpha-value>)',
-          accent:     'oklch(var(--sidebar-accent) / <alpha-value>)',
-          border:     'oklch(var(--sidebar-border) / <alpha-value>)',
-          ring:       'oklch(var(--sidebar-ring) / <alpha-value>)',
-        },
-      },
-      fontFamily: {
-        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
-        serif: ['var(--font-serif)', 'ui-serif', 'serif'],
-        mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
-        'accordion-up':   { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
-        'collapsible-down': { from: { height: '0' }, to: { height: 'var(--radix-collapsible-content-height)' } },
-        'collapsible-up':   { from: { height: 'var(--radix-collapsible-content-height)' }, to: { height: '0' } },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up':   'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up':   'collapsible-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
diff --git a/vite.config.mjs b/vite.config.mjs
index f22ac2e..3c15c18 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -12,6 +13,7 @@ const apiPort = process.env.API_PORT || process.env.PORT || 3000;
 
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     // React Compiler (React 19): auto-memoizes components/hooks at build time, so
     // manual useMemo/useCallback become largely unnecessary. Safe here because the
     // codebase is rules-of-hooks clean (enforced by eslint-plugin-react-hooks).