diff --git a/.agents/skills/design-taste-frontend/SKILL.md b/.agents/skills/design-taste-frontend/SKILL.md
index f7f472a74e9..11ad6fa3e86 100644
--- a/.agents/skills/design-taste-frontend/SKILL.md
+++ b/.agents/skills/design-taste-frontend/SKILL.md
@@ -4,7 +4,7 @@ source: https://github.com/leonxlnx/taste-skill — skills/taste-skill/SKILL.md
 description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
 ---
 
-> **In this repo:** Tailwind 3.4 (`apps/sim/tailwind.config.ts`); animation via `import { motion } from 'framer-motion'` (not `motion/react` — rewrite every `motion/react` import in the samples below); icons from `@sim/emcn/icons`; colors through the CSS-variable tokens in `.claude/rules/sim-styling.md` (no hardcoded `text-gray-*`/hex/`zinc` utilities, no paired `dark:` utilities). This note overrides any conflicting guidance or code sample anywhere in this file.
+> **In this repo:** Tailwind 4 (CSS-first config in `apps/sim/app/_styles/globals.css`); animation via `import { motion } from 'framer-motion'` (not `motion/react` — rewrite every `motion/react` import in the samples below); icons from `@sim/emcn/icons`; colors through the CSS-variable tokens in `.claude/rules/sim-styling.md` (no hardcoded `text-gray-*`/hex/`zinc` utilities, no paired `dark:` utilities). This note overrides any conflicting guidance or code sample anywhere in this file.
 
 # tasteskill: Anti-Slop Frontend Skill
 
diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 763803ed7db..9893028c352 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -113,7 +113,7 @@ Adding a new settings page:
 ## Text-scale tokens (no literal pixel sizes)
 
 Settings pages never use a literal `text-[Npx]` class — always the named Tailwind
-scale token from `apps/sim/tailwind.config.ts`'s `fontSize` extension (`text-micro`
+scale token from the `@theme` block in `apps/sim/app/_styles/globals.css` (`text-micro`
 10px, `text-xs` 11px, `text-caption` 12px, `text-small` 13px, `text-sm` 14px
 [Tailwind default, unmodified], `text-base` 15px, `text-md` 16px, `text-lg` 18px
 [Tailwind default]). A literal size is either a straight rename to the equivalent
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 3fd18753f46..51a882f8607 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -46,7 +46,7 @@ setWidth: (width) => {
 
 ## Text Scale
 
-Custom font sizes (`apps/sim/tailwind.config.ts`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
+Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`.
 
diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc
index 8b407a204b7..e4688808503 100644
--- a/.cursor/rules/sim-styling.mdc
+++ b/.cursor/rules/sim-styling.mdc
@@ -40,7 +40,7 @@ setWidth: (width) => {
 
 ## Text Scale
 
-Custom font sizes (`apps/sim/tailwind.config.ts`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
+Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`.
 
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index aa2e6f740c8..b0f169b33fb 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -7,7 +7,7 @@
 
 /* Every @sim/emcn component expresses hover through `hover-hover:` so touch
    devices never latch a sticky hover state. The app registers it as a plugin
-   variant in apps/sim/tailwind.config.ts; docs is CSS-first Tailwind v4 with no
+   variant in apps/sim/app/_styles/globals.css; docs is CSS-first Tailwind v4 with no
    config, so without this declaration the variant compiles to nothing and every
    emcn hover state silently no-ops here. */
 @custom-variant hover-hover {
@@ -35,7 +35,7 @@ body {
   --color-fd-primary: var(--color-fd-foreground);
   /* Sim's custom type scale — emcn components (Label, Badge, the shared block
      views) use these names, so they must resolve here or text falls back to the
-     inherited size. Mirrors apps/sim/tailwind.config.ts. */
+     inherited size. Mirrors apps/sim/app/_styles/globals.css. */
   --text-micro: 10px;
   --text-xs: 11px;
   --text-caption: 12px;
@@ -47,7 +47,7 @@ body {
      --text-caption and --text-small, because the mono face reads small at 12px. */
   --text-code: 0.78125rem;
 
-  /* The platform's code face. `apps/sim/tailwind.config.ts` lists `var(--font-martian-mono)`
+  /* The platform's code face. `apps/sim/app/_styles/globals.css` lists `var(--font-martian-mono)`
      first, but nothing in the app ever defines that variable — `apps/sim/app/layout.tsx`
      applies only `season.variable` — so every code surface in the product resolves to the
      system stack below. Docs match what the app actually renders rather than the token it
diff --git a/apps/docs/lib/utils.ts b/apps/docs/lib/utils.ts
index 2a18386f2dc..a7b128a8254 100644
--- a/apps/docs/lib/utils.ts
+++ b/apps/docs/lib/utils.ts
@@ -1,12 +1,15 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 /**
- * Combines multiple class names into a single string, merging Tailwind classes properly
+ * Re-exported from the design system rather than built here, so docs runs one
+ * merge engine instead of two: its own components already import `cn` from
+ * `@sim/emcn` indirectly, and a second `cn` entry point would ship a duplicate
+ * engine and lookup tables.
+ *
+ * It also carries emcn's `font-size` class group, which docs needs — its
+ * `global.css` defines the same `--text-micro/caption/small/md` scale, and the
+ * stock merger does not treat those as font sizes, so `cn('text-small',
+ * 'text-sm')` emitted both and let CSS source order pick the winner.
  */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+export { cn } from '@sim/emcn'
 
 /**
  * Get the full URL for an asset stored in Vercel Blob
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 66ba9567c52..67b822703ae 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -23,7 +23,6 @@
     "@sim/workflow-renderer": "workspace:*",
     "@xyflow/react": "12.11.3",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.2",
     "fumadocs-core": "16.8.5",
     "fumadocs-mdx": "14.3.2",
@@ -35,7 +34,6 @@
     "react-dom": "19.2.4",
     "remark-breaks": "^4.0.0",
     "shiki": "4.3.1",
-    "tailwind-merge": "^3.0.2",
     "framer-motion": "^12.5.0",
     "zod": "4.3.6"
   },
diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
index abb1460c955..e488f8a8ea9 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
@@ -124,7 +124,7 @@ export const ChatInput: React.FC<{
   const canSubmit = (inputValue.trim().length > 0 || attachedFiles.length > 0) && !isStreaming
 
   return (
-    <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-gradient-to-t from-[var(--bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
+    <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-linear-to-t from-[var(--bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
       <div className='w-full max-w-3xl md:max-w-[748px]'>
         {uploadErrors.length > 0 && (
           <div className='mb-3 flex flex-col gap-2'>
@@ -171,7 +171,7 @@ export const ChatInput: React.FC<{
               {attachedFiles.map((file) => (
                 <Tooltip.Root key={file.id}>
                   <Tooltip.Trigger asChild>
-                    <div className='group relative size-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
+                    <div className='group relative size-[56px] shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
                       {file.dataUrl ? (
                         <img
                           src={file.dataUrl}
@@ -214,7 +214,7 @@ export const ChatInput: React.FC<{
             onKeyDown={handleKeyDown}
             placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
             rows={1}
-            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
           />
 
           <div className='flex items-center justify-between'>
diff --git a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
index ff52f4c60ea..b508e99ec58 100644
--- a/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx
@@ -68,7 +68,7 @@ export function ChatMessageContainer({
       </div>
 
       {showScrollButton && (
-        <div className='-translate-x-1/2 absolute bottom-16 left-1/2 z-20 transform'>
+        <div className='-translate-x-1/2 absolute bottom-16 left-1/2 z-20'>
           <Button
             onClick={scrollToBottom}
             size='sm'
diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index cd4714b9248..a043bd433df 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -115,12 +115,12 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       disabled={isDownloading}
       className='group flex h-auto w-[200px] items-center gap-2 rounded-lg px-3 py-2'
     >
-      <div className='flex size-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
+      <div className='flex size-8 shrink-0 items-center justify-center'>{renderIcon()}</div>
       <div className='min-w-0 flex-1 text-left'>
         <div className='w-[100px] truncate text-xs'>{file.name}</div>
         <div className='text-[var(--text-muted)] text-micro'>{formatFileSize(file.size)}</div>
       </div>
-      <div className='flex-shrink-0'>
+      <div className='shrink-0'>
         {isDownloading ? (
           <Loader className='size-3.5' animate />
         ) : (
diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
index 6a7c46f0f8b..ea2c6d4ab1a 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
@@ -183,7 +183,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                         />
                       ) : (
                         <>
-                          <div className='flex size-10 flex-shrink-0 items-center justify-center rounded bg-[var(--surface-3)] md:size-12'>
+                          <div className='flex size-10 shrink-0 items-center justify-center rounded bg-[var(--surface-3)] md:size-12'>
                             {getFileIcon(attachment.type)}
                           </div>
                           <div className='min-w-0 flex-1'>
diff --git a/apps/sim/app/(landing)/CLAUDE.md b/apps/sim/app/(landing)/CLAUDE.md
index f6b82e94dc3..16c31795602 100644
--- a/apps/sim/app/(landing)/CLAUDE.md
+++ b/apps/sim/app/(landing)/CLAUDE.md
@@ -16,7 +16,7 @@ The landing page looks like the product. Its visual language is the workspace UI
 - **Always light.** The root wrapper in `landing.tsx` carries the `light` class, which pins every token to its light value (see `app/_styles/globals.css`, the `:root, .light` block). Never add `dark:` variants here; never read the user's theme.
 - **Use platform tokens, never hex.** Canvas `--bg`, surfaces `--surface-1`…`--surface-7`, cards/modals `--surface-2`, hover `--surface-hover`, active `--surface-active`; text `--text-primary` / `--text-secondary` / `--text-muted` / `--text-body`, icons `--text-icon`; borders `--border` (dividers) / `--border-1` (fields); brand `--brand-agent` / `--brand-secondary` / `--brand-accent`. Do **not** use the legacy `--landing-*` tokens - they belong to the old dark landing.
 - **Use emcn components where they fit.** The chip family (`Chip`, `ChipLink`, `ChipTag`, `ChipInput`, `ChipModal*`, …) from `@/components/emcn` is the canonical chrome - a demo-request form is a `ChipModal` with `ChipModalField`s, a pill CTA is a `Chip`/`ChipLink`. Components own their chrome; pass props, not className overrides. Full consumer rules: `.claude/rules/sim-styling.md`.
-- **Typography is the platform's.** Season is the global body font (`font-season` is applied on `<body>` in the root layout). Use the platform text scale (`text-small` = 13px, `text-base` = 15px, etc. - see `tailwind.config.ts`). Don't add new fonts or font CSS variables without explicit direction.
+- **Typography is the platform's.** Season is the global body font (`font-season` is applied on `<body>` in the root layout). Use the platform text scale (`text-small` = 13px, `text-base` = 15px, etc. - see the `@theme` block in `app/_styles/globals.css`). Don't add new fonts or font CSS variables without explicit direction.
 - **Never touch global styles.** No additions to `app/_styles/globals.css`. All styling is local Tailwind classes; `cn()` from `@/lib/core/utils/cn` for conditionals; no inline `style` attributes.
 - **Responsive - desktop is the source of truth, scaled down via `max-*` overrides.** The page is fully responsive (iPad + phone). The desktop layout stays the unprefixed baseline; smaller screens are handled by *layering* `max-*` overrides on top, so desktop renders byte-identically. Tiers:
   - `max-xl:` (≤1279) - the hero's two-panel split (absolute visual + logos) collapses to a stacked, in-flow column. The split needs ≥1280 to avoid the headline colliding with the visual panel; iPad-landscape (1024) therefore gets the stacked hero with the desktop nav.
diff --git a/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx b/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
index a6b646653d5..1d759463026 100644
--- a/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
+++ b/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
@@ -86,7 +86,7 @@ export function ContentAuthorPage({
                         timeZone: 'UTC',
                       })}
                     </span>
-                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg'>
+                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
                       {p.title}
                     </h3>
                     <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
diff --git a/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx b/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
index fee875358bb..bd3e0bf8dff 100644
--- a/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
+++ b/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
@@ -128,7 +128,7 @@ export function ContentIndexPage({
                         timeZone: 'UTC',
                       })}
                     </span>
-                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg'>
+                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
                       {p.title}
                     </h3>
                     <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
diff --git a/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx b/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
index fcffa86e95a..93b65565d23 100644
--- a/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
+++ b/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
@@ -9,7 +9,7 @@ export function ContentPostLoading() {
           <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
         </div>
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
-          <div className='w-full flex-shrink-0 md:w-[450px]'>
+          <div className='w-full shrink-0 md:w-[450px]'>
             <Skeleton className='aspect-[450/360] w-full rounded-[5px] bg-[var(--surface-hover)]' />
           </div>
           <div className='flex flex-1 flex-col justify-between'>
@@ -40,7 +40,7 @@ export function ContentPostLoading() {
               <Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
-              <Skeleton className='mt-6 h-[24px] w-[200px] rounded-[4px] bg-[var(--surface-hover)]' />
+              <Skeleton className='h-[24px] w-[200px] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[var(--surface-hover)]' />
diff --git a/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx b/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
index 3e96a751aa0..9876b42894d 100644
--- a/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
+++ b/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
@@ -54,7 +54,7 @@ export function ContentPostPage({
         </div>
 
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
-          <div className='w-full flex-shrink-0 md:w-[450px]'>
+          <div className='w-full shrink-0 md:w-[450px]'>
             <div className='relative w-full overflow-hidden rounded-[5px]'>
               <Image
                 src={post.ogImage}
@@ -79,7 +79,7 @@ export function ContentPostPage({
                 {post.title}
               </h1>
               <p
-                className='mt-4 text-[var(--text-body)] text-base leading-[150%] tracking-[0.02em] sm:text-lg'
+                className='mt-4 text-[var(--text-body)] text-base leading-[150%] tracking-[0.02em] sm:text-lg sm:leading-7'
                 itemProp='description'
               >
                 {post.description}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
index df3fcb2c954..db21e5fedea 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
@@ -157,7 +157,7 @@ export function HeroChatLoop({ phase, fading }: HeroChatLoopProps) {
                       i > 0 && 'border-t'
                     )}
                   >
-                    <span className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+                    <span className='flex size-[16px] shrink-0 items-center justify-center'>
                       <span className='text-[var(--text-icon)] text-sm'>{i + 1}</span>
                     </span>
                     <span className='flex-1 text-[var(--text-body)] text-sm'>{title}</span>
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index dd1016c4e48..2c519349363 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -13,7 +13,7 @@ interface StageBlockCardProps {
  */
 export function StageBlockCard({ block }: StageBlockCardProps) {
   return (
-    <div className='relative rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-sm'>
+    <div className='relative rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs'>
       <WorkflowBlockContent block={block} />
       {!block.isTrigger && (
         <span
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
index 1b576a5df87..91337a579ad 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
@@ -101,7 +101,7 @@ interface StageHomeProps {
 const ENTER_BASE =
   'transition-[opacity,transform,filter] [transition-timing-function:cubic-bezier(0.2,0,0,1)]'
 const enterState = (shown: boolean) =>
-  shown ? 'translate-y-0 opacity-100 blur-0' : 'translate-y-1.5 opacity-0 blur-[3px]'
+  shown ? 'translate-y-0 opacity-100 blur-none' : 'translate-y-1.5 opacity-0 blur-[3px]'
 
 const Caret = () => (
   <span
@@ -245,7 +245,7 @@ export function StageHome({
             // The chat input's aesthetic (rounded-2xl, border, soft shadow) is
             // kept THROUGHOUT - including once morphed into the workflow block -
             // so it stays the same white card, just resized.
-            'relative mx-auto overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)] shadow-sm',
+            'relative mx-auto overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs',
             // While the height is held (the parent-driven send-bubble grow, and the
             // loader slide where the card keeps its size), do NOT CSS-transition
             // height - a transition would fight the per-frame camera/dock tracking
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx
index b118375262f..53fb851cb69 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx
@@ -82,11 +82,11 @@ export function KnowledgeBasePanel({
                     )}
                     style={{ '--drop-delay': `${120 + i * 170}ms` } as CSSProperties}
                   >
-                    <file.icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                    <file.icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                     <span className='min-w-0 flex-1 truncate text-[14px] text-[var(--text-body)]'>
                       {file.name}
                     </span>
-                    <span className='flex-shrink-0 text-[14px] text-[var(--text-muted)]'>
+                    <span className='shrink-0 text-[14px] text-[var(--text-muted)]'>
                       {file.size}
                     </span>
                   </div>
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx
index 6036e50cab8..abd4eec9083 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx
@@ -22,7 +22,7 @@ export function WorkflowBlockContent({ block }: WorkflowBlockContentProps) {
       >
         <div
           className={cn(
-            'flex size-[24px] flex-shrink-0 items-center justify-center rounded-md',
+            'flex size-[24px] shrink-0 items-center justify-center rounded-md',
             block.tileBorder && 'border border-[var(--border-1)]'
           )}
           style={{ background: block.bgColor }}
@@ -40,11 +40,9 @@ export function WorkflowBlockContent({ block }: WorkflowBlockContentProps) {
         <div className='flex flex-col gap-2 p-2'>
           {block.rows.map((row) => (
             <div key={row.title} className='flex items-center gap-2'>
-              <span className='flex-shrink-0 text-[14px] text-[var(--text-muted)]'>
-                {row.title}
-              </span>
+              <span className='shrink-0 text-[14px] text-[var(--text-muted)]'>{row.title}</span>
               <span className='flex min-w-0 flex-1 items-center justify-end gap-1.5 text-[14px] text-[var(--text-body)]'>
-                {row.valueIcon && <row.valueIcon className='size-[14px] flex-shrink-0' />}
+                {row.valueIcon && <row.valueIcon className='size-[14px] shrink-0' />}
                 <span className='truncate'>{row.value}</span>
               </span>
             </div>
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
index f622145b8cd..07ed5c61ed1 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
@@ -23,7 +23,7 @@ export function WorkflowBlock({
   handlesVisible = true,
 }: WorkflowBlockProps) {
   return (
-    <div className='relative w-[250px] rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-sm'>
+    <div className='relative w-[250px] rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs'>
       <div
         className={cn(
           'transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
diff --git a/apps/sim/app/(landing)/components/lightbox/lightbox.tsx b/apps/sim/app/(landing)/components/lightbox/lightbox.tsx
index 98e9a17de4a..7afd596cd72 100644
--- a/apps/sim/app/(landing)/components/lightbox/lightbox.tsx
+++ b/apps/sim/app/(landing)/components/lightbox/lightbox.tsx
@@ -45,7 +45,7 @@ export function Lightbox({ isOpen, onClose, src, alt }: LightboxProps) {
   return (
     <div
       ref={overlayRef}
-      className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-sm'
+      className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-xs'
       role='dialog'
       aria-modal='true'
       aria-label='Image viewer'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
index 3526ed71a10..bc6fb5d301c 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
@@ -22,11 +22,11 @@ interface NavMenuItemProps {
 }
 
 const ROW_CLASS =
-  'group/item flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-none'
+  'group/item flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden'
 const TITLE_CLASS = 'truncate text-[14px] text-[var(--text-body)]'
 const DESC_CLASS = 'text-[12px] text-[var(--text-muted)] leading-snug'
 const ARROW_CLASS =
-  'size-4 flex-shrink-0 -translate-x-1 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] group-hover/item:translate-x-0 group-hover/item:opacity-100 group-focus-visible/item:translate-x-0 group-focus-visible/item:opacity-100 motion-reduce:transition-none'
+  'size-4 shrink-0 -translate-x-1 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] group-hover/item:translate-x-0 group-hover/item:opacity-100 group-focus-visible/item:translate-x-0 group-focus-visible/item:opacity-100 motion-reduce:transition-none'
 
 export function NavMenuItem({ item, onSelect }: NavMenuItemProps) {
   const { title, description, href, external } = item
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
index c736b61c95c..41458fddbcc 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
@@ -235,7 +235,7 @@ export function EnterpriseHomeStage({
                       i > 0 && 'border-t'
                     )}
                   >
-                    <Icon className='size-[16px] flex-shrink-0 text-[var(--text-muted)]' />
+                    <Icon className='size-[16px] shrink-0 text-[var(--text-muted)]' />
                     <span className='flex-1 truncate text-[var(--text-primary)] text-sm'>
                       {action}
                     </span>
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
index 5bfe90737fc..8c366be696f 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
@@ -107,8 +107,8 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
   activeItem = 'New chat',
 }: EnterpriseSidebarProps = {}) {
   return (
-    <div className='isolate flex h-full w-[238px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3 will-change-transform'>
-      <div className='flex flex-shrink-0 items-center justify-between px-2'>
+    <div className='isolate flex h-full w-[238px] shrink-0 flex-col bg-[var(--surface-1)] pt-3 will-change-transform'>
+      <div className='flex shrink-0 items-center justify-between px-2'>
         <div className={cn(chipVariants(), 'min-w-0 flex-1')}>
           {/* The exact Brightwave mark the homepage capture seeds
               (`readme-tour-capture` sets `logoUrl: '/landing/rivian-logo.svg'`),
@@ -118,12 +118,12 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
             alt=''
             width={16}
             height={16}
-            className='size-[16px] flex-shrink-0 rounded-sm'
+            className='size-[16px] shrink-0 rounded-sm'
           />
           <span className={chipContentLabelClass}>{workspaceName}</span>
           <ChipChevronDown />
         </div>
-        <div className='flex h-[30px] w-[65px] flex-shrink-0 items-center gap-[1px]'>
+        <div className='flex h-[30px] w-[65px] shrink-0 items-center gap-[1px]'>
           <span className={chipVariants()}>
             <Search className={chipContentIconClass} />
           </span>
@@ -133,12 +133,12 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
         </div>
       </div>
 
-      <div className='mt-4 flex flex-shrink-0 flex-col gap-[1px] px-2'>
+      <div className='mt-4 flex shrink-0 flex-col gap-[1px] px-2'>
         <IconRow icon={Home} label='New chat' active={activeItem === 'New chat'} />
         <IconRow icon={Integration} label='Integrations' active={activeItem === 'Integrations'} />
       </div>
 
-      <div className='mt-4 flex flex-shrink-0 flex-col'>
+      <div className='mt-4 flex shrink-0 flex-col'>
         <SectionLabel label='Chats' />
         <div className='flex flex-col gap-[1px] px-2'>
           {chats.map((chat) => (
@@ -147,7 +147,7 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
         </div>
       </div>
 
-      <div className='mt-4 flex flex-shrink-0 flex-col'>
+      <div className='mt-4 flex shrink-0 flex-col'>
         <SectionLabel label='Workspace' />
         <div className='flex flex-col gap-[1px] px-2'>
           {WORKSPACE_NAV.map((item) => (
@@ -170,16 +170,16 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
         </div>
       </div>
 
-      <div className='flex flex-shrink-0 items-center border-t px-2 pt-[9px] pb-2'>
+      <div className='flex shrink-0 items-center border-t px-2 pt-[9px] pb-2'>
         <div className='flex min-w-0 flex-1'>
           <div className={cn(chipVariants(), 'min-w-0 max-w-full')}>
-            <span className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-4)] text-[var(--text-body)] text-micro leading-none'>
+            <span className='flex size-[16px] shrink-0 items-center justify-center rounded-full bg-[var(--surface-4)] text-[var(--text-body)] text-micro leading-none'>
               {profileName.charAt(0).toUpperCase()}
             </span>
             <span className={chipContentLabelClass}>{profileName}</span>
           </div>
         </div>
-        <span className={cn(chipVariants(), 'flex-shrink-0')}>
+        <span className={cn(chipVariants(), 'shrink-0')}>
           <HelpCircle className={chipContentIconClass} />
         </span>
       </div>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx
index 5ceef83d53e..4d87e15d51b 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx
@@ -141,7 +141,7 @@ export function AccessControlGraphic() {
                 team.leftClass
               )}
             >
-              <span className='relative size-8 overflow-hidden rounded-full shadow-sm'>
+              <span className='relative size-8 overflow-hidden rounded-full shadow-xs'>
                 <Image
                   src={team.avatar}
                   alt=''
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
index 76810c7432e..16b0093323d 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
@@ -74,7 +74,7 @@ const ROW_TONES = [
  * right-aligned timestamp. The newest record is the selected event: it
  * sits on a solid white card wearing the build tile's window chrome
  * exactly — `--white` fill, 1px `--border-1` hairline, `rounded-xl`,
- * `shadow-sm` — while the older records rest directly on the tile,
+ * `shadow-xs` — while the older records rest directly on the tile,
  * quietening with age until a mask gradient dissolves the oldest —
  * implying the trail continues into history. A small "Audit log"
  * header with an `Append-only` mono ChipTag (fill stepped up to
@@ -138,14 +138,14 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
                     'flex items-center gap-3 px-3 py-2.5',
                     newest &&
                       cn(
-                        'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-sm',
+                        'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-xs',
                         styles.stampIn
                       )
                   )}
                 >
                   <span
                     className={cn(
-                      'relative size-7 shrink-0 overflow-hidden rounded-full shadow-sm',
+                      'relative size-7 shrink-0 overflow-hidden rounded-full shadow-xs',
                       tone.avatar,
                       newest && styles.sealPulse
                     )}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
index c3d6a9db162..51ec0ae5d82 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
@@ -274,7 +274,7 @@ export function BuildMethodsGraphic() {
         <div
           aria-hidden='true'
           className={cn(
-            'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm transition-[transform,opacity] [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-xs transition-[transform,opacity] [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
             phase === 'idle' && 'transition-none',
             chatOpen ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
           )}
@@ -297,7 +297,7 @@ export function BuildMethodsGraphic() {
 
         <div
           className={cn(
-            'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm transition-transform [transition-duration:450ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs transition-transform [transition-duration:450ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
             phase === 'idle' && 'transition-none',
             composerVisible ? 'translate-y-0' : 'translate-y-[130%]'
           )}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
index 9b6e8b9f30b..7bdf0e94c91 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
@@ -96,7 +96,7 @@ export function DeployGraphic({
         aria-hidden='true'
         className='absolute inset-0 flex flex-col items-center pr-8 max-lg:pr-6'
       >
-        <div className='mt-1 flex items-center gap-1.5 rounded-[12px] bg-[var(--surface-2)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
+        <div className='mt-1 flex items-center gap-1.5 rounded-[12px] bg-[var(--surface-2)] py-1.5 pr-1.5 pl-2.5 shadow-xs'>
           <span className='text-[var(--text-secondary)] text-caption'>{agentName}</span>
           <ChipTag variant='mono'>{versionTag}</ChipTag>
         </div>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
index 0274e46dc65..31886be5f2c 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
@@ -25,7 +25,7 @@ export function FeaturePlatformPanel({
     <div
       aria-hidden='true'
       className={cn(
-        'absolute right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--surface-2)] shadow-sm',
+        'absolute right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--surface-2)] shadow-xs',
         className
       )}
     >
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
index 3d506df3331..1707e0dbf5d 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
@@ -32,7 +32,7 @@ const CONTROLS: readonly [PolicyControl, PolicyControl, PolicyControl] = [
  * legible on the grey ground (the staging and rollback tiles'
  * environment-pill treatment). Below it, the tile's highlight: the active Production
  * policy lifted onto a white card in the audit tile's exact chrome
- * (`--white` fill, 1px `--border-1` hairline, `rounded-xl`, `shadow-sm`)
+ * (`--white` fill, 1px `--border-1` hairline, `rounded-xl`, `shadow-xs`)
  * pairing the policy name and its scope line with an `Active` tag that
  * carries the tile's one motion, the family's shared quiet 6s ring pulse
  * (from `it-platform-teams-graphic.module.css`, removed under
@@ -92,7 +92,7 @@ export function ItPlatformTeamsGraphic({
           <div className='mb-3 flex items-center justify-between gap-2'>
             <span className='min-w-0 truncate text-[var(--text-primary)] text-base'>{title}</span>
             <span className='flex shrink-0 items-center gap-1.5'>
-              <span className='relative size-4 overflow-hidden rounded-full shadow-sm'>
+              <span className='relative size-4 overflow-hidden rounded-full shadow-xs'>
                 <Image
                   src='/landing/team-avatar-3.jpg'
                   alt=''
@@ -107,7 +107,7 @@ export function ItPlatformTeamsGraphic({
             </span>
           </div>
 
-          <div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
+          <div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
             <span className='min-w-0 flex-1'>
               <span className='block truncate text-[var(--text-primary)] text-small'>
                 {cardTitle}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx
index 861348fe373..34c96176423 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx
@@ -58,7 +58,7 @@ export function LifecycleGraphic() {
               />
             </span>
             <span className='flex min-w-0 flex-1 items-center gap-2'>
-              <span className='flex items-center gap-1.5 rounded-[12px] bg-[var(--white)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
+              <span className='flex items-center gap-1.5 rounded-[12px] bg-[var(--white)] py-1.5 pr-1.5 pl-2.5 shadow-xs'>
                 <span className='text-[var(--text-primary)] text-small'>v3</span>
                 <ChipTag variant='solid'>Live</ChipTag>
               </span>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx
index 581faac6b2b..20120409048 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx
@@ -22,7 +22,7 @@ import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/featu
  * highlight: the node fills solid and
  * the row lifts onto a white card (`--white` fill, 1px `--border-1`
  * hairline, nested `rounded-lg` inside the `rounded-tl-xl` window,
- * `shadow-sm`) pairing "v3 · Stable · Maya Chen" with the tile's
+ * `shadow-xs`) pairing "v3 · Stable · Maya Chen" with the tile's
  * strongest element, the solid Roll back button led by a small `Undo`
  * glyph inked in the button's inverse text color. A quieter v2 row
  * dissolves through a mask gradient below, implying the history continues
@@ -85,7 +85,7 @@ export function RollbackGraphic() {
             <span className='flex w-2.5 shrink-0 justify-center'>
               <span className='size-2.5 rounded-full bg-[var(--text-primary)]' />
             </span>
-            <div className='flex min-w-0 flex-1 items-center gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
+            <div className='flex min-w-0 flex-1 items-center gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
               <span className='min-w-0 flex-1'>
                 <span className='flex items-center gap-2'>
                   <span className='text-[var(--text-primary)] text-small'>v3</span>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
index 069c9ccc318..23a0c0dc469 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
@@ -70,7 +70,7 @@ function fieldValue(field: LogField) {
  * output" section
  * lifts its two-line JSON fragment onto the tile's highlight: a white
  * card in the audit tile's exact chrome (`--white` fill, 1px `--border-1`
- * hairline, rounded, `shadow-sm`), the run's payload presented as the
+ * hairline, rounded, `shadow-xs`), the run's payload presented as the
  * artifact worth watching.
  *
  * The only motion is the soft ring pulse on the live dot (from
@@ -145,7 +145,7 @@ export function RunMonitoringGraphic({
 
           <div className='mt-2'>
             <span className='block text-[var(--text-muted)] text-caption'>{outputLabel}</span>
-            <div className='mt-1.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 font-mono text-caption leading-[1.6] shadow-sm'>
+            <div className='mt-1.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 font-mono text-caption leading-[1.6] shadow-xs'>
               <div className='truncate whitespace-pre'>
                 <span className='text-[var(--text-muted)]'>{`{ "${outputPairs[0].key}": `}</span>
                 <span className='text-[var(--text-secondary)]'>{outputPairs[0].value}</span>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
index bc7a26d8620..26157cfea69 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
@@ -20,7 +20,7 @@ const CHECKS: readonly [string, string, string] = [
  * three hairline-ruled sections tell the
  * merge-area story with an inverted surface hierarchy — the build being
  * promoted is the highlight, a white card (`--white` fill, `--border-1`
- * hairline, nested `rounded-lg`, `shadow-sm`, echoing the audit tile's
+ * hairline, nested `rounded-lg`, `shadow-xs`, echoing the audit tile's
  * selected-record card) pairing a short hash chip with its change
  * message and a "Maya Chen · 2h ago" attribution line (gradient avatar
  * shared with the access and audit tiles); the named check gates sit
@@ -107,7 +107,7 @@ export function StagingGraphic({
           </div>
 
           <div className='px-3 py-2.5'>
-            <div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
+            <div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
               <span className='flex items-center gap-2'>
                 <ChipTag variant='mono'>{changeTag}</ChipTag>
                 <span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/standards-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/standards-graphic.tsx
index af2d1b65ada..e96e32cd2d8 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/standards-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/standards-graphic.tsx
@@ -182,7 +182,7 @@ export function StandardsGraphic({
 
             <div
               className={cn(
-                'absolute top-[74px] left-[122px] flex size-[76px] items-center justify-center rounded-full bg-[var(--text-muted)] shadow-sm',
+                'absolute top-[74px] left-[122px] flex size-[76px] items-center justify-center rounded-full bg-[var(--text-muted)] shadow-xs',
                 styles.sealPulse
               )}
             >
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
index d6b8d377855..d8b66b58c54 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
@@ -44,7 +44,7 @@ const MARKER_TONES: Record<DiffLine['marker'], string> = {
  * thing read. The review's
  * verdict is the tile's one highlight: a white card in the audit tile's
  * exact chrome (`--white` fill, 1px `--border-1` hairline, `rounded-xl`,
- * `shadow-sm`) pairing the reviewer — gradient avatar (shared with the
+ * `shadow-xs`) pairing the reviewer — gradient avatar (shared with the
  * access, audit, and staging tiles), name, and an "Approved these
  * changes" attribution line — with an `Approved` tag that carries the
  * tile's only motion, the family's shared quiet 6s ring pulse (from
@@ -114,8 +114,8 @@ export function TechnicalTeamsGraphic({
             ))}
           </div>
 
-          <div className='mt-3 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
-            <span className='relative size-7 shrink-0 overflow-hidden rounded-full shadow-sm'>
+          <div className='mt-3 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+            <span className='relative size-7 shrink-0 overflow-hidden rounded-full shadow-xs'>
               <Image
                 src='/landing/team-avatar-2.jpg'
                 alt=''
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
index eb4d71115a3..b92e9a40679 100644
--- a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
+++ b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
@@ -82,7 +82,7 @@ function OwnerBadge({ row }: { row: LibraryRow }) {
  * claim. The newest record - an agent's report, written seconds ago - is
  * the selected row: it sits on a solid white card wearing the family's
  * highlight chrome exactly (`--white` fill, 1px `--border-1` hairline,
- * `rounded-xl`, `shadow-sm`), while older rows rest directly on the tile
+ * `rounded-xl`, `shadow-xs`), while older rows rest directly on the tile
  * and quieten with age until a mask gradient dissolves the oldest.
  *
  * Motion (from `file-library-graphic.module.css`): the rows stamp in top
@@ -121,7 +121,7 @@ export function FileLibraryGraphic() {
                     'flex items-center gap-3 px-3 py-2.5',
                     ROW_STEP_CLASSES[index],
                     newest &&
-                      'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-sm'
+                      'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-xs'
                   )}
                 >
                   <OwnerBadge row={row} />
diff --git a/apps/sim/app/(landing)/files/components/files-hero-loop.tsx b/apps/sim/app/(landing)/files/components/files-hero-loop.tsx
index 8da04a21990..2d84f21429b 100644
--- a/apps/sim/app/(landing)/files/components/files-hero-loop.tsx
+++ b/apps/sim/app/(landing)/files/components/files-hero-loop.tsx
@@ -144,7 +144,7 @@ const COL_HEADERS = ['Name', 'Size', 'Type', 'Created', 'Owner'] as const
 function OwnerCell({ owner }: { owner: FileOwner }) {
   return (
     <span className='flex min-w-0 items-center gap-3 text-sm'>
-      <span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] text-[8px] text-[var(--text-secondary)]'>
+      <span className='flex size-[14px] shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] text-[8px] text-[var(--text-secondary)]'>
         {owner.agent ? <AgentIcon className='size-[8px]' /> : owner.initial}
       </span>
       <span className='truncate text-[var(--text-secondary)]'>{owner.name}</span>
@@ -158,12 +158,12 @@ function FileRow({ row }: { row: FileRowData }) {
   return (
     <div className={cn(ROW_GRID, 'h-[40px] items-center')}>
       <span className='flex min-w-0 items-center gap-3 px-6 text-[var(--text-body)] text-sm'>
-        <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
         <span className='truncate'>{row.name}</span>
       </span>
       <span className='px-6 text-[var(--text-secondary)] text-sm'>{row.size}</span>
       <span className='flex items-center gap-3 px-6 text-[var(--text-secondary)] text-sm'>
-        <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
         {row.type}
       </span>
       <span className='px-6 text-[var(--text-secondary)] text-sm'>{row.created}</span>
@@ -243,7 +243,7 @@ export function FilesHeroLoop() {
             fading ? 'opacity-0' : 'opacity-100'
           )}
         >
-          <div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
+          <div className='flex h-[44px] shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
             <div className='flex items-center gap-3'>
               <File className='size-[14px] text-[var(--text-icon)]' />
               <span className='text-[var(--text-body)] text-sm'>Files</span>
@@ -254,9 +254,9 @@ export function FilesHeroLoop() {
             </span>
           </div>
 
-          <div className='flex flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6 py-2.5'>
+          <div className='flex shrink-0 items-center justify-between border-[var(--border)] border-b px-6 py-2.5'>
             <div className='flex flex-1 items-center gap-2.5'>
-              <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <Search className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               <span className='text-[var(--text-subtle)] text-caption'>Search files...</span>
             </div>
             <div className='flex items-center gap-1.5'>
@@ -272,10 +272,7 @@ export function FilesHeroLoop() {
           </div>
 
           <div
-            className={cn(
-              ROW_GRID,
-              'h-10 flex-shrink-0 items-center border-[var(--border)] border-b'
-            )}
+            className={cn(ROW_GRID, 'h-10 shrink-0 items-center border-[var(--border)] border-b')}
           >
             {COL_HEADERS.map((header) => (
               <span key={header} className='px-6 text-[var(--text-muted)] text-caption'>
diff --git a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
index b1c3759f207..78651a6291a 100644
--- a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
+++ b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
@@ -51,7 +51,7 @@ const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2] as const
  * ChipTag (fill stepped up to `--surface-6` so the pill stays legible on
  * the grey ground) above three source rows, each a white card in the
  * audit tile's exact chrome (`--white` fill, 1px `--border-1` hairline,
- * `rounded-xl`, `shadow-sm`) pairing the connector's real brand mark in
+ * `rounded-xl`, `shadow-xs`) pairing the connector's real brand mark in
  * the lifecycle header's outlined `size-6` icon box with the source name,
  * its document count, and a right-aligned sync status. The top row is
  * mid-sync - a pulsing dot beside "Syncing" and the family's quiet 6s
@@ -90,7 +90,7 @@ export function ConnectorSyncGraphic() {
               <div
                 key={row.name}
                 className={cn(
-                  'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm',
+                  'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
                   ROW_STEP_CLASSES[index]
                 )}
               >
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx
index f8c845b0758..5bedda9ef17 100644
--- a/apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx
@@ -170,7 +170,7 @@ export function KnowledgeHeroLoop() {
             fading ? 'opacity-0' : 'opacity-100'
           )}
         >
-          <div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
+          <div className='flex h-[44px] shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
             <div className='flex items-center gap-3'>
               <Database className='size-[14px] text-[var(--text-icon)]' />
               <span className='text-[var(--text-body)] text-sm'>Knowledge Base</span>
@@ -181,9 +181,9 @@ export function KnowledgeHeroLoop() {
             </div>
           </div>
 
-          <div className='flex flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6 py-2.5'>
+          <div className='flex shrink-0 items-center justify-between border-[var(--border)] border-b px-6 py-2.5'>
             <div className='flex items-center gap-2.5'>
-              <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <Search className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               <span className='text-[var(--text-subtle)] text-caption'>
                 Search knowledge bases...
               </span>
@@ -237,7 +237,7 @@ export function KnowledgeHeroLoop() {
                     >
                       <td className='px-6 py-2.5 align-middle'>
                         <span className='flex min-w-0 items-center gap-3 text-[var(--text-body)] text-sm'>
-                          <Database className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                          <Database className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                           <span className='truncate'>{row.name}</span>
                         </span>
                       </td>
@@ -251,7 +251,7 @@ export function KnowledgeHeroLoop() {
                         <span className='flex items-center gap-2.5'>
                           <span className='flex items-center gap-1'>
                             {row.connectors.map((Icon, iconIndex) => (
-                              <Icon key={iconIndex} className='size-3.5 flex-shrink-0' />
+                              <Icon key={iconIndex} className='size-3.5 shrink-0' />
                             ))}
                           </span>
                           {isSyncRow && syncPhase === 'syncing' && (
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx b/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx
index 559f3f4f058..2b41c80f34f 100644
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx
+++ b/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx
@@ -28,7 +28,7 @@ const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2] as const
  * match-count mono ChipTag (fill stepped up to `--surface-6` so the pill
  * stays legible on the grey ground), the query itself lifted onto the
  * tile's highlight - a white card in the audit tile's exact chrome
- * (`--white` fill, 1px `--border-1` hairline, rounded, `shadow-sm`) with
+ * (`--white` fill, 1px `--border-1` hairline, rounded, `shadow-xs`) with
  * a blinking caret holding the query - a row of quiet mono filter chips,
  * and the three matched runs as airy rows ruled by 1px `--border-1`
  * hairlines, each pairing the workflow name with its Error badge and
@@ -61,7 +61,7 @@ export function FilterRunsGraphic() {
             </ChipTag>
           </div>
 
-          <div className='flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 shadow-sm'>
+          <div className='flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 shadow-xs'>
             <Search className='size-[14px] shrink-0 text-[var(--text-icon)]' />
             <span className='min-w-0 truncate text-[var(--text-body)] text-caption'>
               nightly sync
diff --git a/apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx b/apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx
index 5fbba1b2920..a422df03c73 100644
--- a/apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx
+++ b/apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx
@@ -196,7 +196,7 @@ function LogsTableRow({ row, visible }: LogsTableRowProps) {
     >
       <td className='px-6 align-middle'>
         <div className='flex items-center gap-2'>
-          <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+          <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
           <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
             {row.workflowName}
           </span>
@@ -283,7 +283,7 @@ export function LogsHeroLoop() {
             fading ? 'opacity-0' : 'opacity-100'
           )}
         >
-          <div className='flex h-[44px] flex-shrink-0 items-center border-[var(--border)] border-b px-6'>
+          <div className='flex h-[44px] shrink-0 items-center border-[var(--border)] border-b px-6'>
             <div className='flex w-full items-center justify-between'>
               <div className='flex items-center gap-3'>
                 <Library className='size-[14px] text-[var(--text-icon)]' />
@@ -304,10 +304,10 @@ export function LogsHeroLoop() {
             </div>
           </div>
 
-          <div className='flex-shrink-0 border-[var(--border)] border-b px-6 py-2.5'>
+          <div className='shrink-0 border-[var(--border)] border-b px-6 py-2.5'>
             <div className='flex items-center justify-between'>
               <div className='flex flex-1 items-center gap-2.5'>
-                <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                <Search className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                 <span className='flex-1 text-[var(--text-muted)] text-caption'>Search logs...</span>
               </div>
               <div className='flex items-center gap-1.5'>
@@ -351,7 +351,7 @@ export function LogsHeroLoop() {
                 >
                   <td className='px-6 align-middle'>
                     <div className='flex items-center gap-2'>
-                      <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                      <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                       <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
                         {LIVE_ROW.workflowName}
                       </span>
diff --git a/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx b/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
index 31c25d177bd..f81a439520e 100644
--- a/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
+++ b/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
@@ -48,14 +48,14 @@ export interface PricingCardProps {
  */
 function FeatureValue({ value }: { value: CellValue }) {
   if (value === true) {
-    return <Check className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+    return <Check className='size-[14px] shrink-0 text-[var(--text-icon)]' />
   }
   if (value === false) {
     return <span className='select-none text-[var(--text-muted)]'>–</span>
   }
   if (typeof value === 'object') {
     const Icon = CELL_ICONS[value.icon]
-    return <Icon className='size-[14px] flex-shrink-0' />
+    return <Icon className='size-[14px] shrink-0' />
   }
   return (
     <span className='whitespace-nowrap text-right text-[var(--text-primary)] text-sm tabular-nums'>
diff --git a/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx b/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
index 04f6aec860b..300a9c17147 100644
--- a/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
@@ -31,7 +31,7 @@ const DRAFT_BAR_CLASSES = [styles.bar0, styles.bar1, styles.bar2, styles.bar3, s
  * audit tile's stamp-in, since the draft is written once, not re-typed),
  * and the closing delivery row is the tile's highlight — a white card in
  * the audit tile's exact chrome (`--white` fill, 1px `--border-1`
- * hairline, `rounded-xl`, `shadow-sm`) pairing a passing circle-check
+ * hairline, `rounded-xl`, `shadow-xs`) pairing a passing circle-check
  * and the delivery claim with a right-aligned timestamp. The header's
  * status tag carries the family's shared quiet 6s ring pulse. Both
  * motions are removed under `prefers-reduced-motion`.
@@ -92,7 +92,7 @@ export function DocumentDraftGraphic({
             />
           ))}
 
-          <div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
+          <div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
             <CircleCheck className='size-[13px] shrink-0 text-[var(--text-icon)]' />
             <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-small'>
               {footerLabel}
diff --git a/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx b/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
index de32c529dd9..79cd1e6c58e 100644
--- a/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
@@ -13,7 +13,7 @@ import styles from '@/app/(landing)/solutions/components/feature-graphics/knowle
  * `--surface-3` fill), the agent's grounded answer reads back as plain
  * `--text-primary` prose, and the tile's highlight is the citation — a
  * white source card in the audit tile's exact chrome (`--white` fill,
- * 1px `--border-1` hairline, `rounded-xl`, `shadow-sm`) pairing a
+ * 1px `--border-1` hairline, `rounded-xl`, `shadow-xs`) pairing a
  * `BookOpen` icon in the lifecycle header's outlined `size-6` icon box
  * with the knowledge-base document the answer came from.
  *
@@ -77,7 +77,7 @@ export function KnowledgeAnswerGraphic({
 
           <div
             className={cn(
-              'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm',
+              'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
               styles.stepSource
             )}
           >
diff --git a/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx b/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
index 31c134e4079..c42beb382dc 100644
--- a/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
@@ -29,7 +29,7 @@ const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2] as const
  * hairline-ruled rows, each a passing circle-check, the transaction
  * label, and a right-aligned mono amount. The tile's highlight is the
  * one exception: a white card in the audit tile's exact chrome
- * (`--white` fill, 1px `--border-1` hairline, `rounded-xl`, `shadow-sm`)
+ * (`--white` fill, 1px `--border-1` hairline, `rounded-xl`, `shadow-xs`)
  * pairing the unmatched transaction and its routed-for-review line with
  * a `Flagged` tag that carries the tile's one repeating motion, the
  * family's shared quiet 6s ring pulse.
@@ -85,7 +85,7 @@ export function ReconcileGraphic() {
 
           <div
             className={cn(
-              'mt-2 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm',
+              'mt-2 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
               styles.exceptionIn
             )}
           >
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx b/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
index e8b36e90bd0..43eabce5476 100644
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
+++ b/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
@@ -44,7 +44,7 @@ const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2, styles.row3, st
  * The Tables grid told inside a cropped product window: the window keeps
  * the dark tiles' slot geometry (`top-5`, `left-0`, bleeding off the right
  * and bottom edges, `rounded-tl-xl`) but wears the light tiles' card
- * chrome - `--white` fill, 1px `--border-1` hairline, `shadow-sm` - so the
+ * chrome - `--white` fill, 1px `--border-1` hairline, `shadow-xs` - so the
  * grid reads as the workspace's own editor. Its `h-12` title bar pairs the
  * `Table` icon (in a hairline `size-6` icon box, the lifecycle header's
  * treatment) with the `Leads` table name over a hairline rule, and the
@@ -62,7 +62,7 @@ export function TableGridGraphic() {
     <FeatureGraphicShell>
       <div
         aria-hidden='true'
-        className='absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm'
+        className='absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-xs'
       >
         <div className='flex h-12 items-center gap-2 border-[var(--border-1)] border-b px-4'>
           <span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
diff --git a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
index ed293f4713f..073d5150bd0 100644
--- a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
+++ b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
@@ -34,7 +34,7 @@ const OUTPUT_BLOCKS = [
  * edges with vertical tangents landing on small port dots (the access
  * tile's junction vocabulary). Every block is a white card in the audit
  * tile's exact chrome (`--white` fill, 1px `--border-1` hairline,
- * `rounded-lg`, `shadow-sm`) so the canvas reads as the workspace's own
+ * `rounded-lg`, `shadow-xs`) so the canvas reads as the workspace's own
  * block language; the agent is the tile's strongest element, pairing its
  * name with a solid `Agent` ChipTag.
  *
@@ -85,14 +85,14 @@ export function WorkflowCanvasGraphic() {
             ))}
           </svg>
 
-          <div className='-translate-x-1/2 absolute top-[14px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-sm'>
+          <div className='-translate-x-1/2 absolute top-[14px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs'>
             <span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
             <span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
               New ticket
             </span>
           </div>
 
-          <div className='-translate-x-1/2 absolute top-[102px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
+          <div className='-translate-x-1/2 absolute top-[102px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
             <span
               className={cn(
                 'size-2.5 shrink-0 rounded-full bg-[var(--text-primary)]',
@@ -109,7 +109,7 @@ export function WorkflowCanvasGraphic() {
             <div
               key={block.label}
               className={cn(
-                '-translate-x-1/2 absolute top-[196px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-sm',
+                '-translate-x-1/2 absolute top-[196px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs',
                 block.leftClass
               )}
             >
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 7eb13f01ab3..232ab9ebe9b 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -1,6 +1,386 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./tailwind.css";
+@import "tw-animate-css";
+
+@plugin '@tailwindcss/typography';
+
+/**
+ * Explicit sources rather than v4's automatic detection, so the scanned set
+ * stays exactly what the v3 `content` array covered. `lib` styles rendered
+ * markdown (`lib/content/mdx.tsx`) and `blocks/icon-color.ts` returns the app's
+ * only bare `text-black` candidate — dropping either silently resolves those to
+ * nothing.
+ */
+@source '../../app';
+@source '../../components';
+@source '../../blocks';
+@source '../../lib';
+@source '../../ee';
+@source '../../content';
+@source '../../../../packages/emcn/src';
+@source '../../../../packages/workflow-renderer/src';
+
+/* Tests are not production styling sources. */
+@source not '../../**/*.test.{js,ts,jsx,tsx,mdx}';
+@source not '../../**/*.spec.{js,ts,jsx,tsx,mdx}';
+
+/**
+ * Nesting-aware dark variant: `dark:` utilities apply inside a `.dark` subtree
+ * UNLESS they sit inside a nested `.light` island. The landing page pins itself
+ * light (a `.light` wrapper) while the visitor's `<html>` may carry `.dark`;
+ * without this exclusion, `dark:` utilities on emcn components (e.g. the
+ * `primary` chip's `dark:bg-white`) would leak through and render
+ * white-on-white. `:where()` keeps specificity equal to base utilities so the
+ * normal (non-island) dark-mode cascade is unchanged.
+ */
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
+
+/**
+ * v4 wraps `hover:` (and the `group-hover:`/`peer-hover:` variants derived from
+ * it) in `@media (hover: hover)`, so hover styling goes dead on touch devices.
+ * v3 emitted them unconditionally, and this codebase already has `hover-hover`
+ * below for the cases that genuinely want that gating — so plain `hover:` was
+ * deliberately meant to apply everywhere. Restored to the v3 semantics.
+ */
+@custom-variant hover (&:hover);
+
+@custom-variant hover-hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
+/**
+ * `inline` is required, not stylistic: it substitutes each value into the
+ * utility instead of routing it through a `--color-*` variable declared on
+ * `:root`. A theme variable defined as `var(--x)` computes once at `:root`, so
+ * a nested `.dark`/`.light` island that redefines `--x` would inherit the
+ * frozen root value. Inlining resolves the reference at the element, which is
+ * what the v3 config did and what the light-island pattern depends on.
+ */
+@theme inline {
+  /**
+   * Pinned to the v3 default stack. v4's own `--font-sans` is an
+   * `-apple-system`-first list, and Preflight resolves the document font through
+   * it, so taking the new default would shift the face on every element that
+   * does not name a font.
+   */
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+
+  --font-season: var(--font-season);
+  --font-body:
+    ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial,
+    sans-serif, Segoe UI Emoji, Segoe UI Symbol;
+  --font-mono:
+    var(--font-martian-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /**
+   * Pinned in px. v4's defaults are rem, and rem in a media query resolves
+   * against the browser's initial font size rather than `html { font-size }` —
+   * so a reader who raised their browser's default text size would get the
+   * mobile layout at a desktop width. These are v3's px values unchanged.
+   */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --text-micro: 10px;
+  /**
+   * `xs` is the one size here that also exists in Tailwind's own scale, so it
+   * inherits `--text-xs--line-height` unless that is overridden too. v4's ratio
+   * (4/3) against an 11px size yields 14.67px, where v3 resolved 16.5px; the
+   * paired value keeps the leading where it was.
+   */
+  --text-xs: 11px;
+  --text-xs--line-height: 1.5;
+  --text-caption: 12px;
+  --text-small: 13px;
+  --text-base: 15px;
+  --text-md: 16px;
+
+  /**
+   * Hairline scale key. Overriding `spacing` rather than `width`/`height` keeps
+   * every derived scale in agreement — a `w-px` line and the `-right-px` offset
+   * that positions it resolve to the same value, which a width-only override
+   * desynchronizes by half a device pixel.
+   */
+  --spacing-px: var(--border-width);
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  /**
+   * Neutral border colors are plain hex, not the HSL triplets the shadcn keys
+   * above use — `hsl(var(--border))` would be invalid CSS and get dropped,
+   * leaving the utility to fall through to the `*` border-color rule below by
+   * accident.
+   */
+  --color-border: var(--border);
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  /**
+   * v4 ships its palette in oklch, which renders visibly more saturated than
+   * v3's sRGB hex on a P3 display. These are the v3 values for every stock
+   * palette colour the app actually uses, recovered from a v3 build, so the
+   * upgrade changes no rendered colour. Adopting the wider-gamut palette is a
+   * design decision to make on its own, not a side effect of the upgrade.
+   */
+  --color-amber-50: #fffbeb;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-blue-500: #3b82f6;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-green-500: #22c55e;
+  --color-orange-400: #fb923c;
+  --color-purple-500: #a855f7;
+  --color-red-50: #fef2f2;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-950: #450a0a;
+  --color-yellow-200: #fef08a;
+  --color-yellow-500: #eab308;
+
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
+  --color-gray-500: #737373;
+  --color-gray-600: #525252;
+  --color-gray-700: #404040;
+  --color-gray-800: #262626;
+  --color-gray-900: #171717;
+  --color-gray-950: #0a0a0a;
+
+  --radius-xs: 2px;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+
+  /**
+   * These names intentionally match the app's own `:root` custom properties, so
+   * the value below reads back as a self-reference. It resolves: Tailwind emits
+   * the theme copy inside `@layer theme`, and the app's later unlayered `:root`
+   * declaration outranks any layered one, so the real value always wins. The
+   * `inline` substitution then resolves it at the element, which is what lets
+   * `.dark` override each shadow.
+   */
+  --shadow-subtle: var(--shadow-subtle);
+  --shadow-medium: var(--shadow-medium);
+  --shadow-overlay: var(--shadow-overlay);
+  --shadow-kbd: var(--shadow-kbd);
+  --shadow-kbd-sm: var(--shadow-kbd-sm);
+  --shadow-card: var(--shadow-card);
+  --shadow-ambient: var(--shadow-ambient);
+
+  /**
+   * The home/chat reading column. The heading, input, suggested actions,
+   * transcript, and its skeleton must all share one value or the footer input
+   * visibly misaligns with the messages above it — so they read this key rather
+   * than repeating a literal.
+   */
+  --container-chat: 44rem;
+
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  --animate-running-hatch-scroll: running-hatch-scroll 900ms linear infinite;
+  --animate-ring-pulse: ring-pulse 1.5s ease-in-out infinite;
+  --animate-stream-fade-in: stream-fade-in 300ms ease-out forwards;
+  --animate-slide-in-bottom: slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  /* Deliberately slower than tw-animate-css's own 200ms ease-out default. */
+  --animate-collapsible-down: collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-collapsible-up: collapsible-up 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-hero-cursor-press: hero-cursor-press 340ms cubic-bezier(0.23, 1, 0.32, 1);
+  --animate-hero-modal-in: hero-modal-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-hero-kb-content-morph: hero-kb-content-morph 420ms cubic-bezier(0.22, 1, 0.36, 1) 260ms
+    forwards;
+  --animate-hero-file-drop: hero-file-drop 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-hero-node-pop: hero-node-pop 440ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-hero-edge-draw: hero-edge-draw 520ms ease-out forwards;
+}
+
+/**
+ * One period of the running block's hatch (26px horizontal). Shifting by
+ * exactly one period is what makes the loop seamless.
+ *
+ * A transform, not `background-position`: shifting the position makes the
+ * browser re-rasterize the gradient every frame at a new subpixel offset, so
+ * each hard edge antialiases differently frame to frame and the gaps visibly
+ * shimmer. A transform rasterizes once and slides the layer.
+ */
+@keyframes running-hatch-scroll {
+  from {
+    transform: translateX(-26px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes dash-animation {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -24;
+  }
+}
+
+@keyframes placeholder-pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes ring-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 1.5px var(--border-success);
+  }
+  50% {
+    box-shadow: 0 0 0 4px var(--border-success);
+  }
+}
+
+@keyframes stream-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hero-stage-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes hero-cursor-press {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(0.8);
+  }
+}
+
+@keyframes hero-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes hero-kb-content-morph {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes hero-file-drop {
+  from {
+    opacity: 0;
+    transform: translateY(-44px) scale(0.96);
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes hero-node-pop {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes hero-graph-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.22);
+  }
+}
+
+@keyframes hero-edge-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
 
 /**
  * CSS-based sidebar and panel widths to prevent SSR hydration mismatches.
@@ -306,7 +686,7 @@ html.sidebar-booting .sidebar-shell-inner {
 }
 
 /**
- * Landing loop animation styles (keyframes defined in tailwind.config.ts)
+ * Landing loop animation styles (keyframes defined in the `@keyframes` blocks above)
  */
 .landing-loop-animated-dash {
   animation: dash-animation 1.5s linear infinite;
@@ -667,8 +1047,20 @@ html.sidebar-booting .sidebar-shell-inner {
  * Base styles for body, scrollbars, and global elements
  */
 @layer base {
-  * {
+  /**
+   * The pseudo-elements are listed because v4's Preflight no longer defaults
+   * their border-color the way v3's did — it leaves them at `currentColor`, so
+   * the first `before:border-*` anyone writes would draw a near-black hairline
+   * instead of the neutral token.
+   */
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
     border-color: var(--border);
+  }
+
+  * {
     overscroll-behavior-x: none;
   }
 
@@ -800,6 +1192,69 @@ html.sidebar-booting .sidebar-shell-inner {
   display: none;
 }
 
+/**
+ * Preflight compatibility with Tailwind v3. Each rule restores exactly one v3
+ * behaviour, found by diffing computed styles of bare elements between a v3 and
+ * a v4 build rather than from the upgrade guide. In `base`, so utilities win.
+ */
+@layer base {
+  /**
+   * v4 Preflight dropped v3's button cursor rule. Reproduced verbatim from v3 —
+   * `[role="button"]` included, no `:disabled` exclusion — rather than the
+   * upgrade guide's `:not(:disabled)` form, which changes behaviour of its own.
+   */
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  /* v3's companion rule: "Make sure disabled buttons don't get the pointer cursor." */
+  :disabled {
+    cursor: default;
+  }
+
+  /**
+   * v4 extends `background-color: transparent` from just buttons to every form
+   * control, so an unstyled input/select/textarea shows the surface behind it
+   * instead of the UA field colour. `revert` restores the UA value, which is
+   * what v3 left in place; buttons stay transparent as they were in v3.
+   */
+  input:not([type="button"], [type="reset"], [type="submit"]),
+  select,
+  optgroup,
+  textarea {
+    background-color: revert;
+  }
+
+  /* v4 uses `color-mix(currentcolor 50%)`; v3 used a fixed grey. */
+  ::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  /* v4 adds `padding: 0` to the universal reset, zeroing UA table and option padding. */
+  th,
+  td {
+    padding: 1px;
+  }
+
+  option {
+    padding-block-end: 1px;
+    padding-inline: 2px;
+  }
+
+  /* v3 Preflight normalised the search field; v4 dropped the rule. */
+  [type="search"] {
+    -webkit-appearance: textfield;
+    appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  /* v4's universal reset zeroes margins, which un-centres a native `<dialog>`. */
+  dialog {
+    margin: auto;
+  }
+}
+
 /**
  * Dark mode specific overrides
  */
@@ -825,7 +1280,7 @@ input[type="search"]::-ms-clear {
 
 /**
  * Utilities and special effects
- * Animation keyframes are defined in tailwind.config.ts
+ * Animation keyframes are defined in the `@keyframes` blocks above
  */
 @layer utilities {
   .scrollbar-none {
diff --git a/apps/sim/app/_styles/tailwind.css b/apps/sim/app/_styles/tailwind.css
new file mode 100644
index 00000000000..b56cd4a0fc6
--- /dev/null
+++ b/apps/sim/app/_styles/tailwind.css
@@ -0,0 +1,9 @@
+/**
+ * `source(none)` is the one Tailwind v4 construct Biome's CSS parser rejects,
+ * and a parse error aborts Biome for the whole file. Isolating it here costs one
+ * `biome.json` exclusion instead of un-linting all of `globals.css`.
+ *
+ * It disables automatic source detection; `globals.css` then lists every
+ * scanned path explicitly via `@source`.
+ */
+@import 'tailwindcss' source(none);
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index f1107301485..b5f265fd18e 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -124,7 +124,7 @@ function UnsubscribeContent() {
         <p className={'text-[var(--text-muted)] text-md'}>
           Choose which emails you'd like to stop receiving.
         </p>
-        <p className={'mt-2 text-[var(--text-muted)] text-sm'}>{data?.email}</p>
+        <p className={'text-[var(--text-muted)] text-sm'}>{data?.email}</p>
       </div>
 
       <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item/conversation-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item/conversation-list-item.tsx
index 57f5346360c..6232f8e4ddc 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item/conversation-list-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item/conversation-list-item.tsx
@@ -27,13 +27,13 @@ export function ConversationListItem({
       {showStatusDot && (
         <span
           aria-hidden='true'
-          className={cn('size-[6px] flex-shrink-0 rounded-full', statusIndicatorClassName)}
+          className={cn('size-[6px] shrink-0 rounded-full', statusIndicatorClassName)}
           style={{
             backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
           }}
         />
       )}
-      {actions && <div className='ml-auto flex flex-shrink-0 items-center'>{actions}</div>}
+      {actions && <div className='ml-auto flex shrink-0 items-center'>{actions}</div>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index 79c86dafb6f..392c085baae 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -37,7 +37,7 @@ export function ErrorShell({ title, description, icon, children }: ErrorShellPro
   return (
     <div className='flex h-full flex-1 items-center justify-center bg-[var(--bg)] px-6 py-12'>
       <div className='flex w-full max-w-[420px] flex-col items-center gap-5 text-center'>
-        <div className='size-[52px] shrink-0 rounded-2xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-sm dark:bg-[var(--surface-5)]'>
+        <div className='size-[52px] shrink-0 rounded-2xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-xs dark:bg-[var(--surface-5)]'>
           <div className='flex size-full items-center justify-center rounded-[11px] border border-[var(--border-1)] bg-[var(--bg)] text-[var(--text-icon)]'>
             {icon ?? <TriangleAlert className='size-[22px]' />}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
index 52f9f130ef1..e498892ed02 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
@@ -66,7 +66,7 @@ export function InlineRenameInput({
         }
       }}
       onClick={(e) => e.stopPropagation()}
-      className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+      className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
       maxLength={100}
       disabled={disabled}
       autoComplete='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 2a1182f4960..f1911cd1144 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -27,7 +27,7 @@ import { useFolderStore } from '@/stores/folders/store'
 
 const ICON_CLASS = 'size-[14px]'
 const BUTTON_CLASS =
-  'flex size-[26px] items-center justify-center rounded-[6px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-none'
+  'flex size-[26px] items-center justify-center rounded-[6px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden'
 
 interface MessageActionsProps {
   content: string
diff --git a/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx b/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx
index a76ec009448..e10ad0d62b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx
@@ -89,7 +89,7 @@ export function PresenceAvatars({
   }
 
   return (
-    <div className={cn('-space-x-1 flex flex-shrink-0 items-center', className)}>
+    <div className={cn('-space-x-1 flex shrink-0 items-center', className)}>
       {overflowCount > 0 && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
index 72267cfdfc5..e334f69116a 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx
@@ -12,7 +12,7 @@ interface ResourceTileProps {
  * the glyph is the tile's job: the descendant rule outranks an icon's own class.
  */
 export const RESOURCE_TILE_BASE =
-  'flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] [&_svg]:size-5'
+  'flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] [&_svg]:size-5'
 
 /** Filled treatment worn by the skills and custom tools resource tiles. */
 export const RESOURCE_TILE_FILL = 'bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
index afbe7593240..f928eec1c6b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
@@ -19,7 +19,7 @@ import { renderMoveOptions } from '@/app/workspace/[workspaceId]/components/fold
 /** Shared chrome for every action button, so the bar reads as one control strip. */
 const ACTION_BUTTON_CLASS = cn(
   chipFilledFillTokens,
-  'hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
 )
 
 interface ActionButtonProps {
@@ -98,7 +98,7 @@ export function ResourceActionBar({
   return (
     <div
       className={cn(
-        '-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)] transform',
+        '-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)]',
         'fade-in-0 slide-in-from-bottom-2 animate-in duration-200 ease-out motion-reduce:animate-none',
         className
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 6424128e163..006271eb23a 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -540,8 +540,8 @@ function BreadcrumbLocationPopover({
             )}
           >
             <span className='relative inline-grid size-[16px] shrink-0 place-items-center'>
-              <Icon className='col-start-1 row-start-1 size-[16px] text-[var(--text-icon)] opacity-100 blur-0 transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
-              <ArrowUpLeft className='col-start-1 row-start-1 size-[16px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
+              <Icon className='col-start-1 row-start-1 size-[16px] text-[var(--text-icon)] opacity-100 blur-none transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
+              <ArrowUpLeft className='col-start-1 row-start-1 size-[16px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-none group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-none motion-reduce:transition-none' />
             </span>
             {rootBreadcrumb?.label && (
               <OverflowText
@@ -562,7 +562,7 @@ function BreadcrumbLocationPopover({
           border
           className={cn(
             POPOVER_ANIMATION_CLASSES,
-            'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm'
+            'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-xs'
           )}
           onMouseEnter={openPopover}
           onMouseLeave={scheduleClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
index 53f0ea69706..19de857693b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
@@ -201,7 +201,7 @@ export const ResourceOptions = memo(function ResourceOptions({
                     sideOffset={6}
                     className={cn(
                       POPOVER_ANIMATION_CLASSES,
-                      'z-[var(--z-popover)] w-fit origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                      'z-[var(--z-popover)] w-fit origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border)] bg-[var(--bg)] shadow-xs'
                     )}
                   >
                     {popoverFilter.content}
@@ -262,7 +262,7 @@ const SearchSection = memo(function SearchSection({ search }: { search: SearchCo
       {search.dropdown && (
         <div
           ref={search.dropdownRef}
-          className='absolute top-full left-0 z-[var(--z-dropdown)] mt-1.5 w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+          className='absolute top-full left-0 z-[var(--z-dropdown)] mt-1.5 w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-xs'
         >
           {search.dropdown}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx
index a8471c89d3d..e2e3ae25b0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx
@@ -123,7 +123,7 @@ const DataTableBase = forwardRef<DataTableHandle, DataTableProps>(function DataT
                     onChange={(e) => setEditValue(e.target.value)}
                     onBlur={commitEdit}
                     onKeyDown={handleKeyDown}
-                    className='w-full min-w-[60px] bg-transparent outline-none ring-1 ring-[var(--brand-secondary)] ring-inset'
+                    className='w-full min-w-[60px] bg-transparent outline-hidden ring-1 ring-[var(--brand-secondary)] ring-inset'
                   />
                 ) : (
                   String(header ?? '')
@@ -150,7 +150,7 @@ const DataTableBase = forwardRef<DataTableHandle, DataTableProps>(function DataT
                       onChange={(e) => setEditValue(e.target.value)}
                       onBlur={commitEdit}
                       onKeyDown={handleKeyDown}
-                      className='w-full min-w-[60px] bg-transparent outline-none ring-1 ring-[var(--brand-secondary)] ring-inset'
+                      className='w-full min-w-[60px] bg-transparent outline-hidden ring-1 ring-[var(--brand-secondary)] ring-inset'
                     />
                   ) : (
                     String(row[ci] ?? '')
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
index 8b6c6a29636..d548c8ac2f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
@@ -271,7 +271,7 @@ export const PdfViewerCore = memo(function PdfViewerCore({ source, filename }: P
                   <ReactPdfPage
                     pageNumber={i + 1}
                     width={pageWidth}
-                    className='!overflow-clip [&_.textLayer]:!overflow-clip'
+                    className='overflow-clip! [&_.textLayer]:overflow-clip!'
                     renderTextLayer
                     renderAnnotationLayer={false}
                     aria-label={`${filename} page ${i + 1}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
index d155c2540a8..b5a1d64d259 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
@@ -43,7 +43,7 @@ export const LANGUAGE_OPTIONS = [
 ] as const
 
 const CONTROL_CLASS =
-  'flex size-[24px] items-center justify-center rounded-lg text-[var(--text-icon)] outline-none transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-body)] focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]'
+  'flex size-[24px] items-center justify-center rounded-lg text-[var(--text-icon)] outline-hidden transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-body)] focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]'
 
 /**
  * Code block view with hover controls (language picker, line-wrap, copy). When the block holds
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu-chrome.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu-chrome.ts
index b10e143c4ce..83a10d3f63c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu-chrome.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu-chrome.ts
@@ -6,4 +6,4 @@
 
 /** The floating toolbar: bordered card, popover layer, with the enter animation. */
 export const BUBBLE_MENU_CLASS =
-  'fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-150 ease-out motion-reduce:animate-none'
+  'fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-xs duration-150 ease-out motion-reduce:animate-none'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-editing.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-editing.tsx
index 8cbd0dc7b6d..66ad7a62745 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-editing.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-editing.tsx
@@ -53,7 +53,7 @@ export function LinkUrlInput({ value, onChange, onCommit, onCancel, inputRef }:
         }
       }}
       placeholder='Paste or type a link…'
-      className='h-[28px] w-[220px] bg-transparent px-2 text-[var(--text-body)] text-small outline-none placeholder:text-[var(--text-subtle)]'
+      className='h-[28px] w-[220px] bg-transparent px-2 text-[var(--text-body)] text-small outline-hidden placeholder:text-[var(--text-subtle)]'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx
index 015b61465ea..71d9499e644 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx
@@ -147,7 +147,7 @@ export function LinkHoverCard({ editor }: LinkHoverCardProps) {
       aria-label='Link'
       onMouseEnter={cancelHide}
       onMouseLeave={scheduleHide}
-      className='z-[var(--z-popover)] flex items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm transition-opacity duration-150 ease-out'
+      className='z-[var(--z-popover)] flex items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-xs transition-opacity duration-150 ease-out'
     >
       {isEditing ? (
         <>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
index 098b99ac790..918934aa0e1 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
@@ -6,7 +6,7 @@
 
 /** The floating panel: bordered card with the enter animation, width-capped like the chat mention menu. */
 export const SUGGESTION_SURFACE_CLASS =
-  'min-w-[220px] max-w-[320px] origin-top-left animate-in rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 shadow-sm duration-100 fade-in-0 zoom-in-95 slide-in-from-top-2 motion-reduce:animate-none'
+  'min-w-[220px] max-w-[320px] origin-top-left animate-in rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 shadow-xs duration-100 fade-in-0 zoom-in-95 slide-in-from-top-2 motion-reduce:animate-none'
 
 /**
  * A scrollable list body, added alongside {@link SUGGESTION_SURFACE_CLASS}. Caps the height and scrolls
@@ -17,7 +17,7 @@ export const SUGGESTION_SCROLL_CLASS = 'max-h-[240px] scroll-py-1.5 overflow-y-a
 /** A selectable row: icon + label, 14px icon in `--text-icon`, truncating label. The `img` rules
  * size custom-block image icons (rendered as `<img>`, so the `svg` rules never reach them). */
 export const SUGGESTION_ITEM_CLASS =
-  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-none transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)] [&_img]:pointer-events-none [&_img]:size-[14px] [&_img]:shrink-0'
+  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left text-[var(--text-body)] text-caption outline-hidden transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)] [&_img]:pointer-events-none [&_img]:size-[14px] [&_img]:shrink-0'
 
 /** A group heading above a run of rows. */
 export const SUGGESTION_GROUP_LABEL_CLASS =
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
index b8acd061158..013c980bd5c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx
@@ -28,7 +28,7 @@ export function ToolbarButton({
           onMouseDown={(event) => event.preventDefault()}
           onClick={onClick}
           className={cn(
-            'flex size-[28px] items-center justify-center rounded-md text-[var(--text-icon)] outline-none transition-colors focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]',
+            'flex size-[28px] items-center justify-center rounded-md text-[var(--text-icon)] outline-hidden transition-colors focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]',
             isActive
               ? 'bg-[var(--surface-active)] text-[var(--text-body)]'
               : 'hover-hover:bg-[var(--surface-hover)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx
index 7005203bd0b..3b3f10b6b3d 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx
@@ -512,7 +512,7 @@ function RawMarkdownField({
         readOnly={isStreaming || lockedView}
         tabIndex={lockedView ? -1 : undefined}
         className={cn(
-          'w-full resize-none border-none bg-transparent p-0 text-current caret-current outline-none focus-visible:outline-none',
+          'w-full resize-none border-none bg-transparent p-0 text-current caret-current outline-hidden focus-visible:outline-hidden',
           'scrollbar-none placeholder:text-current placeholder:opacity-55',
           lockedView && 'select-none opacity-50',
           autoGrow && 'overflow-hidden',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index 39f3eb1e3eb..b98be496e84 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -203,7 +203,7 @@ export function AgentGroup({
           onClick={toggleExpanded}
           className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
         >
-          <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+          <div className='flex size-[16px] shrink-0 items-center justify-center'>
             <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
           </div>
           {isWorking ? (
@@ -213,14 +213,14 @@ export function AgentGroup({
           )}
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
+              'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
               !expanded && '-rotate-90'
             )}
           />
         </button>
       ) : (
         <div className='flex min-w-0 items-center gap-2'>
-          <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+          <div className='flex size-[16px] shrink-0 items-center justify-center'>
             <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
           </div>
           {isWorking ? (
@@ -407,8 +407,8 @@ function BoundedViewport({ children, isStreaming, unbounded = false }: BoundedVi
       </div>
       {!unbounded && hasOverflow && (
         <>
-          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-gradient-to-b from-[var(--bg)] to-transparent' />
-          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-gradient-to-t from-[var(--bg)] to-transparent' />
+          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-linear-to-b from-[var(--bg)] to-transparent' />
+          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-linear-to-t from-[var(--bg)] to-transparent' />
         </>
       )}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index 908990eea5d..f76c5e4bf03 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -239,7 +239,7 @@ export function ToolCallItem({
 
   return (
     <div className='flex min-w-0 items-center gap-[6px] pl-6'>
-      {BlockIcon && <BrandIcon icon={BlockIcon} className='size-[14px] flex-shrink-0' />}
+      {BlockIcon && <BrandIcon icon={BlockIcon} className='size-[14px] shrink-0' />}
       {isExecuting ? (
         <ShimmerText className='min-w-0 truncate text-[13px] leading-[18px] [--shimmer-rest:var(--text-secondary)]'>
           {title}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index d75aedac99f..1a8ea3dfd5b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -357,7 +357,7 @@ const MARKDOWN_COMPONENTS = {
           {kind && ref && (
             <ContextMentionIcon
               context={{ kind, label: kind === 'file' ? fileIconLabel(ref, label) : label }}
-              className='relative top-0.5 size-[12px] flex-shrink-0 text-[var(--text-icon)]'
+              className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]'
             />
           )}
           {children}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
index 3ad8133f722..31ac390e5bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/interaction-card.tsx
@@ -5,7 +5,7 @@ export const INTERACTION_CARD_ROW_CLASSES =
   'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left transition-colors'
 
 export const INTERACTION_CARD_TEXT_INPUT_CLASSES =
-  'min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
+  'min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-hidden placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
 
 export interface InteractionCardRecapItem {
   label: string
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
index 5b32e024ed3..305a02b97fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/message-sources/message-sources.tsx
@@ -7,7 +7,7 @@ import type { SourceTagData } from '@/app/workspace/[workspaceId]/home/component
 
 /** The action-row button, matching the copy and vote buttons beside it with room for a count. */
 const BUTTON_CLASSES =
-  'flex h-[26px] items-center gap-1 rounded-[6px] px-1.5 text-[var(--text-icon)] text-caption transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-none data-[state=open]:bg-[var(--surface-active)] data-[state=open]:hover-hover:bg-[var(--surface-active)]'
+  'flex h-[26px] items-center gap-1 rounded-[6px] px-1.5 text-[var(--text-icon)] text-caption transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden data-[state=open]:bg-[var(--surface-active)] data-[state=open]:hover-hover:bg-[var(--surface-active)]'
 
 interface MessageSourcesProps {
   sources: readonly SourceTagData[]
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
index 49dc7d9f4c4..4ab09fcf173 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
@@ -54,7 +54,7 @@ export function parseQuestionAnswerMessage(
 }
 
 /** Ghost icon-button chrome shared by the stepper chevrons and the dismiss X. */
-const ICON_BUTTON_CLASSES = 'relative size-[14px] flex-shrink-0 p-0'
+const ICON_BUTTON_CLASSES = 'relative size-[14px] shrink-0 p-0'
 
 /**
  * Leading checkbox slot for multi_select rows. Purely presentational — it
@@ -64,7 +64,7 @@ const ICON_BUTTON_CLASSES = 'relative size-[14px] flex-shrink-0 p-0'
  */
 function RowCheckbox({ checked, disabled }: { checked: boolean; disabled?: boolean }) {
   return (
-    <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+    <div className='flex size-[16px] shrink-0 items-center justify-center'>
       <span
         data-state={checked ? 'checked' : 'unchecked'}
         data-disabled={disabled ? '' : undefined}
@@ -346,7 +346,7 @@ export function QuestionDisplay({
           divided={options.length > 0}
           leading={
             isMulti ? (
-              <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+              <div className='flex size-[16px] shrink-0 items-center justify-center'>
                 <button
                   ref={freeTextCheckboxRef}
                   type='button'
@@ -427,7 +427,7 @@ export function QuestionDisplay({
             label={isLast ? 'Submit' : 'Continue'}
             disabled={!canSubmitStep}
             onClick={submitMultiStep}
-            leading={<div className='flex size-[16px] flex-shrink-0 items-center justify-center' />}
+            leading={<div className='flex size-[16px] shrink-0 items-center justify-center' />}
           />
         )}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx
index 4dcf591b77e..97c9c683b3e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx
@@ -173,9 +173,9 @@ export function SourceCard({ source, query, onSummarize, dense = false }: Source
         </a>
         <OverflowText
           label={meta.join(' · ')}
-          className='max-w-[40%] flex-shrink-0 text-[var(--text-muted)] text-caption'
+          className='max-w-[40%] shrink-0 text-[var(--text-muted)] text-caption'
         />
-        <div className='flex flex-shrink-0 items-center opacity-0 transition-opacity group-focus-within/source:opacity-100 group-hover/source:opacity-100 [@media(hover:none)]:opacity-100'>
+        <div className='flex shrink-0 items-center opacity-0 transition-opacity group-focus-within/source:opacity-100 group-hover/source:opacity-100 [@media(hover:none)]:opacity-100'>
           <CopyLinkAction url={source.url} />
         </div>
       </div>
@@ -206,7 +206,7 @@ export function SourceCard({ source, query, onSummarize, dense = false }: Source
           </p>
         )}
       </div>
-      <div className='flex flex-shrink-0 items-center gap-1 self-start opacity-0 transition-opacity group-focus-within/source:opacity-100 group-hover/source:opacity-100 [@media(hover:none)]:opacity-100'>
+      <div className='flex shrink-0 items-center gap-1 self-start opacity-0 transition-opacity group-focus-within/source:opacity-100 group-hover/source:opacity-100 [@media(hover:none)]:opacity-100'>
         <CopyLinkAction url={source.url} />
         {onSummarize && (
           <Button variant='ghost' size='sm' onClick={() => onSummarize(source)}>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-chip.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-chip.tsx
index 03d00442aa1..75a276e46a2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-chip.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-chip.tsx
@@ -62,12 +62,12 @@ export function SourceChip({ source }: SourceChipProps) {
           )}
         >
           {ConnectorIcon ? (
-            <BrandIcon icon={ConnectorIcon} className='size-[12px] flex-shrink-0' />
+            <BrandIcon icon={ConnectorIcon} className='size-[12px] shrink-0' />
           ) : hostname ? (
             <img
               src={faviconUrl(hostname, 32)}
               alt=''
-              className='size-[12px] flex-shrink-0 rounded-[3px]'
+              className='size-[12px] shrink-0 rounded-[3px]'
               onError={hideBrokenFavicon}
             />
           ) : null}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 6add2081368..a543f294b12 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -1849,7 +1849,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
                     i > 0 && 'border-t'
                   )}
                 >
-                  <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+                  <div className='flex size-[16px] shrink-0 items-center justify-center'>
                     <span className='text-[var(--text-icon)] text-sm'>{i + 1}</span>
                   </div>
                   <span className='flex-1 text-[var(--text-body)] text-sm'>{title}</span>
@@ -1936,7 +1936,7 @@ export function WorkspaceResourceDisplay({
     <>
       <ContextMentionIcon
         context={context}
-        className='relative top-0.5 size-[12px] flex-shrink-0 text-[var(--text-icon)]'
+        className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]'
       />
       {resource.title}
     </>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index c72f9b89fbb..8f2df7c9f49 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -1059,7 +1059,7 @@ function MessageContentInner({
       lastSegment?.type === 'stopped' ? (
         <>
           <div className='mt-[10px] flex items-center gap-[8px]'>
-            <CircleStop className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+            <CircleStop className='size-[16px] shrink-0 text-[var(--text-icon)]' />
             <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
           </div>
           {actions && <div className='mt-[10px]'>{actionsRow}</div>}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 9133ba18929..1e0f8656a43 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -152,7 +152,7 @@ const LAYOUT_STYLES = {
     attachmentWidth: 'max-w-[70%]',
     userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
     assistantRow: 'group/msg',
-    footer: 'flex-shrink-0 px-[24px] pb-[16px]',
+    footer: 'shrink-0 px-[24px] pb-[16px]',
     footerInner: 'mx-auto max-w-chat',
   },
   'copilot-view': {
@@ -164,7 +164,7 @@ const LAYOUT_STYLES = {
     attachmentWidth: 'max-w-[85%]',
     userBubble: 'max-w-[85%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3 py-2',
     assistantRow: 'group/msg',
-    footer: 'flex-shrink-0 px-3 pb-3',
+    footer: 'shrink-0 px-3 pb-3',
     footerInner: '',
   },
 } as const
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
index e574d7be79f..2690ae9f639 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
@@ -135,7 +135,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
           aria-label={label}
           title={label}
           className={cn(
-            'relative size-[30px] flex-shrink-0 overflow-hidden p-0',
+            'relative size-[30px] shrink-0 overflow-hidden p-0',
             hasUnviewedCompletion && 'text-[var(--brand-primary)]'
           )}
           onClick={() => setHasUnviewedCompletion(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
index e8b786851c9..a3f9e23198d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
@@ -85,7 +85,7 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
   )
 
   return (
-    <div className='w-[clamp(170px,33%,280px)] min-w-0 flex-shrink'>
+    <div className='w-[clamp(170px,33%,280px)] min-w-0 shrink'>
       <ChipInput
         ref={inputRef}
         type='text'
@@ -98,7 +98,7 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
         value={query}
         inputClassName='min-w-0'
         endAdornment={
-          <div className='-mr-1 flex flex-shrink-0 items-center gap-0.5'>
+          <div className='-mr-1 flex shrink-0 items-center gap-0.5'>
             <FindCount query={query} result={result} />
             <Button
               type='button'
@@ -106,7 +106,7 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Previous match'
               disabled={!result?.matches}
-              className='size-[24px] flex-shrink-0 p-0'
+              className='size-[24px] shrink-0 p-0'
               onClick={() => step('back')}
             >
               <ArrowUp className='size-[13px]' />
@@ -117,7 +117,7 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Next match'
               disabled={!result?.matches}
-              className='size-[24px] flex-shrink-0 p-0'
+              className='size-[24px] shrink-0 p-0'
               onClick={() => step('forward')}
             >
               <ArrowDown className='size-[13px]' />
@@ -127,7 +127,7 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               variant='ghost-secondary'
               size='sm'
               aria-label='Close find bar'
-              className='size-[24px] flex-shrink-0 p-0'
+              className='size-[24px] shrink-0 p-0'
               onClick={dismiss}
             >
               <X className='size-[13px]' />
@@ -165,7 +165,7 @@ function FindCount({ query, result }: { query: string; result: BrowserFindResult
   if (result.matches === 0) {
     if (!result.final) return null
     return (
-      <span aria-live='polite' className='flex-shrink-0 px-1 text-[var(--text-muted)] text-caption'>
+      <span aria-live='polite' className='shrink-0 px-1 text-[var(--text-muted)] text-caption'>
         No results
       </span>
     )
@@ -173,7 +173,7 @@ function FindCount({ query, result }: { query: string; result: BrowserFindResult
   return (
     <span
       aria-live='polite'
-      className='flex-shrink-0 px-1 text-[var(--text-muted)] text-caption tabular-nums'
+      className='shrink-0 px-1 text-[var(--text-muted)] text-caption tabular-nums'
     >
       {result.activeMatchOrdinal}/{result.matches}
     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
index b22b8a72236..b6853088828 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-page-issue.tsx
@@ -148,7 +148,7 @@ export function BrowserPageIssueView({ issue, onReload, focusRecovery }: Browser
         <h2
           ref={headingRef}
           id='browser-page-issue-heading'
-          className='rounded-[4px] font-medium text-[var(--text-primary)] text-base outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-1)]'
+          className='rounded-[4px] font-medium text-[var(--text-primary)] text-base outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-1)]'
           tabIndex={-1}
         >
           {copy.headline}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
index 9621a98ca0d..e51d745252d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
@@ -1259,7 +1259,7 @@ export function BrowserSession({
             size='sm'
             aria-label='Back'
             disabled={!pageState?.canGoBack}
-            className='size-[30px] flex-shrink-0 p-0'
+            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('back', {}, scopeId)}
           >
             <ArrowLeft className='size-[14px]' />
@@ -1270,7 +1270,7 @@ export function BrowserSession({
             size='sm'
             aria-label='Forward'
             disabled={!pageState?.canGoForward}
-            className='size-[30px] flex-shrink-0 p-0'
+            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('forward', {}, scopeId)}
           >
             <ArrowRight className='size-[14px]' />
@@ -1280,7 +1280,7 @@ export function BrowserSession({
             variant='ghost-secondary'
             size='sm'
             aria-label='Reload page'
-            className='size-[30px] flex-shrink-0 p-0'
+            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('reload', {}, scopeId)}
           >
             <RefreshCw className='size-[14px]' />
@@ -1486,7 +1486,7 @@ export function BrowserSession({
                   size='sm'
                   aria-label='Fill a saved password'
                   title='Fill a saved password'
-                  className='size-[30px] flex-shrink-0 p-0'
+                  className='size-[30px] shrink-0 p-0'
                 >
                   <Key className='size-[14px]' />
                 </Button>
@@ -1525,9 +1525,9 @@ export function BrowserSession({
                 type='button'
                 aria-label='Browser menu'
                 title='Browser menu'
-                className={cn(chipVariants(), 'flex-shrink-0')}
+                className={cn(chipVariants(), 'shrink-0')}
               >
-                <MoreHorizontal className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                <MoreHorizontal className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content/generic-resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content/generic-resource-content.tsx
index af92c312255..c75b921183b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content/generic-resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content/generic-resource-content.tsx
@@ -35,10 +35,7 @@ export function GenericResourceContent({ data }: GenericResourceContentProps) {
         <div key={entry.toolCallId} className='flex flex-col gap-2 px-4 py-3'>
           <div className='flex items-center gap-2'>
             {entry.status === 'executing' && (
-              <PillsRing
-                className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-                animate
-              />
+              <PillsRing className='size-[14px] shrink-0 text-[var(--text-tertiary)]' animate />
             )}
             <span className='text-[13px] text-[var(--text-primary)]'>
               {getToolStatusDisplayTitle(entry.displayTitle, entry.status, entry.toolName)}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index 82fcd1814e0..57e17b324e7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -782,7 +782,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
               onClick={() => openInternalLink(`/workspace/${workspaceId}/w/${w.id}`)}
               className='flex items-center gap-2 rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-4)]'
             >
-              <WorkflowIcon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <WorkflowIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               <OverflowText label={w.name} className='text-[var(--text-primary)] text-small' />
             </button>
           ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 527c6d4cf3a..8d39213854f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -53,7 +53,7 @@ export interface ResourceTypeConfig {
 function WorkflowDropdownItem({ item }: DropdownItemRenderProps) {
   return (
     <>
-      <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
       <OverflowText label={item.name} />
     </>
   )
@@ -67,7 +67,7 @@ function FileDropdownItem({ item }: DropdownItemRenderProps) {
   const DocIcon = getDocumentIcon('', item.name)
   return (
     <>
-      <DocIcon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <DocIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
       <OverflowText label={item.name} />
     </>
   )
@@ -76,7 +76,7 @@ function FileDropdownItem({ item }: DropdownItemRenderProps) {
 function IconDropdownItem({ item, icon: Icon }: DropdownItemRenderProps & { icon: ElementType }) {
   return (
     <>
-      <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
       <OverflowText label={item.name} />
     </>
   )
@@ -93,7 +93,7 @@ function IntegrationDropdownItem({ item }: DropdownItemRenderProps) {
   if (!Icon) return <OverflowText label={item.name} />
   return (
     <>
-      <BrandIcon icon={Icon} className='size-[14px] flex-shrink-0' />
+      <BrandIcon icon={Icon} className='size-[14px] shrink-0' />
       <OverflowText label={item.name} />
     </>
   )
@@ -114,19 +114,19 @@ function LogDropdownItem({ item }: DropdownItemRenderProps) {
   const statusColor = status === 'info' ? null : STATUS_CONFIG[status].color
   return (
     <>
-      <Library className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <Library className='size-[14px] shrink-0 text-[var(--text-icon)]' />
       <OverflowText label={workflowName} />
       {statusColor && (
         <div
           aria-hidden
-          className='ml-auto size-[5px] flex-shrink-0 rounded-xs'
+          className='ml-auto size-[5px] shrink-0 rounded-xs'
           style={{ backgroundColor: statusColor }}
         />
       )}
       {time && (
         <span
           className={cn(
-            'flex-shrink-0 text-[var(--text-tertiary)] text-caption',
+            'shrink-0 text-[var(--text-tertiary)] text-caption',
             !statusColor && 'ml-auto'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/search-sources/search-sources.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/search-sources/search-sources.tsx
index 9bf5db007a8..e59ce49e348 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/search-sources/search-sources.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/search-sources/search-sources.tsx
@@ -112,7 +112,7 @@ function SourceChip({
       onClick={actionable ? onConnect : undefined}
       className={cn(!actionable && !unavailable && 'cursor-default')}
       title={title}
-      leftAdornment={<BrandIcon icon={connector.meta.icon} className='size-[14px] flex-shrink-0' />}
+      leftAdornment={<BrandIcon icon={connector.meta.icon} className='size-[14px] shrink-0' />}
       rightIcon={!busy && actionable ? Plus : undefined}
       rightAdornment={
         busy ? <Loader className='size-[14px] text-[var(--text-icon)]' animate /> : undefined
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
index 76e1ec28c28..1035e08e009 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
@@ -360,14 +360,14 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
          */}
         <ChevronDown
           className={cn(
-            'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
+            'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
             'group-hover/suggested:opacity-100 group-focus-visible/toggle:opacity-100',
             !expanded && '-rotate-90'
           )}
         />
       </button>
       <Expandable expanded={expanded}>
-        <ExpandableContent className={cn(!animationsEnabled && '!animate-none')}>
+        <ExpandableContent className={cn(!animationsEnabled && 'animate-none!')}>
           {/* 6px, matching a sidebar section header to its first item — both headers
               are an 18px box around 12px text, so equal padding reads as equal
               distance. Padding an inner wrapper rather than the animated element:
@@ -392,7 +392,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
                       i > 0 && 'border-t'
                     )}
                   >
-                    <BrandIcon icon={Icon} className='size-[16px] flex-shrink-0' />
+                    <BrandIcon icon={Icon} className='size-[16px] shrink-0' />
                     <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
                       {action.label}
                     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 6d1658abfc3..15c8be8df73 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -62,7 +62,7 @@ export interface PlusMenuHandle {
  * so the editor reads the same whether it's the chat input or inside the modal.
  */
 const FIELD_MIRROR_CLASSES = cn(
-  'm-0 box-border min-h-[24px] w-full break-words [overflow-wrap:anywhere] border-0 bg-transparent',
+  'm-0 box-border min-h-[24px] w-full [overflow-wrap:anywhere] border-0 bg-transparent',
   'px-1 py-1 font-body text-[14px] leading-[24px] tracking-[-0.015em]'
 )
 
@@ -74,7 +74,7 @@ const FIELD_MIRROR_CLASSES = cn(
 export const TEXTAREA_BASE_CLASSES = cn(
   FIELD_MIRROR_CLASSES,
   'block h-auto resize-none overflow-hidden',
-  'text-transparent caret-[var(--text-primary)] outline-none',
+  'text-transparent caret-[var(--text-primary)] outline-hidden',
   'placeholder:text-[var(--text-muted)]',
   'focus-visible:ring-0 focus-visible:ring-offset-0'
 )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
index 8299e26cc27..8b78f27fe03 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx
@@ -102,7 +102,7 @@ export const MicButton = memo(function MicButton({
           <span
             className={cn(
               'absolute inset-0 flex items-center justify-center transition-[opacity,filter,scale] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
-              isListening ? 'scale-100 opacity-100 blur-0' : 'scale-[0.25] opacity-0 blur-[4px]'
+              isListening ? 'scale-100 opacity-100 blur-none' : 'scale-[0.25] opacity-0 blur-[4px]'
             )}
           >
             <VoiceWaveform audioLevelsRef={audioLevelsRef} isListening={isListening} />
@@ -110,7 +110,7 @@ export const MicButton = memo(function MicButton({
           <Mic
             className={cn(
               'size-[16px] transition-[opacity,filter,scale] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
-              isListening ? 'scale-[0.25] opacity-0 blur-[4px]' : 'scale-100 opacity-100 blur-0'
+              isListening ? 'scale-[0.25] opacity-0 blur-[4px]' : 'scale-100 opacity-100 blur-none'
             )}
           />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.test.tsx
index cc8c6431457..30a4a7d0ea2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.test.tsx
@@ -258,7 +258,7 @@ describe('PromptEditor autosize', () => {
     const initialValue = `${'x'.repeat(PASTE_RENDER_THRESHOLDS.ENHANCED_TEXT_CHARACTERS)} ${SKILL_CHIP_TRIGGER}summarize`
     const { textarea, unmount } = mountEditor({ initialValue, initialContexts: [context] })
 
-    expect(textarea.className).not.toContain('!text-[var(--text-primary)]')
+    expect(textarea.className).not.toContain('text-[var(--text-primary)]!')
     expect(textarea.parentElement?.querySelector('[aria-hidden="true"]')).not.toBeNull()
 
     unmount()
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.tsx
index 1d1b084917a..4f4c0b55587 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.tsx
@@ -263,7 +263,7 @@ export function PromptEditor({
           rows={1}
           className={cn(
             TEXTAREA_BASE_CLASSES,
-            usePlainTextMode && '!text-[var(--text-primary)]',
+            usePlainTextMode && 'text-[var(--text-primary)]!',
             readOnly && 'cursor-default caret-transparent'
           )}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
index f7ed8d201b2..00e16bdb723 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -7,7 +7,7 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type
 import { getIntegrationMatcher } from '@/blocks/integration-matcher'
 
 const USER_MESSAGE_CLASSES =
-  'whitespace-pre-wrap break-words [overflow-wrap:anywhere] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
+  'whitespace-pre-wrap [overflow-wrap:anywhere] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
 
 const COMPACT_CLASSES =
   'truncate text-small leading-[20px] font-[family-name:var(--font-inter)] text-[var(--text-primary)] tracking-[0] antialiased'
@@ -111,7 +111,7 @@ function MentionHighlight({ context }: { context: ChatMessageContext }) {
     <span className='inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
       <ContextMentionIcon
         context={context}
-        className='relative top-0.5 size-[12px] flex-shrink-0 text-[var(--text-icon)]'
+        className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]'
       />
       {context.label}
     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index eb7b651a274..014e0058998 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -893,7 +893,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
             isAgentResponding={isSending}
             genericResourceData={genericResourceData ?? undefined}
             onUserInteraction={handleResourceInteraction}
-            className={skipResourceTransition ? '!transition-none' : undefined}
+            className={skipResourceTransition ? 'transition-none!' : undefined}
           />
         </Suspense>
       </MothershipResourcesProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
index 43a25c08ba1..0e539ce18ec 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx
@@ -83,7 +83,7 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
   }
 
   return (
-    <div className='size-11 flex-shrink-0 rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-sm dark:bg-[var(--surface-5)]'>
+    <div className='size-11 shrink-0 rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-xs dark:bg-[var(--surface-5)]'>
       <div
         className='flex size-full items-center justify-center rounded-[9px] border border-[var(--border-1)] bg-[var(--bg)]'
         style={brandBg ? { background: brandBg } : undefined}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
index db86183c216..3f1af96fdd8 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
@@ -282,7 +282,7 @@ export function ChunkEditor({
                     ? 'This chunk is synced from a connector and cannot be edited'
                     : 'Read-only view'
             }
-            className='mx-auto block min-h-full w-full max-w-[48rem] resize-none overflow-hidden border-0 bg-transparent px-8 py-6 font-sans text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]'
+            className='mx-auto block min-h-full w-full max-w-[48rem] resize-none overflow-hidden border-0 bg-transparent px-8 py-6 font-sans text-[var(--text-body)] text-sm outline-hidden placeholder:text-[var(--text-subtle)]'
             disabled={!canEdit}
             readOnly={!canEdit}
             spellCheck={false}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index ff977135dc1..4096360c8a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -401,11 +401,11 @@ export function DocumentTagsModal({
                   <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                     {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                   </span>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
                   <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
                     {formatValueForDisplay(tag.value, tag.fieldType)}
                   </span>
-                  <div className='flex flex-shrink-0 items-center gap-1'>
+                  <div className='flex shrink-0 items-center gap-1'>
                     <Button
                       variant='ghost'
                       onClick={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 6978ecf4f94..7520a10b93e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -1007,7 +1007,7 @@ export function Document({
             content: {
               content: (
                 <div className='flex items-center gap-2'>
-                  <FileText className='size-5 flex-shrink-0 text-[var(--text-muted)]' />
+                  <FileText className='size-5 shrink-0 text-[var(--text-muted)]' />
                   <span className='text-[var(--text-muted)] text-sm italic'>
                     {processingStatus === 'pending' && 'Document processing pending...'}
                     {processingStatus === 'processing' && 'Document processing in progress...'}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index 1176e7250bb..53701c0dc96 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -1125,7 +1125,7 @@ export function KnowledgeBase({
               onClick={() => setShowConnectorsModal(true)}
               className={cn(chipVariants({ variant: 'filled' }), 'max-w-[180px]')}
             >
-              <span className='relative flex size-[14px] flex-shrink-0 items-center justify-center'>
+              <span className='relative flex size-[14px] shrink-0 items-center justify-center'>
                 {syncInFlight ? (
                   <Loader className='size-[14px]' animate />
                 ) : (
@@ -1649,7 +1649,7 @@ function TagFilterValueControl({ entry, onChange }: TagFilterValueControlProps)
             placeholder='From'
             fullWidth
           />
-          <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>to</span>
+          <span className='shrink-0 text-[var(--text-muted)] text-caption'>to</span>
           <ChipDatePicker
             value={entry.valueTo || undefined}
             onChange={(value) => onChange({ valueTo: value })}
@@ -1678,7 +1678,7 @@ function TagFilterValueControl({ entry, onChange }: TagFilterValueControlProps)
           onChange={(event) => onChange({ value: event.target.value })}
           placeholder='From'
         />
-        <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>to</span>
+        <span className='shrink-0 text-[var(--text-muted)] text-caption'>to</span>
         <ChipInput
           value={entry.valueTo}
           onChange={(event) => onChange({ valueTo: event.target.value })}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index ced7d0eb350..bc33d83c8ff 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -6,7 +6,7 @@ import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/provide
 /** One source of truth for the button chrome, so the three actions read as one control strip. */
 const ACTION_BUTTON_CLASS = cn(
   chipFilledFillTokens,
-  'hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
 )
 
 interface ActionBarProps {
@@ -57,10 +57,7 @@ export function ActionBar({
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 10 }}
         transition={{ duration: 0.2 }}
-        className={cn(
-          '-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)] transform',
-          className
-        )}
+        className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)]', className)}
       >
         <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
           <span className='px-1 text-[var(--text-secondary)] text-small'>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index 7e0fdeeb337..ef75dfa1fbd 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -465,7 +465,7 @@ export function AddConnectorModal({
                         <span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
                           {tagDef.displayName}
                         </span>
-                        <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                        <span className='shrink-0 text-[var(--text-muted)] text-xs'>
                           ({tagDef.fieldType})
                         </span>
                       </div>
@@ -557,7 +557,7 @@ function ConnectorTypeCard({ type, config, onClick }: ConnectorTypeCardProps) {
       className='flex w-full items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
       onClick={onClick}
     >
-      <div className='size-9 flex-shrink-0'>
+      <div className='size-9 shrink-0'>
         <div
           className={cn(
             'flex size-full items-center justify-center rounded-xl border',
@@ -582,7 +582,7 @@ function ConnectorTypeCard({ type, config, onClick }: ConnectorTypeCardProps) {
           className='text-[var(--text-muted)] text-caption'
         />
       </div>
-      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
+      <ArrowRight className='size-4 shrink-0 text-[var(--text-icon)]' />
     </button>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 90862127cb8..56144f8dee7 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -193,10 +193,10 @@ export function AddDocumentsModal({
                     >
                       {file.name}
                     </span>
-                    <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                    <span className='shrink-0 text-[var(--text-muted)] text-xs'>
                       {formatFileSize(file.size)}
                     </span>
-                    <div className='flex flex-shrink-0 items-center gap-1'>
+                    <div className='flex shrink-0 items-center gap-1'>
                       {isProcessing ? (
                         <Loader className='size-4 text-[var(--text-muted)]' animate />
                       ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index ec640af722a..aa2d370e492 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -52,13 +52,13 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
           const DocumentIcon = getDocumentIcon('', doc.name)
           return (
             <div key={doc.id} className='flex items-center gap-2 border-b p-2 last:border-b-0'>
-              <DocumentIcon className='size-4 flex-shrink-0 text-[var(--text-muted)]' />
+              <DocumentIcon className='size-4 shrink-0 text-[var(--text-muted)]' />
               <span className='min-w-0 max-w-[120px] truncate text-[var(--text-primary)] text-caption'>
                 {doc.name}
               </span>
               {doc.tagValue && (
                 <>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
                   <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
                     {doc.tagValue}
                   </span>
@@ -287,11 +287,11 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                     <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                       {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                     </span>
-                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
                     <span className='min-w-0 flex-1 text-[var(--text-muted)] text-caption'>
                       {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
                     </span>
-                    <div className='flex flex-shrink-0 items-center gap-1'>
+                    <div className='flex shrink-0 items-center gap-1'>
                       <Button
                         variant='ghost'
                         onClick={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index e51d987953a..5d249935a55 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -412,7 +412,7 @@ function ConnectorCard({
         <div className='flex min-w-0 items-center gap-2.5'>
           <div
             className={cn(
-              'flex size-9 flex-shrink-0 items-center justify-center rounded-xl border',
+              'flex size-9 shrink-0 items-center justify-center rounded-xl border',
               brandBg
                 ? 'border-[var(--border-1)]'
                 : 'border-[var(--border-muted)] bg-[var(--surface-4)]'
@@ -434,11 +434,11 @@ function ConnectorCard({
                 <OverflowText label={connectorDef?.name || connector.connectorType} />
                 {syncInFlight && <Loader className='size-3 text-[var(--text-muted)]' animate />}
               </span>
-              <Badge variant={statusConfig.variant} size='sm' dot className='flex-shrink-0'>
+              <Badge variant={statusConfig.variant} size='sm' dot className='shrink-0'>
                 {statusConfig.label}
               </Badge>
               {syncsPerMember && (
-                <Badge variant='gray' size='sm' icon={Users} className='flex-shrink-0'>
+                <Badge variant='gray' size='sm' icon={Users} className='shrink-0'>
                   Per member
                 </Badge>
               )}
@@ -485,7 +485,7 @@ function ConnectorCard({
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-0.5'>
+        <div className='flex shrink-0 items-center gap-0.5'>
           {canEdit && (
             <>
               {canFullResync ? (
@@ -604,7 +604,7 @@ function ConnectorCard({
         <div className='border-[var(--border-muted)] border-t px-2 py-2'>
           <div className='flex flex-col gap-2 rounded-md border border-[var(--border-muted)] bg-[var(--surface-3)] px-2.5 py-2'>
             <div className='flex items-center gap-1.5 text-[var(--text-primary)] text-caption'>
-              <TriangleAlert className='size-3 flex-shrink-0 text-[var(--caution)]' />
+              <TriangleAlert className='size-3 shrink-0 text-[var(--caution)]' />
               Per-member sync is disabled
             </div>
             <p className='text-[var(--text-muted)] text-caption leading-snug'>
@@ -620,7 +620,7 @@ function ConnectorCard({
         <div className='border-[var(--border-muted)] border-t px-2 py-2'>
           <div className='flex flex-col gap-2 rounded-md border border-[var(--border-muted)] bg-[var(--surface-3)] px-2.5 py-2'>
             <div className='flex items-center gap-1.5 text-[var(--text-primary)] text-caption'>
-              <TriangleAlert className='size-3 flex-shrink-0 text-[var(--caution)]' />
+              <TriangleAlert className='size-3 shrink-0 text-[var(--caution)]' />
               Connector disabled after repeated sync failures
             </div>
             <p className='text-[var(--text-muted)] text-caption leading-snug'>
@@ -827,7 +827,7 @@ export function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
 
         return (
           <div key={log.id} className='flex items-start gap-2 rounded-md px-2 py-1.5 text-xs'>
-            <div className='mt-[1px] flex-shrink-0'>
+            <div className='mt-[1px] shrink-0'>
               {state === 'running' ? (
                 <Loader className='size-3 text-[var(--text-muted)]' animate />
               ) : state === 'interrupted' ? (
@@ -968,7 +968,7 @@ function MemberSyncHistory({ logs, members, isLoading }: MemberSyncHistoryProps)
             const changes = log.docsAdded + log.docsUpdated + log.docsTombstoned + log.docsPurged
             return (
               <div key={log.id} className='flex items-start gap-2 rounded-md px-2 py-1.5 text-xs'>
-                <div className='mt-[1px] flex-shrink-0'>
+                <div className='mt-[1px] shrink-0'>
                   {state === 'running' ? (
                     <Loader className='size-3 text-[var(--text-muted)]' animate />
                   ) : state === 'interrupted' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
index 1caa439d744..db5acdc2c56 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -733,7 +733,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
                           href={doc.sourceUrl}
                           target='_blank'
                           rel='noopener noreferrer'
-                          className='flex size-5 flex-shrink-0 items-center justify-center rounded-md text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
+                          className='flex size-5 shrink-0 items-center justify-center rounded-md text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                         >
                           <SquareArrowUpRight className='size-3' />
                         </a>
@@ -745,7 +745,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
                 <Button
                   variant='ghost-secondary'
                   size='sm'
-                  className='flex-shrink-0'
+                  className='shrink-0'
                   disabled={doc.userExcluded ? isRestoring : isExcluding}
                   onClick={() =>
                     doc.userExcluded
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 858aeab0dd5..d66fa33d6bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -542,10 +542,10 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                       >
                         {file.name}
                       </span>
-                      <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                      <span className='shrink-0 text-[var(--text-muted)] text-xs'>
                         {formatFileSize(file.size)}
                       </span>
-                      <div className='flex flex-shrink-0 items-center gap-1'>
+                      <div className='flex shrink-0 items-center gap-1'>
                         {isProcessing ? (
                           <Loader className='size-4 text-[var(--text-muted)]' animate />
                         ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index 03d10b2c325..3afca28a305 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -172,7 +172,7 @@ function connectorCell(connectorTypes?: string[]): ResourceCell {
           return (
             <Tooltip.Root key={type}>
               <Tooltip.Trigger asChild>
-                <span className='flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)]'>
+                <span className='flex size-5 shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)]'>
                   <BrandIcon icon={Icon} className='size-[13px]' />
                 </span>
               </Tooltip.Trigger>
@@ -183,7 +183,7 @@ function connectorCell(connectorTypes?: string[]): ResourceCell {
         {hiddenEntries.length > 0 && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <span className='flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)] font-medium text-[var(--text-muted)] text-micro'>
+              <span className='flex size-5 shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)] font-medium text-[var(--text-muted)] text-micro'>
                 +{hiddenEntries.length}
               </span>
             </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
index 4d93396f252..b4010129495 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
@@ -87,7 +87,7 @@ function StatusBarInner({
               aria-pressed={isSelected}
               className={`h-6 flex-1 rounded-[3px] ${color} ${hoverBrightness} cursor-pointer transition-all ${
                 isSelected
-                  ? 'relative z-10 scale-105 shadow-sm ring-1 ring-[var(--text-secondary)]'
+                  ? 'relative z-10 scale-105 shadow-xs ring-1 ring-[var(--text-secondary)]'
                   : 'relative z-0'
               }`}
               aria-label={`Segment ${i + 1}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
index 3dae7eee182..36c542bc386 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -28,13 +28,13 @@ function WorkflowsListInner({
   return (
     <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
       {/* Table header */}
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+      <div className='shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
         <div className='flex items-center gap-4'>
-          <span className='w-[160px] flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+          <span className='w-[160px] shrink-0 text-[var(--text-tertiary)] text-caption'>
             Workflow
           </span>
           <span className='flex-1 text-[var(--text-tertiary)] text-caption'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-4 text-[var(--text-tertiary)] text-caption'>
+          <span className='w-[100px] shrink-0 pl-4 text-[var(--text-tertiary)] text-caption'>
             Success Rate
           </span>
         </div>
@@ -77,8 +77,8 @@ function WorkflowsListInner({
                   }}
                 >
                   {/* Workflow name with icon */}
-                  <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
-                    <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                  <div className='flex w-[160px] shrink-0 items-center gap-2 pr-2'>
+                    <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                     <FloatingOverflowText
                       label={workflow.workflowName}
                       className='block truncate text-[var(--text-primary)] text-caption'
@@ -95,7 +95,7 @@ function WorkflowsListInner({
                   </div>
 
                   {/* Success rate */}
-                  <span className='w-[100px] flex-shrink-0 pl-4 text-[var(--text-primary)] text-caption'>
+                  <span className='w-[100px] shrink-0 pl-4 text-[var(--text-primary)] text-caption'>
                     {workflow.overallSuccessRate.toFixed(1)}%
                   </span>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index 44b145c8b54..2ea928e270d 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -398,13 +398,13 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
 
   return (
     <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
-      <div className='mb-4 flex-shrink-0'>
+      <div className='mb-4 shrink-0'>
         <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
           <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
             <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 text-[var(--text-primary)] text-sm'>Runs</span>
               {globalDetails && (
-                <span className='flex-shrink-0 text-[var(--text-secondary)] text-sm'>
+                <span className='shrink-0 text-[var(--text-secondary)] text-sm'>
                   {globalDetails.totalRuns}
                 </span>
               )}
@@ -429,7 +429,7 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
             <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 text-[var(--text-primary)] text-sm'>Errors</span>
               {globalDetails && (
-                <span className='flex-shrink-0 text-[var(--text-secondary)] text-sm'>
+                <span className='shrink-0 text-[var(--text-secondary)] text-sm'>
                   {globalDetails.totalErrors}
                 </span>
               )}
@@ -454,7 +454,7 @@ function DashboardInner({ stats, isLoading, error, searchQuery }: DashboardProps
             <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 text-[var(--text-primary)] text-sm'>Latency</span>
               {globalDetails && (
-                <span className='flex-shrink-0 text-[var(--text-secondary)] text-sm'>
+                <span className='shrink-0 text-[var(--text-secondary)] text-sm'>
                   {formatLatency(globalDetails.avgLatency)}
                 </span>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index bcd1d8e61fd..2cb8e023541 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -94,7 +94,7 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
         <span className='min-w-0 flex-1 truncate text-[var(--text-secondary)] text-caption'>
           {file.name}
         </span>
-        <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+        <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>
           {formatFileSize(file.size)}
         </span>
       </div>
@@ -103,7 +103,7 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
         <span className='text-[var(--text-subtle)] text-xs'>{file.type}</span>
         <Button
           variant='ghost'
-          className='!h-[20px] !px-1.5 !py-0 text-xs'
+          className='h-[20px]! px-1.5! py-0! text-xs'
           onClick={handleDownload}
         >
           <Download className='mr-1 size-[10px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index 77041639218..e97cc186c3f 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -323,7 +323,7 @@ const TraceTreeRow = memo(function TraceTreeRow({
           <Button
             type='button'
             variant='ghost'
-            className='size-[14px] flex-shrink-0 p-0 text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
+            className='size-[14px] shrink-0 p-0 text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
             onClick={(e) => {
               e.stopPropagation()
               onToggleExpand(id)
@@ -338,7 +338,7 @@ const TraceTreeRow = memo(function TraceTreeRow({
             />
           </Button>
         ) : (
-          <div className='size-[14px] flex-shrink-0' />
+          <div className='size-[14px] shrink-0' />
         )}
         {!isIterationType(span.type) && (
           <BlockTile
@@ -378,7 +378,7 @@ const TraceTreeRow = memo(function TraceTreeRow({
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
-        <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
+        <span className='shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
           {formatDuration(duration, { precision: 2 })}
         </span>
       </div>
@@ -494,7 +494,7 @@ function DetailCodeSection({
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-w-full rounded-md border-0 [word-break:break-all]'
+              className='max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
               wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
@@ -511,7 +511,7 @@ function DetailCodeSection({
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
+                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='size-[10px] text-[var(--text-success)]' />
@@ -531,7 +531,7 @@ function DetailCodeSection({
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
+                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='size-[10px]' />
                     </Button>
@@ -544,7 +544,7 @@ function DetailCodeSection({
           {isSearchActive && (
             <div
               role='presentation'
-              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
+              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
               onClick={(e) => e.stopPropagation()}
             >
               <ChipInput
@@ -565,7 +565,7 @@ function DetailCodeSection({
               </span>
               <Button
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={goToPreviousMatch}
                 disabled={matchCount === 0}
                 aria-label='Previous match'
@@ -574,7 +574,7 @@ function DetailCodeSection({
               </Button>
               <Button
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={goToNextMatch}
                 disabled={matchCount === 0}
                 aria-label='Next match'
@@ -583,7 +583,7 @@ function DetailCodeSection({
               </Button>
               <Button
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={closeSearch}
                 aria-label='Close search'
               >
@@ -643,7 +643,7 @@ function DetailCodeSection({
 function MetaRow({ label, value }: { label: string; value: string }) {
   return (
     <div className='flex items-center justify-between gap-2 text-caption'>
-      <span className='flex-shrink-0 text-[var(--text-tertiary)]'>{label}</span>
+      <span className='shrink-0 text-[var(--text-tertiary)]'>{label}</span>
       <span className='min-w-0 truncate text-right text-[var(--text-secondary)]'>{value}</span>
     </div>
   )
@@ -1002,11 +1002,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
     <div className='-mx-3.5 flex h-full min-h-0 flex-col'>
       {/* Header strip */}
       <div className='flex items-center gap-2 border-[var(--border)] border-b px-3.5 pb-2'>
-        <Badge
-          variant={runStatus === 'error' ? 'red' : 'green'}
-          size='sm'
-          className='flex-shrink-0'
-        >
+        <Badge variant={runStatus === 'error' ? 'red' : 'green'} size='sm' className='shrink-0'>
           {runStatus === 'error' ? 'Error' : 'Success'}
         </Badge>
         {firstErrorId && (
@@ -1019,16 +1015,16 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
             Jump to error
           </Button>
         )}
-        <span className='flex-shrink-0 text-[var(--text-secondary)] text-caption tabular-nums'>
+        <span className='shrink-0 text-[var(--text-secondary)] text-caption tabular-nums'>
           {formatDuration(totalDuration, { precision: 2 }) || '—'}
         </span>
-        <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+        <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>
           {blockCount} {blockCount === 1 ? 'span' : 'spans'}
         </span>
         {(() => {
           const rootCost = formatCostAmount(runCostDollars ?? normalizedSpans[0]?.cost?.total)
           return rootCost ? (
-            <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
+            <span className='shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
               {rootCost}
             </span>
           ) : null
@@ -1047,7 +1043,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={() => copyTrace(JSON.stringify(traceSpans, null, 2))}
                 aria-label='Copy raw trace'
               >
@@ -1067,7 +1063,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={() => setExpandedNodes(new Set(allIds))}
                 aria-label='Expand all'
               >
@@ -1081,7 +1077,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='!p-1'
+                className='p-1!'
                 onClick={() => setExpandedNodes(new Set())}
                 aria-label='Collapse all'
               >
@@ -1097,7 +1093,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
       <div className='flex min-h-0 flex-1'>
         <div
           ref={treeRef}
-          className='flex flex-shrink-0 flex-col overflow-y-auto pt-2'
+          className='flex shrink-0 flex-col overflow-y-auto pt-2'
           style={{ width: treePaneWidth }}
           role='tree'
         >
@@ -1127,7 +1123,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
         <div
           role='separator'
           aria-orientation='vertical'
-          className='relative w-px flex-shrink-0 cursor-ew-resize bg-[var(--border)] transition-colors hover-hover:bg-[var(--border-1)]'
+          className='relative w-px shrink-0 cursor-ew-resize bg-[var(--border)] transition-colors hover-hover:bg-[var(--border-1)]'
           onMouseDown={(e) => {
             isResizingRef.current = true
             startXRef.current = e.clientX
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index 1d9348154b8..8a11175ea01 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -157,7 +157,7 @@ export const WorkflowOutputSection = memo(
           <Code.Viewer
             code={jsonString}
             language='json'
-            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
+            className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
             wrapText
             searchQuery={isSearchActive ? searchQuery : undefined}
             currentMatchIndex={currentMatchIndex}
@@ -175,7 +175,7 @@ export const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       handleCopy()
                     }}
-                    className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
+                    className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     {copied ? (
                       <Check className='size-[10px] text-[var(--text-success)]' />
@@ -195,7 +195,7 @@ export const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       activateSearch()
                     }}
-                    className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
+                    className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                   >
                     <Search className='size-[10px]' />
                   </Button>
@@ -210,7 +210,7 @@ export const WorkflowOutputSection = memo(
         {isSearchActive && (
           <div
             role='presentation'
-            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
+            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
             onClick={(e) => e.stopPropagation()}
           >
             <ChipInput
@@ -231,7 +231,7 @@ export const WorkflowOutputSection = memo(
             </span>
             <Button
               variant='ghost'
-              className='!p-1'
+              className='p-1!'
               onClick={goToPreviousMatch}
               disabled={matchCount === 0}
               aria-label='Previous match'
@@ -240,7 +240,7 @@ export const WorkflowOutputSection = memo(
             </Button>
             <Button
               variant='ghost'
-              className='!p-1'
+              className='p-1!'
               onClick={goToNextMatch}
               disabled={matchCount === 0}
               aria-label='Next match'
@@ -249,7 +249,7 @@ export const WorkflowOutputSection = memo(
             </Button>
             <Button
               variant='ghost'
-              className='!p-1'
+              className='p-1!'
               onClick={closeSearch}
               aria-label='Close search'
             >
@@ -513,11 +513,11 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                       target='_blank'
                       rel='noopener noreferrer'
                       prefetch={false}
-                      className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-[5px] px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+                      className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-[5px] px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
                     >
                       <span className='inline-grid size-[14px] shrink-0 place-items-center'>
-                        <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-0 transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
-                        <SquareArrowUpRight className='col-start-1 row-start-1 size-[14px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
+                        <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-none transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
+                        <SquareArrowUpRight className='col-start-1 row-start-1 size-[14px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-none group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-none motion-reduce:transition-none' />
                       </span>
                       <span className='min-w-0 truncate text-[var(--text-secondary)] text-sm transition-colors group-hover:text-[var(--text-primary)] group-focus-visible:text-[var(--text-primary)]'>
                         {workflowLabel}
@@ -526,7 +526,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                     </Link>
                   ) : (
                     <div className='flex min-w-0 items-center gap-1.5'>
-                      <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                      <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                       <span className='min-w-0 truncate text-[var(--text-secondary)] text-sm'>
                         {workflowLabel}
                       </span>
@@ -549,7 +549,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                       handleKeyboardActivation(event, () => copyRunId(log.executionId!))
                     }
                   >
-                    <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+                    <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>
                       Run ID
                     </span>
                     <span className='min-w-0 truncate text-[var(--text-secondary)] text-caption tabular-nums'>
@@ -585,7 +585,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                 {/* Version */}
                 {log.deploymentVersion && (
                   <div className='flex h-10 items-center gap-2 px-3'>
-                    <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+                    <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>
                       Version
                     </span>
                     <div className='flex w-0 flex-1 justify-end'>
@@ -653,7 +653,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                       <span className='min-w-0 truncate text-[var(--text-tertiary)] text-caption'>
                         {row.label}
                       </span>
-                      <span className='flex-shrink-0 text-[var(--text-secondary)] text-caption tabular-nums'>
+                      <span className='shrink-0 text-[var(--text-secondary)] text-caption tabular-nums'>
                         {creditLabel(row.credits, row.dollars)}
                       </span>
                     </div>
@@ -686,7 +686,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
 
         {/* Trace Tab */}
         {showTraceTab && resolvedTab === 'trace' && (
-          <div className='mt-3 min-h-0 flex-1 overflow-hidden focus-visible:outline-none'>
+          <div className='mt-3 min-h-0 flex-1 overflow-hidden focus-visible:outline-hidden'>
             {traceSpans?.length ? (
               <TraceView traceSpans={traceSpans} runCostDollars={log.cost?.total} />
             ) : log.executionData ? (
@@ -835,7 +835,7 @@ export const LogDetails = memo(function LogDetails({
                       <Tooltip.Trigger asChild>
                         <Button
                           variant='ghost'
-                          className='!p-1'
+                          className='p-1!'
                           onClick={() => onRetryExecution?.()}
                           disabled={isRetryPending}
                           aria-label='Retry execution'
@@ -848,7 +848,7 @@ export const LogDetails = memo(function LogDetails({
                   )}
                 <Button
                   variant='ghost'
-                  className='!p-1'
+                  className='p-1!'
                   onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
@@ -857,14 +857,14 @@ export const LogDetails = memo(function LogDetails({
                 </Button>
                 <Button
                   variant='ghost'
-                  className='!p-1'
+                  className='p-1!'
                   onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
                   <ChevronUp className='size-[14px] rotate-180' />
                 </Button>
-                <Button variant='ghost' className='!p-1' onClick={onClose} aria-label='Close'>
+                <Button variant='ghost' className='p-1!' onClick={onClose} aria-label='Close'>
                   <X className='size-[14px]' />
                 </Button>
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index 7cdc892da44..a1dd5a25dfe 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -195,7 +195,7 @@ function getColorIcon(color: string): React.ComponentType<{ className?: string }
 
   const ColorIcon = ({ className }: { className?: string }) => (
     <div
-      className={cn(className, 'flex-shrink-0 rounded-[3px]')}
+      className={cn(className, 'shrink-0 rounded-[3px]')}
       style={{
         backgroundColor: color,
         width: 10,
@@ -209,7 +209,7 @@ function getColorIcon(color: string): React.ComponentType<{ className?: string }
 }
 
 function WorkflowOptionIcon({ className }: { className?: string }) {
-  return <Workflow className={cn(className, 'flex-shrink-0 text-[var(--text-icon)]')} />
+  return <Workflow className={cn(className, 'shrink-0 text-[var(--text-icon)]')} />
 }
 
 function getTriggerIcon(
@@ -220,7 +220,7 @@ function getTriggerIcon(
   if (!block?.icon) return undefined
   const BlockIcon = block.icon
   const TriggerIcon = ({ className }: { className?: string }) => (
-    <BlockIcon className={cn(className, 'flex-shrink-0')} style={{ width: 12, height: 12 }} />
+    <BlockIcon className={cn(className, 'shrink-0')} style={{ width: 12, height: 12 }} />
   )
   TriggerIcon.displayName = `TriggerIcon(${triggerType})`
   return TriggerIcon
@@ -1469,7 +1469,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             <span className='flex w-full min-w-0 items-center gap-1.5 text-[var(--text-primary)]'>
               {selectedStatusColor && (
                 <div
-                  className='flex-shrink-0 rounded-[3px]'
+                  className='shrink-0 rounded-[3px]'
                   style={{ backgroundColor: selectedStatusColor, width: 8, height: 8 }}
                 />
               )}
@@ -1494,7 +1494,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           overlayContent={
             <span className='flex w-full min-w-0 items-center gap-1.5 text-[var(--text-primary)]'>
               {selectedWorkflow && (
-                <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                <Workflow className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               )}
               <span className='min-w-0 flex-1'>{workflowDisplayLabel}</span>
             </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view.tsx
index f476317d649..011aed2ce38 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view.tsx
@@ -49,13 +49,13 @@ interface UsageLogRowProps {
 function UsageLogRow({ log }: UsageLogRowProps) {
   return (
     <div className='flex items-center gap-2.5 rounded-lg p-2 text-left'>
-      <span className='w-[150px] flex-shrink-0 text-[var(--text-muted)] text-caption'>
+      <span className='w-[150px] shrink-0 text-[var(--text-muted)] text-caption'>
         {formatDateTime(new Date(log.createdAt))}
       </span>
       <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>
         {rowLabel(log)}
       </span>
-      <span className='flex-shrink-0 text-[var(--text-muted)] text-caption tabular-nums'>
+      <span className='shrink-0 text-[var(--text-muted)] text-caption tabular-nums'>
         {formatApportionedCreditCost(log.creditCost, log.hasCost)}
       </span>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/activity-log/activity-log.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/activity-log/activity-log.tsx
index 860cbb3c53f..dcaf990fa70 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/activity-log/activity-log.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/activity-log/activity-log.tsx
@@ -57,12 +57,10 @@ function ActivityLogRow({
 
   const cells = (
     <>
-      <span className='w-[160px] flex-shrink-0 text-[var(--text-secondary)] text-small'>
+      <span className='w-[160px] shrink-0 text-[var(--text-secondary)] text-small'>
         {entry.timestamp}
       </span>
-      <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'flex-shrink-0')}>
-        {entry.event}
-      </span>
+      <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'shrink-0')}>{entry.event}</span>
       <span className='min-w-0 flex-1 text-[var(--text-primary)] text-small'>
         {typeof entry.description === 'string' ? (
           <FloatingOverflowText label={entry.description} className='block' />
@@ -70,7 +68,7 @@ function ActivityLogRow({
           entry.description
         )}
       </span>
-      <span className='flex w-[160px] flex-shrink-0 items-center justify-end gap-1.5 text-[var(--text-secondary)] text-small'>
+      <span className='flex w-[160px] shrink-0 items-center justify-end gap-1.5 text-[var(--text-secondary)] text-small'>
         {typeof entry.actor === 'string' ? (
           <FloatingOverflowText label={entry.actor} className='block' />
         ) : (
@@ -79,7 +77,7 @@ function ActivityLogRow({
         {expandable && (
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+              'size-[14px] shrink-0 text-[var(--text-muted)] transition-transform duration-200',
               expanded && 'rotate-180'
             )}
           />
@@ -121,10 +119,7 @@ function ActivityLogRow({
         )}
         {hasTrailingColumn && (
           <span
-            className={cn(
-              TRAILING_COLUMN_WIDTH_CLASS,
-              'flex flex-shrink-0 items-center justify-end'
-            )}
+            className={cn(TRAILING_COLUMN_WIDTH_CLASS, 'flex shrink-0 items-center justify-end')}
           >
             {entry.trailing}
           </span>
@@ -175,16 +170,14 @@ export function ActivityLog({
   return (
     <div className='flex flex-col'>
       <div className='flex items-center gap-3 px-3 pb-1 text-[var(--text-tertiary)] text-caption'>
-        <span className='w-[160px] flex-shrink-0'>Timestamp</span>
-        <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'flex-shrink-0')}>
-          {eventLabel}
-        </span>
+        <span className='w-[160px] shrink-0'>Timestamp</span>
+        <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'shrink-0')}>{eventLabel}</span>
         <span className='min-w-0 flex-1'>{descriptionLabel}</span>
-        <span className='w-[160px] flex-shrink-0 text-right'>Actor</span>
+        <span className='w-[160px] shrink-0 text-right'>Actor</span>
         {/* Row actions carry no header, but the column must still be reserved
             here or every label above would sit left of the data below it. */}
         {hasTrailingColumn && (
-          <span className={cn(TRAILING_COLUMN_WIDTH_CLASS, 'flex-shrink-0')} aria-hidden />
+          <span className={cn(TRAILING_COLUMN_WIDTH_CLASS, 'shrink-0')} aria-hidden />
         )}
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index c1e97c0355e..05adc77f7e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -62,7 +62,7 @@ interface ApiKeyRowMenuProps {
  */
 function ApiKeyRowMenu({ keyName, onDelete, canDelete = true }: ApiKeyRowMenuProps) {
   return (
-    <div className='flex-shrink-0'>
+    <div className='shrink-0'>
       <RowActionsMenu
         label='API key actions'
         actions={[
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/appearance-theme-select.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/appearance-theme-select.tsx
index 2de9bb4bd52..aab315bc6f9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/appearance-theme-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/appearance-theme-select.tsx
@@ -24,7 +24,7 @@ export function AppearanceThemeSelect({
   ariaLabel,
 }: AppearanceThemeSelectProps) {
   return (
-    <div className='w-[240px] flex-shrink-0'>
+    <div className='w-[240px] shrink-0'>
       <ChipSelect
         aria-label={ariaLabel}
         align='start'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
index 8a130399657..59d52bbd3f3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
@@ -503,7 +503,7 @@ export function Billing({ scope, organizationId, creditUsageHref }: BillingProps
     <SettingsPanel>
       <div className='flex items-center justify-between gap-3'>
         <div className='flex items-center gap-2.5'>
-          <div className='size-9 flex-shrink-0'>
+          <div className='size-9 shrink-0'>
             <div className='flex size-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
               <Credit className='size-5 text-[var(--text-icon)]' />
             </div>
@@ -668,13 +668,11 @@ export function Billing({ scope, organizationId, creditUsageHref }: BillingProps
                 'flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors'
               const rowContent = (
                 <>
-                  <span className='flex-shrink-0 text-[var(--text-body)] text-sm'>
-                    {invoice.date}
-                  </span>
+                  <span className='shrink-0 text-[var(--text-body)] text-sm'>{invoice.date}</span>
                   <Badge variant={invoice.badge.variant} size='sm'>
                     {invoice.badge.label}
                   </Badge>
-                  <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>
+                  <span className='shrink-0 text-[var(--text-muted)] text-caption'>
                     {invoice.amount}
                   </span>
                   <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal.tsx
index e29cee913d8..fdc4e76b879 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal.tsx
@@ -70,7 +70,7 @@ export function BYOKProviderKeysModal({
                 />
               </div>
               {(capabilities.update || capabilities.delete) && (
-                <div className='flex flex-shrink-0 items-center gap-2'>
+                <div className='flex shrink-0 items-center gap-2'>
                   {capabilities.update && <Chip onClick={() => onUpdateKey(key)}>Update</Chip>}
                   {capabilities.delete && <Chip onClick={() => onDeleteKey(key)}>Delete</Chip>}
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/default-zoom-select.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/default-zoom-select.tsx
index dc0cf8c90f9..a111048067d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/default-zoom-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/default-zoom-select.tsx
@@ -27,7 +27,7 @@ export function DefaultZoomSelect({
   ariaLabel = 'Default zoom',
 }: DefaultZoomSelectProps) {
   return (
-    <div className='w-[240px] flex-shrink-0'>
+    <div className='w-[240px] shrink-0'>
       <ChipSelect
         aria-label={ariaLabel}
         align='start'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index de90ada37ec..d42d9798ec5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -60,7 +60,7 @@ const TIMEZONE_OPTIONS = getTimezoneOptions()
  * to grid) so they line up as one column instead of three differently-sized
  * pills. Wide enough for the longest common timezone label.
  */
-const DROPDOWN_TRIGGER_CLASS = 'w-[240px] flex-shrink-0'
+const DROPDOWN_TRIGGER_CLASS = 'w-[240px] shrink-0'
 
 /**
  * Extracts initials from a user's name.
@@ -321,7 +321,7 @@ export function General() {
                   type='button'
                   aria-label='Change profile picture'
                   className={cn(
-                    'group relative flex size-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-colors hover-hover:bg-[var(--bg)]',
+                    'group relative flex size-9 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-colors hover-hover:bg-[var(--bg)]',
                     !imageUrl && 'border border-[var(--border)]'
                   )}
                   onClick={handleProfilePictureClick}
@@ -385,7 +385,7 @@ export function General() {
                           onChange={(e) => setName(e.target.value)}
                           onKeyDown={handleKeyDown}
                           onBlur={handleInputBlur}
-                          className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 text-base outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 text-base outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
                           maxLength={100}
                           disabled={updateProfile.isPending}
                           autoComplete='off'
@@ -396,7 +396,7 @@ export function General() {
                       </div>
                       <Button
                         variant='ghost'
-                        className='size-[12px] flex-shrink-0 p-0'
+                        className='size-[12px] shrink-0 p-0'
                         onClick={handleUpdateName}
                         disabled={updateProfile.isPending}
                         aria-label='Save name'
@@ -409,7 +409,7 @@ export function General() {
                       <h3 className='text-base'>{profile?.name || ''}</h3>
                       <Button
                         variant='ghost'
-                        className='size-[10.5px] flex-shrink-0 p-0'
+                        className='size-[10.5px] shrink-0 p-0'
                         onClick={() => setIsEditingName(true)}
                         aria-label='Edit name'
                       >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
index 70cf4ca5a8f..894a55ef643 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
@@ -35,7 +35,7 @@ const SECRET_SCOPE_OPTIONS = [
   { value: 'selected', label: 'Selected secrets' },
 ]
 
-const DROPDOWN_TRIGGER_CLASS = 'w-[240px] flex-shrink-0'
+const DROPDOWN_TRIGGER_CLASS = 'w-[240px] shrink-0'
 
 export function InboxSettingsTab() {
   const params = useParams()
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
index e31351b4169..d121d3df30d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
@@ -138,7 +138,7 @@ export function InboxTaskList() {
                         {task.subject}
                       </span>
                       {task.hasAttachments && (
-                        <Paperclip className='size-[12px] flex-shrink-0 text-[var(--text-muted)]' />
+                        <Paperclip className='size-[12px] shrink-0 text-[var(--text-muted)]' />
                       )}
                     </div>
                     <span className='truncate text-[var(--text-muted)] text-caption'>
@@ -168,7 +168,7 @@ export function InboxTaskList() {
                         </span>
                       )}
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-2'>
+                  <div className='flex shrink-0 items-center gap-2'>
                     <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
                       {formatRelativeTime(task.createdAt)}
                     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 29aff5fb184..dd96fd4efc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -591,7 +591,7 @@ export function MCP() {
                       {hasParams && (
                         <ChevronDown
                           className={cn(
-                            'mt-0.5 size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+                            'mt-0.5 size-[14px] shrink-0 text-[var(--text-muted)] transition-transform duration-200',
                             isExpanded && 'rotate-180'
                           )}
                         />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index 718e3342866..72ada4c1ef1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -6,7 +6,7 @@ import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/compo
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 const ROW_CLASSES = 'flex items-center gap-2.5 p-2'
-const ROW_STATUS_CLASSES = 'flex-shrink-0 text-[var(--text-muted)] text-caption'
+const ROW_STATUS_CLASSES = 'shrink-0 text-[var(--text-muted)] text-caption'
 
 interface MemberAvatarProps {
   name: string
@@ -24,13 +24,13 @@ export function MemberAvatar({ name, image }: MemberAvatarProps) {
         src={image}
         alt={name}
         referrerPolicy='no-referrer'
-        className='size-[14px] flex-shrink-0 rounded-full border border-[var(--border)] object-cover'
+        className='size-[14px] shrink-0 rounded-full border border-[var(--border)] object-cover'
       />
     )
   }
 
   return (
-    <span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
+    <span className='flex size-[14px] shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
       {name.charAt(0).toUpperCase()}
     </span>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/row-actions-menu/row-actions-menu.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/row-actions-menu/row-actions-menu.tsx
index 645e0b9a7d4..06820b613a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/row-actions-menu/row-actions-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/row-actions-menu/row-actions-menu.tsx
@@ -45,7 +45,7 @@ export function RowActionsMenu({ label, actions, triggerClassName }: RowActionsM
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button type='button' aria-label={label} className={cn(chipVariants(), triggerClassName)}>
-          <MoreHorizontal className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+          <MoreHorizontal className='size-[14px] shrink-0 text-[var(--text-icon)]' />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
index 3753caed70f..e0c7ddbc74b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx
@@ -51,7 +51,7 @@ interface SettingsResourceRowProps {
   /**
    * Interactive controls pinned to the row's end (chips, actions menu). These sit
    * ABOVE the row's own hit area, so their clicks are theirs. The row keeps them at
-   * their natural size — callers never need their own `flex-shrink-0`.
+   * their natural size — callers never need their own `shrink-0`.
    *
    * Decorative trailing content (a status badge, a tag) belongs in {@link badge}:
    * anything placed here swallows clicks meant for the row.
@@ -95,7 +95,7 @@ interface SettingsResourceRowProps {
 }
 
 /** The one navigation chevron for every settings resource row. */
-export const RESOURCE_ROW_ARROW_CLASSES = 'size-4 flex-shrink-0 text-[var(--text-icon)]'
+export const RESOURCE_ROW_ARROW_CLASSES = 'size-4 shrink-0 text-[var(--text-icon)]'
 
 /**
  * Single-column list of {@link SettingsResourceRow}s. The rows carry their own
@@ -117,7 +117,7 @@ export const RESOURCE_LIST_GRID =
   'grid grid-cols-[repeat(auto-fit,minmax(264px,1fr))] gap-x-6 gap-y-0.5'
 
 const PLAIN_BASE =
-  'flex size-[14px] flex-shrink-0 items-center justify-center text-[var(--text-icon)] [&_svg]:size-[14px] [&_img]:size-[14px]'
+  'flex size-[14px] shrink-0 items-center justify-center text-[var(--text-icon)] [&_svg]:size-[14px] [&_img]:size-[14px]'
 
 export function SettingsResourceRow({
   icon,
@@ -191,7 +191,7 @@ export function SettingsResourceRow({
   // Decoration and the chevron stay click-through so the row's right edge never
   // becomes a dead zone; only `trailing` takes pointer events back.
   const end = hasEnd ? (
-    <div className='pointer-events-none relative z-20 flex flex-shrink-0 items-center gap-2'>
+    <div className='pointer-events-none relative z-20 flex shrink-0 items-center gap-2'>
       {badge}
       {trailing != null && <div className='pointer-events-auto flex items-center'>{trailing}</div>}
       {navigable && <ArrowRight className={RESOURCE_ROW_ARROW_CLASSES} />}
@@ -217,7 +217,7 @@ export function SettingsResourceRow({
 
   const controlClass = cn(
     clusterClass,
-    'min-w-0 flex-1 cursor-pointer focus-visible:outline-none',
+    'min-w-0 flex-1 cursor-pointer focus-visible:outline-hidden',
     'after:absolute after:inset-0 after:rounded-lg after:content-[""]',
     'focus-visible:after:ring-2 focus-visible:after:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/terminal/terminal-theme-picker.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/terminal/terminal-theme-picker.tsx
index c6f9f55aa93..d2c58881a70 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/terminal/terminal-theme-picker.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/terminal/terminal-theme-picker.tsx
@@ -34,7 +34,7 @@ export function TerminalThemePicker({
   const selectedValue = typeof value === 'string' ? value : value.id
 
   return (
-    <div className='w-[240px] flex-shrink-0'>
+    <div className='w-[240px] shrink-0'>
       <ChipCombobox
         aria-label='Terminal theme'
         align='start'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 9942803fc68..8450d813d4b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -586,7 +586,7 @@ function ServerDetailView({
                         variant='ghost'
                         aria-label={copiedConfig ? 'Configuration copied' : 'Copy configuration'}
                         onClick={() => handleCopyConfig(server.isPublic, server.name)}
-                        className='!p-1.5 -my-1.5'
+                        className='-my-1.5 p-1.5!'
                       >
                         {copiedConfig ? (
                           <Check className='size-[14px]' />
@@ -606,12 +606,12 @@ function ServerDetailView({
                               : 'json'
                         }
                         wrapText
-                        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+                        className='min-h-0! rounded-sm border border-[var(--border-1)]'
                       />
                       {activeConfigTab === 'cursor' && (
                         <a
                           href={getCursorInstallUrl(server.isPublic, server.name)}
-                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-[length:var(--border-width)] ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-[length:var(--border-width)] ring-[var(--border-1)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
                         >
                           <img
                             src='https://cursor.com/deeplink/mcp-install-dark.svg'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/components/secret-usage-panel/secret-usage-panel.tsx b/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/components/secret-usage-panel/secret-usage-panel.tsx
index 03fd1f8bf56..6725bd6cd59 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/components/secret-usage-panel/secret-usage-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/components/secret-usage-panel/secret-usage-panel.tsx
@@ -65,7 +65,7 @@ export function SecretUsagePanel({ workspaceId, secretName, scope }: SecretUsage
           <span className='flex min-w-0 items-center gap-2'>
             <FloatingOverflowText label={usedBy(entry)} className='block' />
             {entry.useCount > 1 && (
-              <span className='flex-shrink-0 text-[var(--text-muted)]'>{entry.useCount} runs</span>
+              <span className='shrink-0 text-[var(--text-muted)]'>{entry.useCount} runs</span>
             )}
           </span>
         ),
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index 303742fdd2b..87b813c62ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -246,7 +246,7 @@ function ColumnConfigBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='!p-1 size-7'
+          className='size-7 p-1!'
           aria-label='Close'
         >
           <X className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
index 2cb10c8af94..1f4ab32cef4 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
@@ -105,7 +105,7 @@ export function ColumnDropdown({
     ) : (
       <button
         type='button'
-        className='flex h-[20px] cursor-pointer items-center gap-2 outline-none'
+        className='flex h-[20px] cursor-pointer items-center gap-2 outline-hidden'
         disabled={disabled}
         onClick={blocked ? onBlocked : undefined}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx
index 677cd5eedf1..9c6a247c30a 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx
@@ -98,7 +98,7 @@ interface DetailRowProps {
 function DetailRow({ label, children }: DetailRowProps) {
   return (
     <div className='flex h-10 items-center justify-between gap-4 px-3 transition-colors hover-hover:bg-[var(--surface-2)]'>
-      <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>{label}</span>
+      <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>{label}</span>
       <span className='min-w-0 truncate text-right text-[var(--text-secondary)] text-caption tabular-nums'>
         {children}
       </span>
@@ -251,7 +251,7 @@ function EnrichmentDetailsContent({
                 >
                   <div className='flex min-w-0 items-center gap-1.5 px-2 pt-1.5'>
                     <div
-                      className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+                      className='flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm'
                       style={{ background: bgColor }}
                     >
                       {ProviderIcon && (
@@ -263,16 +263,16 @@ function EnrichmentDetailsContent({
                     <span className='min-w-0 flex-1 truncate text-[var(--text-secondary)] text-caption'>
                       {outcome.label}
                     </span>
-                    <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption'>
+                    <span className='shrink-0 text-[var(--text-tertiary)] text-caption'>
                       {PROVIDER_STATUS_LABEL[outcome.status]}
                     </span>
                     {outcome.cost > 0 && (
-                      <span className='flex-shrink-0 text-[var(--text-tertiary)] text-xs tabular-nums'>
+                      <span className='shrink-0 text-[var(--text-tertiary)] text-xs tabular-nums'>
                         {formatCost(outcome.cost)}
                       </span>
                     )}
                     {ran && (
-                      <span className='flex-shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
+                      <span className='shrink-0 text-[var(--text-tertiary)] text-caption tabular-nums'>
                         {formatDuration(outcome.durationMs, { precision: 2 }) || '—'}
                       </span>
                     )}
@@ -364,7 +364,7 @@ export function EnrichmentDetails({
           <div className='flex h-full flex-col px-3.5 pt-3'>
             <div className='flex items-center justify-between'>
               <h2 className='text-[var(--text-primary)] text-sm'>Enrichment Details</h2>
-              <Button variant='ghost' className='!p-1' onClick={onClose} aria-label='Close'>
+              <Button variant='ghost' className='p-1!' onClick={onClose} aria-label='Close'>
                 <X className='size-[14px]' />
               </Button>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index b142da251b4..9b7d34e3e11 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -238,7 +238,7 @@ export function EnrichmentConfig({
             variant='ghost'
             size='sm'
             onClick={onBack}
-            className='!p-1 size-7 flex-none'
+            className='size-7 flex-none p-1!'
             aria-label='Back to enrichments'
           >
             <ArrowLeft className='size-[14px]' />
@@ -249,7 +249,7 @@ export function EnrichmentConfig({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='!p-1 size-7 flex-none'
+          className='size-7 flex-none p-1!'
           aria-label='Close'
         >
           <X className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 2ecf49936da..64cd19f1134 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -77,7 +77,7 @@ function EnrichmentsSidebarBody({
             variant='ghost'
             size='sm'
             onClick={onClose}
-            className='!p-1 size-7 flex-none'
+            className='size-7 flex-none p-1!'
             aria-label='Close'
           >
             <X className='size-[14px]' />
@@ -123,7 +123,7 @@ function EnrichmentsSidebarBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='!p-1 size-7 flex-none'
+          className='size-7 flex-none p-1!'
           aria-label='Close'
         >
           <X className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
index 848a0c86921..31b308b7309 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
@@ -78,7 +78,7 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             variant='ghost'
             size='sm'
             onClick={() => remove(option.id)}
-            className='!p-1 size-7 shrink-0'
+            className='size-7 shrink-0 p-1!'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
index 301658acb1e..dc8edbd07a1 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
@@ -85,7 +85,7 @@ export function TableActionBar({
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
             className={cn(
-              '-translate-x-1/2 pointer-events-none absolute bottom-6 left-1/2 z-50 transform',
+              '-translate-x-1/2 pointer-events-none absolute bottom-6 left-1/2 z-50',
               className
             )}
           >
@@ -157,7 +157,7 @@ function ActionIconButton({ label, onClick, disabled, children }: ActionIconButt
           variant='ghost'
           onClick={onClick}
           disabled={disabled}
-          className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+          className='size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!'
           aria-label={label}
         >
           {children}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 3f7430c6e7c..1b3a17006b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -392,7 +392,7 @@ const FilterRuleRow = memo(function FilterRuleRow({
         variant='ghost'
         size='sm'
         onClick={() => onRemove(rule.id)}
-        className='!p-1 size-7 shrink-0'
+        className='size-7 shrink-0 p-1!'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx
index 9d1d1208e1d..81586ff5cd3 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx
@@ -263,7 +263,7 @@ function ExpandedCellEditor({
           setParseError(null)
         }}
         onKeyDown={handleTextareaKeyDown}
-        className='min-h-0 flex-1 resize-none bg-transparent px-2.5 py-2 font-sans text-[var(--text-primary)] text-small outline-none placeholder:text-[var(--text-muted)]'
+        className='min-h-0 flex-1 resize-none bg-transparent px-2.5 py-2 font-sans text-[var(--text-primary)] text-small outline-hidden placeholder:text-[var(--text-muted)]'
         spellCheck={false}
         autoCorrect='off'
       />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx
index ab5d4b4f912..fc5779089b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx
@@ -286,7 +286,7 @@ function ReadyInlineDateEditor({
         onBlur={scheduleBlurSave}
         placeholder='mm/dd/yyyy'
         className={cn(
-          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none',
+          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-hidden',
           invalid && 'text-[var(--text-error)]'
         )}
       />
@@ -402,7 +402,7 @@ function InlineTextEditor({
       onWheel={handleEditorWheel}
       onBlur={() => doSave('blur')}
       className={cn(
-        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none',
+        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-hidden',
         invalid && 'text-[var(--text-error)]'
       )}
     />
@@ -484,13 +484,13 @@ function InlineSelectEditor({ value, column, onSave, onCancel }: InlineEditorPro
         {!isMulti && !column.required && (
           <DropdownMenuItem onSelect={() => setDraftAnd([])}>
             <span className='text-[var(--text-muted)]'>None</span>
-            {draft.length === 0 && <Check className='!ml-auto' />}
+            {draft.length === 0 && <Check className='ml-auto!' />}
           </DropdownMenuItem>
         )}
         {allOptions.map((option) => (
           <DropdownMenuItem key={option.id} onSelect={(e) => handleSelectOption(e, option.id)}>
             <SelectPill option={option} />
-            {draft.includes(option.id) && <Check className='!ml-auto' />}
+            {draft.includes(option.id) && <Check className='ml-auto!' />}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
index 04025f40920..e2667e8434b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx
@@ -295,7 +295,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
+            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-primary)] text-small outline-hidden focus:outline-hidden focus:ring-0'
           />
         </div>
       ) : readOnly ? (
@@ -315,7 +315,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='flex h-full w-full min-w-0 items-center'>
           <button
             type='button'
-            className='flex min-w-0 flex-1 cursor-pointer items-center px-2 py-[7px] outline-none'
+            className='flex min-w-0 flex-1 cursor-pointer items-center px-2 py-[7px] outline-hidden'
             onClick={handleHeaderClick}
             draggable={false}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
index 43f7c958bc8..344a3996f4d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
@@ -4685,7 +4685,7 @@ export function TableGrid({
           ref={scrollRef}
           tabIndex={-1}
           className={cn(
-            'min-h-0 flex-1 overflow-auto overscroll-none outline-none',
+            'min-h-0 flex-1 overflow-auto overscroll-none outline-hidden',
             resizingColumn && 'select-none'
           )}
           data-table-scroll
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
index a0527fd593e..b2215ccd221 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
@@ -137,7 +137,7 @@ export const ViewsMenu = memo(function ViewsMenu({
         border
         className={cn(
           POPOVER_ANIMATION_CLASSES,
-          'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm'
+          'bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-xs'
         )}
         onMouseEnter={openPopover}
         onMouseLeave={scheduleClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 5536ae391c5..03e835b4fb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -637,7 +637,7 @@ export function WorkflowSidebarBody({
               variant='ghost'
               size='sm'
               onClick={onBack}
-              className='!p-1 size-7 flex-none'
+              className='size-7 flex-none p-1!'
               aria-label='Back to enrichments'
             >
               <ArrowLeft className='size-[14px]' />
@@ -651,7 +651,7 @@ export function WorkflowSidebarBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='!p-1 size-7 flex-none'
+          className='size-7 flex-none p-1!'
           aria-label='Close'
         >
           <X className='size-[14px]' />
@@ -702,7 +702,7 @@ export function WorkflowSidebarBody({
                   </div>
                 ) : workflowState.data ? (
                   <>
-                    <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                    <div className='[&_.react-flow__handle]:hidden! h-full w-full [&_*:active]:cursor-grabbing! [&_*]:cursor-grab!'>
                       <PreviewWorkflow
                         workflowState={workflowState.data}
                         height={160}
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/components/comparison-table/comparison-table.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/components/comparison-table/comparison-table.tsx
index bcc409339e9..34a7736a273 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/components/comparison-table/comparison-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/components/comparison-table/comparison-table.tsx
@@ -65,7 +65,7 @@ function CheckIcon() {
       viewBox='0 0 14 14'
       fill='none'
       aria-hidden='true'
-      className='size-[14px] flex-shrink-0'
+      className='size-[14px] shrink-0'
     >
       <path
         d='M2.5 7L5.5 10L11.5 4'
@@ -98,7 +98,7 @@ function Cell({ value }: { value: CellValue }) {
     const Icon = CELL_ICONS[value.icon]
     return (
       <span className='flex justify-center'>
-        <Icon className='size-[14px] flex-shrink-0' />
+        <Icon className='size-[14px] shrink-0' />
       </span>
     )
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
index fdd96328c17..c14dfdeeda4 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
@@ -109,13 +109,13 @@ export function UpgradePlanCard({
         {credits && (
           <div className='flex flex-col gap-1.5'>
             <div className='flex items-center gap-1.5'>
-              <Credit className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <Credit className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               <span className='text-[var(--text-body)] text-sm'>{credits}</span>
               <Info>1 workflow run = 1 credit. Inference usage consumes credits separately.</Info>
             </div>
             {refresh && (
               <div className='flex items-center gap-1.5'>
-                <RefreshCw className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                <RefreshCw className='size-[14px] shrink-0 text-[var(--text-icon)]' />
                 <span className='text-[var(--text-body)] text-sm'>{refresh}</span>
               </div>
             )}
@@ -127,7 +127,7 @@ export function UpgradePlanCard({
         <ul className='flex flex-col gap-2'>
           {features.map((feature) => (
             <li key={feature} className='flex items-center gap-2'>
-              <Check className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+              <Check className='size-[16px] shrink-0 text-[var(--text-icon)]' />
               <span className='text-[var(--text-body)] text-sm'>{feature}</span>
             </li>
           ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index fb65eb03b82..68bbc204861 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -38,7 +38,7 @@ const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 const ACTION_BUTTON_STYLES = [
   'size-[24px] rounded-md p-0',
   'border-none bg-transparent text-[var(--text-icon)]',
-  'hover-hover:bg-[var(--surface-5)] hover-hover:!text-[var(--text-primary)]',
+  'hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]!',
   'dark:hover-hover:bg-[var(--surface-4)]',
   'transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]',
 ].join(' ')
@@ -309,7 +309,7 @@ export const ActionBar = memo(
       isSwell && [
         'group-data-[node-selected]:text-[var(--surface-2)]',
         'hover-hover:group-data-[node-selected]:bg-[var(--surface-2)]',
-        'hover-hover:group-data-[node-selected]:!text-[var(--text-primary)]',
+        'hover-hover:group-data-[node-selected]:text-[var(--text-primary)]!',
       ]
     )
     /*
@@ -338,15 +338,15 @@ export const ActionBar = memo(
           ],
         actionId === 'run' &&
           isRunning && [
-            '!bg-[var(--text-secondary)] !text-[var(--text-inverse)]',
-            'hover-hover:!bg-[var(--white)] hover-hover:!text-[var(--surface-inverted)]',
-            'dark:hover-hover:!bg-[var(--surface-4)] dark:hover-hover:!text-[var(--text-primary)]',
-            'focus-visible:!bg-[var(--white)] focus-visible:!text-[var(--surface-inverted)]',
-            'dark:focus-visible:!bg-[var(--surface-4)] dark:focus-visible:!text-[var(--text-primary)]',
+            'bg-[var(--text-secondary)]! text-[var(--text-inverse)]!',
+            'hover-hover:bg-[var(--white)]! hover-hover:text-[var(--surface-inverted)]!',
+            'dark:hover-hover:bg-[var(--surface-4)]! dark:hover-hover:text-[var(--text-primary)]!',
+            'focus-visible:bg-[var(--white)]! focus-visible:text-[var(--surface-inverted)]!',
+            'dark:focus-visible:bg-[var(--surface-4)]! dark:focus-visible:text-[var(--text-primary)]!',
           ],
         isSwell &&
           actionId === firstActionId &&
-          "!w-[40px] [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-y-px",
+          "w-[40px]! [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-y-px",
         isSwell &&
           actionId === firstActionId &&
           (actionId === 'run' || actionId === 'color'
@@ -354,7 +354,7 @@ export const ActionBar = memo(
             : '[&>svg]:translate-x-[6px]'),
         isSwell &&
           actionId === 'delete' &&
-          "!w-[40px] [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px",
+          "w-[40px]! [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px",
         /*
          * A bystander card's actions dim mid-run because they are not available
          * — but `run` is Stop while the workflow runs, and `canStopWorkflow` is
@@ -366,19 +366,19 @@ export const ActionBar = memo(
         isWorkflowRunning &&
           !isRunning &&
           actionId !== 'run' && [
-            '!bg-transparent !opacity-25',
-            'hover-hover:!bg-transparent dark:hover-hover:!bg-transparent',
+            'bg-transparent! opacity-25!',
+            'hover-hover:bg-transparent! dark:hover-hover:bg-transparent!',
           ],
         /* The hatch is painted across the row, not per slot — a slot only clears
            itself out of its way. */
         isRunningSweepSlot && [
-          '!opacity-100 [&_svg]:!opacity-0',
-          '!bg-transparent hover-hover:!bg-transparent',
+          'opacity-100! [&_svg]:opacity-0!',
+          'bg-transparent! hover-hover:bg-transparent!',
         ],
         /* `!` is required: these buttons are also `disabled` when locked, and
            the emcn Button base carries `disabled:opacity-70`, which outranks a
            plain `opacity-35` on specificity. */
-        !isWorkflowRunning && actionId !== 'lock' && isLocked && '!opacity-35'
+        !isWorkflowRunning && actionId !== 'lock' && isLocked && 'opacity-35!'
       )
     }
 
@@ -422,7 +422,7 @@ export const ActionBar = memo(
           className={cn(
             'relative flex flex-row items-center gap-[2px]',
             isSwell && [
-              'pointer-events-none h-full opacity-0 transition-opacity duration-[30ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              'pointer-events-none h-full opacity-0 transition-opacity [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
               'group-data-[action-menu-ready]:pointer-events-auto group-data-[action-menu-ready]:opacity-100 group-data-[action-menu-ready]:duration-100',
             ]
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 51a52dae612..1da08f3bc7a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -119,7 +119,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
   return (
     <div
       className={cn(
-        'group relative flex-shrink-0 overflow-hidden rounded-md bg-[var(--surface-2)]',
+        'group relative shrink-0 overflow-hidden rounded-md bg-[var(--surface-2)]',
         previewUrl
           ? 'size-[40px]'
           : 'flex min-w-[80px] max-w-[120px] items-center justify-center px-2 py-0.5'
@@ -909,14 +909,14 @@ export function Chat() {
       {/* Header with drag handle */}
       <div
         role='presentation'
-        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
+        className='flex h-[32px] shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
-        <span className='flex-shrink-0 pr-0.5 text-[var(--text-primary)] text-sm'>Chat</span>
+        <span className='shrink-0 pr-0.5 text-[var(--text-primary)] text-sm'>Chat</span>
 
         {/* Start inputs button and output selector - with max-width to prevent overflow */}
         <div
-          className='ml-auto flex min-w-0 flex-shrink items-center gap-1.5'
+          className='ml-auto flex min-w-0 shrink items-center gap-1.5'
           onMouseDown={(e) => e.stopPropagation()}
         >
           {shouldShowConfigureStartInputsButton && (
@@ -945,13 +945,13 @@ export function Chat() {
           />
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-2'>
+        <div className='flex shrink-0 items-center gap-2'>
           {/* More menu with actions */}
           <Popover size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
             <PopoverTrigger asChild>
               <Button
                 variant='ghost'
-                className='!p-1.5 -m-1.5'
+                className='-m-1.5 p-1.5!'
                 onClick={(e) => e.stopPropagation()}
               >
                 <MoreVertical className='size-[14px]' />
@@ -990,7 +990,7 @@ export function Chat() {
           </Popover>
 
           {/* Close button */}
-          <Button variant='ghost' className='!p-1.5 -m-1.5' onClick={handleClose}>
+          <Button variant='ghost' className='-m-1.5 p-1.5!' onClick={handleClose}>
             <X className='size-[16px]' />
           </Button>
         </div>
@@ -1083,12 +1083,12 @@ export function Chat() {
                     <Badge
                       onClick={() => document.getElementById('floating-chat-file-input')?.click()}
                       className={cn(
-                        '!bg-transparent !border-0 cursor-pointer rounded-md p-[0px]',
+                        'cursor-pointer rounded-md border-0! bg-transparent! p-[0px]',
                         (!activeWorkflowId || isExecuting || chatFiles.length >= MAX_CHAT_FILES) &&
                           'cursor-not-allowed opacity-50'
                       )}
                     >
-                      <Paperclip className='!h-3.5 !w-3.5' />
+                      <Paperclip className='h-3.5! w-3.5!' />
                     </Badge>
                   </Tooltip.Trigger>
                   <Tooltip.Content>Attach file</Tooltip.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index 874c6faa14a..62b09885d61 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -323,7 +323,7 @@ function OutputSelectMenu({
   return (
     <Trigger
       size={size}
-      className={cn('min-w-[100px]', size === 'sm' && '!py-0.5 w-fit rounded-md px-2.5', className)}
+      className={cn('min-w-[100px]', size === 'sm' && 'w-fit rounded-md px-2.5 py-0.5!', className)}
       groups={comboboxGroups}
       options={[]}
       multiSelect
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
index 1dfc9a060d4..32af4cc4d53 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
@@ -443,7 +443,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
           onClick={data.onClose}
           aria-label='Close block selector'
           title='Close'
-          className="nodrag nopan !h-[24px] !w-[40px] !bg-[color-mix(in_srgb,var(--surface-2)_18%,transparent)] !text-[color-mix(in_srgb,var(--text-inverse)_72%,transparent)] hover-hover:!bg-[var(--surface-2)] hover-hover:!text-[var(--text-primary)] [&_svg]:-translate-x-[6px] shrink-0 rounded-md border-none p-0 transition-[background-color,color,opacity,transform] duration-150 [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] active:scale-[0.96] [&_svg]:translate-y-px"
+          className="nodrag nopan [&_svg]:-translate-x-[6px] h-[24px]! w-[40px]! shrink-0 rounded-md border-none bg-[color-mix(in_srgb,var(--surface-2)_18%,transparent)]! p-0 text-[color-mix(in_srgb,var(--text-inverse)_72%,transparent)]! transition-[background-color,color,opacity,transform] duration-150 [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] hover-hover:bg-[var(--surface-2)]! hover-hover:text-[var(--text-primary)]! active:scale-[0.96] [&_svg]:translate-y-px"
         >
           <X className='size-[14px]' />
         </Button>
@@ -452,7 +452,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
         type='target'
         position={Position.Left}
         id='target'
-        className='!left-0 !top-1/2 !z-30 !h-[38px] !w-[14px] !-translate-y-1/2 !cursor-default !rounded-none !border-none !bg-transparent !opacity-0'
+        className='-translate-y-1/2! top-1/2! left-0! z-30! h-[38px]! w-[14px]! cursor-default! rounded-none! border-none! bg-transparent! opacity-0!'
         isConnectableStart={false}
         isConnectableEnd={false}
       />
@@ -469,7 +469,7 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
             ref={listRef}
             fade='canvas'
             className={cn(
-              "nodrag nopan nowheel allow-scroll scrollbar-none [&_[cmdk-item][aria-selected='true']]:!border-transparent [&_[cmdk-item][aria-selected='true']]:!bg-[var(--surface-hover)] [&_[cmdk-item]_svg]:!scale-100 [&_[cmdk-item]_svg]:!transition-none h-full [clip-path:inset(3px_round_13px)]",
+              "nodrag nopan nowheel allow-scroll scrollbar-none h-full [clip-path:inset(3px_round_13px)] [&_[cmdk-item][aria-selected='true']]:border-transparent! [&_[cmdk-item][aria-selected='true']]:bg-[var(--surface-hover)]! [&_[cmdk-item]_svg]:scale-100! [&_[cmdk-item]_svg]:transition-none!",
               CMDK_ITEM_GAP_CLASS,
               CMDK_SECTION_GAP_CLASS
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx
index 02c82fd0813..bdc456c4d53 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx
@@ -16,7 +16,7 @@ export const NOTE_EDITOR_PROSE_CLASS_NAME = [
      two together. Without it the editor falls back to the per-element margins
      and every block after the first sits ~12px higher than when viewing. */
   '[&_.ProseMirror]:space-y-4 [&_.ProseMirror>*:first-child]:mt-0 [&_.ProseMirror>*:last-child]:mb-0',
-  '[&_.ProseMirror]:min-h-full [&_.ProseMirror]:break-words [&_.ProseMirror]:pt-0.5 [&_.ProseMirror]:pb-2 [&_.ProseMirror]:outline-none',
+  '[&_.ProseMirror]:min-h-full [&_.ProseMirror]:break-words [&_.ProseMirror]:pt-0.5 [&_.ProseMirror]:pb-2 [&_.ProseMirror]:outline-hidden',
   '[&_.ProseMirror_p]:mb-1 [&_.ProseMirror_p]:text-sm [&_.ProseMirror_p]:leading-[1.25rem] [&_.ProseMirror_p:last-child]:mb-0',
   '[&_.ProseMirror_h1]:mt-3 [&_.ProseMirror_h1]:mb-3 [&_.ProseMirror_h1]:font-semibold [&_.ProseMirror_h1]:text-lg [&_.ProseMirror_h1:first-child]:mt-0',
   '[&_.ProseMirror_h2]:mt-2.5 [&_.ProseMirror_h2]:mb-2.5 [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-base [&_.ProseMirror_h2:first-child]:mt-0',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index d06f205010f..53ac2d9fe8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -478,7 +478,7 @@ console.log(limits);`
                 variant='ghost'
                 onClick={() => handleCopy('sync', getSyncCommand())}
                 aria-label='Copy command'
-                className='!p-1.5 -my-1.5'
+                className='-my-1.5 p-1.5!'
               >
                 {copied.sync ? <Check className='size-3' /> : <Clipboard className='size-3' />}
               </Button>
@@ -492,7 +492,7 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+          className='min-h-0! rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
@@ -508,7 +508,7 @@ console.log(limits);`
                   variant='ghost'
                   onClick={() => handleCopy('stream', getStreamCommand())}
                   aria-label='Copy command'
-                  className='!p-1.5 -my-1.5'
+                  className='-my-1.5 p-1.5!'
                 >
                   {copied.stream ? <Check className='size-3' /> : <Clipboard className='size-3' />}
                 </Button>
@@ -531,7 +531,7 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+          className='min-h-0! rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
@@ -548,7 +548,7 @@ console.log(limits);`
                     variant='ghost'
                     onClick={() => handleCopy('async', getAsyncCommand())}
                     aria-label='Copy command'
-                    className='!p-1.5 -my-1.5'
+                    className='-my-1.5 p-1.5!'
                   >
                     {copied.async ? <Check className='size-3' /> : <Clipboard className='size-3' />}
                   </Button>
@@ -559,7 +559,7 @@ console.log(limits);`
               </Tooltip.Root>
               <Combobox
                 size='sm'
-                className='!w-fit !py-0.5 min-w-[100px] rounded-md px-[9px]'
+                className='w-fit! min-w-[100px] rounded-md px-[9px] py-0.5!'
                 options={[
                   { label: 'Start Execution', value: 'execute' },
                   { label: 'Check Status', value: 'status' },
@@ -576,7 +576,7 @@ console.log(limits);`
             code={getAsyncCommand()}
             language={LANGUAGE_SYNTAX[language]}
             wrapText
-            className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+            className='min-h-0! rounded-sm border border-[var(--border-1)]'
           />
         </div>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 7bad13acf05..1fab391fee1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -343,7 +343,7 @@ export function ChatDeploy({
       >
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
-            <TriangleAlert className='size-4 flex-shrink-0' />
+            <TriangleAlert className='size-4 shrink-0' />
             <span>{errors.general}</span>
           </div>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index b3e98aed297..5d8aa644638 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -22,7 +22,7 @@ import { VersionDescriptionModal } from './version-description-modal'
 
 const HEADER_TEXT_CLASS = 'text-[var(--text-tertiary)] text-caption'
 const ROW_TEXT_CLASS = 'text-[var(--text-primary)] text-caption'
-const COLUMN_BASE_CLASS = 'flex-shrink-0'
+const COLUMN_BASE_CLASS = 'shrink-0'
 
 const COLUMN_WIDTHS = {
   VERSION: 'w-[180px]',
@@ -283,7 +283,7 @@ export function Versions({
                       onClick={(e) => e.stopPropagation()}
                       onBlur={() => handleSaveRename(v.version)}
                       className={cn(
-                        'h-auto w-full border-0 bg-transparent p-0 text-[var(--text-primary)] text-caption leading-5 shadow-none outline-none focus:outline-none focus-visible:ring-0'
+                        'h-auto w-full border-0 bg-transparent p-0 text-[var(--text-primary)] text-caption leading-5 shadow-none outline-hidden focus:outline-hidden focus-visible:ring-0'
                       )}
                       maxLength={100}
                       disabled={renameMutation.isPending}
@@ -330,7 +330,7 @@ export function Versions({
                     <Button
                       variant='ghost'
                       className={cn(
-                        '!p-1',
+                        'p-1!',
                         !v.description &&
                           'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
                       )}
@@ -357,7 +357,7 @@ export function Versions({
                   <PopoverTrigger asChild>
                     <Button
                       variant='ghost'
-                      className='!p-1'
+                      className='p-1!'
                       disabled={isPromotingVersion}
                       onClick={(e) => e.stopPropagation()}
                     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index 614a46dbe34..e93b65b4a60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -229,7 +229,7 @@ export function GeneralDeploy({
           >
             {workflowToShow ? (
               <>
-                <div className='[&_*]:!cursor-default h-full w-full cursor-default'>
+                <div className='h-full w-full cursor-default [&_*]:cursor-default!'>
                   <PreviewWorkflow
                     workflowState={workflowToShow}
                     height='100%'
@@ -245,7 +245,7 @@ export function GeneralDeploy({
                       type='button'
                       variant='default'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-2 z-10 size-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
+                      className='absolute right-[8px] bottom-2 z-10 size-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       <Expand className='size-[14px]' />
                     </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index 40b6623f0eb..d91b64b6159 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { useCallback } from 'react'
-import { Badge, handleKeyboardActivation } from '@sim/emcn'
+import { Badge, cn, handleKeyboardActivation } from '@sim/emcn'
 import { ChevronDown } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import clsx from 'clsx'
 import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
 import { normalizeName } from '@/executor/constants'
 
@@ -83,26 +82,24 @@ export function FieldItem({
         if (!hasChildren) return
         handleKeyboardActivation(event, handleClick)
       }}
-      className={clsx(
+      className={cn(
         'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
         hasChildren && 'cursor-pointer'
       )}
     >
       <span
-        className={clsx(
+        className={cn(
           'min-w-0 flex-1 truncate',
           'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
         )}
       >
         {field.name}
       </span>
-      <Badge className='flex-shrink-0 rounded-sm px-1.5 py-[1px] font-mono text-xs'>
-        {field.type}
-      </Badge>
+      <Badge className='shrink-0 rounded-sm px-1.5 py-[1px] font-mono text-xs'>{field.type}</Badge>
       {hasChildren && (
         <ChevronDown
-          className={clsx(
-            'size-[14px] flex-shrink-0 transition-transform duration-100',
+          className={cn(
+            'size-[14px] shrink-0 transition-transform duration-100',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 98c6493a0b8..3b646e13332 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { ChevronDown, handleKeyboardActivation } from '@sim/emcn'
+import { ChevronDown, cn, handleKeyboardActivation } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
-import clsx from 'clsx'
 import { useShallow } from 'zustand/react/shallow'
 import {
   FieldItem,
@@ -113,7 +112,7 @@ function ConnectionItem({
         tabIndex={hasFields ? 0 : undefined}
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
-        className={clsx(
+        className={cn(
           'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
           hasFields && 'cursor-pointer'
         )}
@@ -125,7 +124,7 @@ function ConnectionItem({
       >
         <BlockTile blockType={connection.type} size='sm' />
         <span
-          className={clsx(
+          className={cn(
             'truncate',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
           )}
@@ -134,8 +133,8 @@ function ConnectionItem({
         </span>
         {hasFields && (
           <ChevronDown
-            className={clsx(
-              'size-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]',
+            className={cn(
+              'size-[8px] shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]',
               !isExpanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index ca3d5e3eff3..e4fe0f53f44 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -949,7 +949,7 @@ export const Code = memo(function Code({
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
+                className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
               >
                 <Wand className='size-4' />
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index c94f5893478..3d43ad468b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -436,7 +436,7 @@ export const ComboBox = memo(function ComboBox({
     })
     return (
       <div className='flex w-full items-center truncate [scrollbar-width:none]'>
-        {SelectedIcon && <SelectedIcon className='mr-2 size-3 flex-shrink-0' />}
+        {SelectedIcon && <SelectedIcon className='mr-2 size-3 shrink-0' />}
         <div className='truncate'>
           {formatDisplayText(displayLabel, {
             accessiblePrefixes,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index d261b012e45..d5bf63a8440 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -380,7 +380,7 @@ export function CredentialSelector({
     if (isAllCredentials && selectedAllCredential) {
       return (
         <div className='flex w-full items-center truncate'>
-          <div className='mr-2 flex-shrink-0 opacity-90'>
+          <div className='mr-2 shrink-0 opacity-90'>
             <Key className='size-3' />
           </div>
           <span className='truncate'>
@@ -392,7 +392,7 @@ export function CredentialSelector({
 
     return (
       <div className='flex w-full items-center truncate'>
-        <div className='mr-2 flex-shrink-0 opacity-90'>
+        <div className='mr-2 shrink-0 opacity-90'>
           {getProviderIcon(selectedCredentialProvider)}
         </div>
         <span className='truncate'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index ec74704c42b..ac575431325 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -118,12 +118,12 @@ export function GroupedCheckboxList({
         disabled={disabled}
         onClick={() => setOpen(true)}
         className={cn(
-          'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
+          'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-[var(--text-primary)] text-sm outline-hidden focus:outline-hidden focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
           'hover-hover:bg-[var(--surface-active)]'
         )}
       >
         <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 flex-shrink-0 opacity-50' />
+          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
           <span className='truncate'>Configure PII Types</span>
         </span>
         <SelectedCountDisplay
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 1ab2223be92..9ddea5c5fce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -411,7 +411,7 @@ export function KnowledgeTagFilters({
           {isBetween ? (
             <div className='flex items-center gap-2'>
               <div className='flex-1'>{renderValueInput(filter, 'tagValue')}</div>
-              <span className='flex-shrink-0 text-muted-foreground text-xs'>to</span>
+              <span className='shrink-0 text-muted-foreground text-xs'>to</span>
               <div className='flex-1'>{renderValueInput(filter, 'valueTo')}</div>
             </div>
           ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 06694df19d5..70406d9162d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -410,7 +410,7 @@ export function LongInput({
                     }
                     disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
                     aria-label='Generate content with AI'
-                    className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
+                    className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
                   >
                     <Wand className='size-4' />
                   </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 79842e8cb5f..a3da0f3fa49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -625,7 +625,7 @@ export function MessagesInput({
                         {!isPreview && !disabled && (
                           <ChevronDown
                             className={cn(
-                              'size-3 flex-shrink-0 transition-transform duration-100',
+                              'size-3 shrink-0 transition-transform duration-100',
                               openPopoverIndex === index && 'rotate-180'
                             )}
                           />
@@ -714,7 +714,7 @@ export function MessagesInput({
                     ref={(el) => {
                       textareaRefs.current[fieldId] = el
                     }}
-                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent p-2 font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [letter-spacing:inherit] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
+                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent p-2 font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [letter-spacing:inherit] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-hidden focus-visible:outline-hidden disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
                     placeholder='Enter message content...'
                     value={message.content}
                     onChange={fieldHandlers.onChange}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index 34525c61558..1b7781b4f56 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -407,7 +407,7 @@ export const ShortInput = memo(function ShortInput({
               }
               disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
               aria-label='Generate content with AI'
-              className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
+              className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
             >
               <Wand className='size-4' />
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index e9bb6a1607f..dea669b0d4e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -170,14 +170,14 @@ export function SkillInput({
                   }}
                 >
                   <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
+                    <div className='flex size-[16px] shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
                       <AgentSkillsIcon className='size-[10px] text-[var(--text-icon)]' />
                     </div>
                     <span className='truncate text-[var(--text-primary)] text-small'>
                       {formatDisplayText(skillName, { workflowSearchHighlight })}
                     </span>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-2'>
+                  <div className='flex shrink-0 items-center gap-2'>
                     {!disabled && !isPreview && (
                       <button
                         type='button'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 5498f4df7fe..ab93a862a07 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -171,7 +171,7 @@ export function FieldFormat({
         <Tooltip.Trigger asChild>
           <button
             type='button'
-            className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+            className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
             onClick={() =>
               setFileFieldModes((prev) => ({
                 ...prev,
@@ -183,7 +183,7 @@ export function FieldFormat({
           >
             <ArrowLeftRight
               className={cn(
-                '!h-[12px] !w-[12px]',
+                'h-[12px]! w-[12px]!',
                 mode === 'json' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
               )}
             />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
index eadbb8e8ce6..ccc4bd31a56 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -210,7 +210,7 @@ function TableCell({
           autoCorrect='off'
           autoCapitalize='off'
           spellCheck='false'
-          className='w-full bg-transparent px-2.5 py-2 text-sm text-transparent leading-[21px] caret-[var(--text-primary)] outline-none [letter-spacing:inherit] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
+          className='w-full bg-transparent px-2.5 py-2 text-sm text-transparent leading-[21px] caret-[var(--text-primary)] outline-hidden [letter-spacing:inherit] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
         />
         <div
           ref={(el) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
index 85f045f84be..f9327663ac3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
@@ -30,7 +30,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
     return (
       <div
         id={`${blockId}-${subBlockId}`}
-        className={`rounded-md border bg-[var(--surface-2)] p-4 shadow-sm ${className || ''}`}
+        className={`rounded-md border bg-[var(--surface-2)] p-4 shadow-xs ${className || ''}`}
       >
         <div
           className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover-hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
@@ -43,7 +43,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
   return (
     <div
       id={`${blockId}-${subBlockId}`}
-      className={`whitespace-pre-wrap break-words rounded-md border bg-[var(--surface-2)] p-4 text-[var(--text-secondary)] text-sm shadow-sm ${className || ''}`}
+      className={`whitespace-pre-wrap break-words rounded-md border bg-[var(--surface-2)] p-4 text-[var(--text-secondary)] text-sm shadow-xs ${className || ''}`}
     >
       {content}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 61012a92c35..b1ac077b0e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -202,7 +202,7 @@ export function CodeEditor({
           style={minHeight ? { minHeight } : undefined}
           textareaClassName={cn(
             getCodeEditorProps({ disabled }).textareaClassName,
-            '!block !h-full !min-h-full'
+            'block! h-full! min-h-full!'
           )}
         />
       </Code.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index ba1f3c868c9..b250591cb1c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -306,7 +306,7 @@ function createToolIcon(
 ) {
   return (
     <div
-      className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
+      className='flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
       style={{ background: bgColor }}
     >
       <IconComponent className={cn('size-[10px]', getTileIconColorClass(bgColor))} />
@@ -1567,7 +1567,7 @@ export const ToolInput = memo(function ToolInput({
                 'group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out',
                 draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                 dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
-                  ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
+                  ? 'translate-y-1 border-t-2 border-t-muted-foreground/40'
                   : '',
                 selectedTools.length > 1 && !isPreview && !disabled && 'active:cursor-grabbing'
               )}
@@ -1603,7 +1603,7 @@ export const ToolInput = memo(function ToolInput({
               >
                 <div className='flex min-w-0 flex-1 items-center gap-2'>
                   <div
-                    className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+                    className='flex size-[16px] shrink-0 items-center justify-center rounded-sm'
                     style={{
                       backgroundColor: isCustomTool
                         ? '#3B82F6'
@@ -1672,7 +1672,7 @@ export const ToolInput = memo(function ToolInput({
                       <WorkflowToolDeployBadge workflowId={tool.params.workflowId} />
                     )}
                 </div>
-                <div className='flex flex-shrink-0 items-center gap-2'>
+                <div className='flex shrink-0 items-center gap-2'>
                   {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
                     <Popover
                       open={usageControlPopoverIndex === toolIndex}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index c5029139e2b..5301bf26a18 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -484,7 +484,7 @@ export function VariablesInput({
                             <Tooltip.Trigger asChild>
                               <button
                                 type='button'
-                                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
                                 onClick={() =>
                                   setManualBooleanModes((prev) => ({
                                     ...prev,
@@ -498,7 +498,7 @@ export function VariablesInput({
                               >
                                 <ArrowLeftRight
                                   className={cn(
-                                    '!h-[12px] !w-[12px]',
+                                    'h-[12px]! w-[12px]!',
                                     isManualBoolean
                                       ? 'text-[var(--text-primary)]'
                                       : 'text-[var(--text-secondary)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 51a1afb862a..bc89baccf3f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -264,7 +264,7 @@ const renderLabel = (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <span className='inline-flex'>
-                  <TriangleAlert className='size-3 flex-shrink-0 cursor-pointer text-destructive' />
+                  <TriangleAlert className='size-3 shrink-0 cursor-pointer text-destructive' />
                 </span>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>
@@ -348,7 +348,7 @@ const renderLabel = (
                     e.stopPropagation()
                     wandState.onSearchSubmit()
                   }}
-                  className='size-[20px] flex-shrink-0 p-0'
+                  className='size-[20px] shrink-0 p-0'
                 >
                   <ArrowUp className='size-[12px]' />
                 </Button>
@@ -361,11 +361,11 @@ const renderLabel = (
             <Tooltip.Trigger asChild>
               <button
                 type='button'
-                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0'
+                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0'
                 onClick={externalLink?.onClick}
                 aria-label={externalLink?.tooltip}
               >
-                <SquareArrowUpRight className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
+                <SquareArrowUpRight className='h-[12px]! w-[12px]! text-[var(--text-secondary)]' />
               </button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
@@ -378,7 +378,7 @@ const renderLabel = (
             <Tooltip.Trigger asChild>
               <button
                 type='button'
-                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
                 onClick={canonicalToggle?.onToggle}
                 disabled={canonicalToggleDisabledResolved}
                 aria-label={
@@ -389,7 +389,7 @@ const renderLabel = (
               >
                 <ArrowLeftRight
                   className={cn(
-                    '!h-[12px] !w-[12px]',
+                    'h-[12px]! w-[12px]!',
                     canonicalToggle?.mode === 'advanced'
                       ? 'text-[var(--text-primary)]'
                       : 'text-[var(--text-secondary)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index f2327c80172..803279ad760 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -250,7 +250,7 @@ export function SubflowEditor({
       {hasIncomingConnections && (
         <div
           className={
-            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
+            'connections-section flex shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
             (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
           }
           style={{ height: `${connectionsHeight}px` }}
@@ -265,7 +265,7 @@ export function SubflowEditor({
           </div>
 
           <div
-            className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
+            className='flex shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
             onClick={toggleConnectionsCollapsed}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index fb4c2b6ed31..6f97d1036de 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -421,7 +421,7 @@ export function Editor() {
     <ActiveSearchTargetProvider value={activeSearchTargetForCurrentBlock}>
       <div className='flex h-full flex-col'>
         {/* Header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
+        <div className='mx-[-1px] flex shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
           <div className='flex min-w-0 flex-1 items-center gap-2'>
             {currentBlock && (blockConfig || isSubflow) && (
               <BlockTile blockType={currentBlock.type} size='lg' />
@@ -440,7 +440,7 @@ export function Editor() {
                     handleCancelRename()
                   }
                 }}
-                className='min-w-0 flex-1 truncate bg-transparent pr-2 text-[var(--text-primary)] text-sm outline-none'
+                className='min-w-0 flex-1 truncate bg-transparent pr-2 text-[var(--text-primary)] text-sm outline-hidden'
               />
             ) : (
               <h2
@@ -589,7 +589,7 @@ export function Editor() {
                           </div>
                         ) : childWorkflowState ? (
                           <>
-                            <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                            <div className='[&_.react-flow__handle]:hidden! h-full w-full [&_*:active]:cursor-grabbing! [&_*]:cursor-grab!'>
                               <PreviewWorkflow
                                 workflowState={childWorkflowState}
                                 height={160}
@@ -774,7 +774,7 @@ export function Editor() {
             {hasIncomingConnections && (
               <div
                 className={
-                  'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
+                  'connections-section flex shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
                   (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
                 }
                 style={{ height: `${connectionsHeight}px` }}
@@ -791,7 +791,7 @@ export function Editor() {
 
                 {/* Connections Header with Chevron */}
                 <div
-                  className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
+                  className='flex shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
                   onClick={toggleConnectionsCollapsed}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 2e588c683b6..1dd0e4634b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -22,7 +22,6 @@ import {
   OverflowText,
 } from '@sim/emcn'
 import { ChevronDown, Search } from '@sim/emcn/icons'
-import clsx from 'clsx'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
@@ -125,7 +124,7 @@ const ToolbarItem = memo(function ToolbarItem({
       onContextMenu={handleContextMenu}
       className={cn(
         chipVariants({ fullWidth: true }),
-        'focus-visible:bg-[var(--surface-active)] focus-visible:outline-none active:cursor-grabbing'
+        'focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden active:cursor-grabbing'
       )}
       onKeyDown={handleKeyDown}
     >
@@ -309,7 +308,7 @@ const ToolbarSection = memo(function ToolbarSection({
 
   return (
     <section>
-      <div className='sticky top-0 z-10 flex w-full flex-shrink-0 items-center gap-2 bg-[var(--bg)] px-4 pt-3 pb-2'>
+      <div className='sticky top-0 z-10 flex w-full shrink-0 items-center gap-2 bg-[var(--bg)] px-4 pt-3 pb-2'>
         <button
           type='button'
           onClick={toggle}
@@ -319,7 +318,7 @@ const ToolbarSection = memo(function ToolbarSection({
         >
           <span className='text-[var(--text-muted)] text-small'>{label}</span>
           <ChevronDown
-            className={clsx(
+            className={cn(
               'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
@@ -328,7 +327,7 @@ const ToolbarSection = memo(function ToolbarSection({
         <Info>{tooltip}</Info>
       </div>
       <Expandable expanded={expanded}>
-        <ExpandableContent className={animate ? undefined : '!animate-none'}>
+        <ExpandableContent className={animate ? undefined : 'animate-none!'}>
           <div className='flex flex-col gap-0.5 px-2'>
             {items.map((item, index) => (
               <ToolbarItem
@@ -784,7 +783,7 @@ export const Toolbar = memo(
         <div
           role='button'
           tabIndex={0}
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
+          className='mx-[-1px] flex shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
           onClick={focusSearch}
           onKeyDown={(event) => handleKeyboardActivation(event, focusSearch)}
         >
@@ -806,7 +805,7 @@ export const Toolbar = memo(
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onBlur={handleSearchBlur}
-                className='w-full border-none bg-transparent pr-0.5 text-right text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
+                className='w-full border-none bg-transparent pr-0.5 text-right text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-hidden'
               />
             )}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index c1522b801cf..261460b2a29 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -714,7 +714,7 @@ export const Panel = memo(function Panel() {
       >
         <div className='flex h-full flex-col border-[var(--border)] border-l pt-3.5'>
           {/* Header */}
-          <div className='flex flex-shrink-0 items-center justify-between px-2'>
+          <div className='flex shrink-0 items-center justify-between px-2'>
             {/* More and Chat */}
             <div className='flex gap-1.5'>
               <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
@@ -803,7 +803,7 @@ export const Panel = memo(function Panel() {
                 leftAdornment={
                   <span
                     aria-hidden='true'
-                    className='inline-flex size-5 flex-shrink-0 items-center justify-center overflow-visible'
+                    className='inline-flex size-5 shrink-0 items-center justify-center overflow-visible'
                   >
                     <ThinkingLoader
                       variant={isExecuting ? undefined : 'play'}
@@ -827,7 +827,7 @@ export const Panel = memo(function Panel() {
           </div>
 
           {/* Tabs */}
-          <div className='flex flex-shrink-0 items-center justify-between px-2 pt-3.5'>
+          <div className='flex shrink-0 items-center justify-between px-2 pt-3.5'>
             <div className='flex gap-1'>
               {isCopilotTabAvailable && (
                 <Button
@@ -884,7 +884,7 @@ export const Panel = memo(function Panel() {
                 data-tab-content='copilot'
               >
                 {/* Copilot Header */}
-                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
+                <div className='mx-[-1px] flex shrink-0 items-center justify-between gap-2 border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
                   <h2 className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-sm'>
                     {copilotChatTitle || 'New Chat'}
                   </h2>
@@ -925,7 +925,7 @@ export const Panel = memo(function Panel() {
                                       titleClassName='text-small'
                                       actions={
                                         <div
-                                          className={`flex flex-shrink-0 items-center gap-1 ${copilotChatId !== chat.id ? 'opacity-0 transition-opacity group-hover:opacity-100' : ''}`}
+                                          className={`flex shrink-0 items-center gap-1 ${copilotChatId !== chat.id ? 'opacity-0 transition-opacity group-hover:opacity-100' : ''}`}
                                         >
                                           <Button
                                             variant='ghost'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
index e85add48337..48faf7f8911 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
@@ -563,7 +563,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
     >
       <div
         role='presentation'
-        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
+        className='flex h-[32px] shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
         <div className='flex min-w-0 items-center'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index abb6c091069..08b204858a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   Code,
+  cn,
   Input,
   Popover,
   PopoverContent,
@@ -23,7 +24,6 @@ import {
   Trash,
   X,
 } from '@sim/emcn/icons'
-import clsx from 'clsx'
 import Link from 'next/link'
 import { AgentStreamThinkingChrome } from '@/components/agent-stream/agent-stream-chrome'
 import {
@@ -304,15 +304,15 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Header */}
         <div
-          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-2.5'
+          className='group flex h-[30px] shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-2.5'
           onClick={handleHeaderClick}
         >
           <div className='flex items-center'>
             <Button
               variant='ghost'
-              className={clsx(
+              className={cn(
                 'px-2 py-1.5 text-small',
-                !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
+                !showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
               )}
               onClick={handleOutputButtonClick}
               aria-label='Show output'
@@ -322,9 +322,9 @@ export const OutputPanel = React.memo(function OutputPanel({
             {hasInputData && (
               <Button
                 variant='ghost'
-                className={clsx(
+                className={cn(
                   'px-2 py-1.5 text-small',
-                  showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
+                  showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
                 )}
                 onClick={handleInputButtonClick}
                 aria-label='Show input'
@@ -333,7 +333,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               </Button>
             )}
           </div>
-          <div className='flex flex-shrink-0 items-center gap-2'>
+          <div className='flex shrink-0 items-center gap-2'>
             {isOutputSearchActive ? (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -341,7 +341,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                     variant='ghost'
                     onClick={handleCloseSearchClick}
                     aria-label='Close search'
-                    className='!p-1.5 -m-1.5'
+                    className='-m-1.5 p-1.5!'
                   >
                     <X className='size-[14px]' />
                   </Button>
@@ -357,7 +357,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                     variant='ghost'
                     onClick={handleSearchClick}
                     aria-label='Search in output'
-                    className='!p-1.5 -m-1.5'
+                    className='-m-1.5 p-1.5!'
                   >
                     <Search className='size-[14px]' />
                   </Button>
@@ -375,7 +375,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                     <Button
                       variant='ghost'
                       aria-label='Component Playground'
-                      className='!p-1.5 -m-1.5'
+                      className='-m-1.5 p-1.5!'
                     >
                       <Palette className='size-[14px]' />
                     </Button>
@@ -393,7 +393,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                   variant='ghost'
                   onClick={handleCopyClick}
                   aria-label='Copy output'
-                  className='!p-1.5 -m-1.5'
+                  className='-m-1.5 p-1.5!'
                 >
                   {showCopySuccess ? (
                     <Check className='size-[14px]' />
@@ -414,7 +414,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                       variant='ghost'
                       onClick={handleExportConsole}
                       aria-label='Export console CSV'
-                      className='!p-1.5 -m-1.5'
+                      className='-m-1.5 p-1.5!'
                     >
                       <Download className='size-[14px]' />
                     </Button>
@@ -429,7 +429,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                       variant='ghost'
                       onClick={handleClearConsole}
                       aria-label='Clear console'
-                      className='!p-1.5 -m-1.5'
+                      className='-m-1.5 p-1.5!'
                     >
                       <Trash className='size-[14px]' />
                     </Button>
@@ -446,7 +446,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                   variant='ghost'
                   onClick={(e) => e.stopPropagation()}
                   aria-label='Terminal options'
-                  className='!p-1.5 -m-1.5'
+                  className='-m-1.5 p-1.5!'
                 >
                   <MoreHorizontal className='size-[14px]' />
                 </Button>
@@ -486,7 +486,7 @@ export const OutputPanel = React.memo(function OutputPanel({
         {/* Search Overlay */}
         {isOutputSearchActive && (
           <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-sm'
+            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-xs'
             onClick={(e) => e.stopPropagation()}
             data-toolbar-root
             data-search-active='true'
@@ -500,7 +500,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               className='mr-0.5 h-[23px] w-[94px] text-caption'
             />
             <span
-              className={clsx(
+              className={cn(
                 'w-[58px] text-xs',
                 matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
               )}
@@ -511,7 +511,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               variant='ghost'
               onClick={goToPreviousMatch}
               aria-label='Previous match'
-              className='!p-1.5 -m-1.5'
+              className='-m-1.5 p-1.5!'
               disabled={matchCount === 0}
             >
               <ArrowUp className='size-[14px]' />
@@ -520,7 +520,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               variant='ghost'
               onClick={goToNextMatch}
               aria-label='Next match'
-              className='!p-1.5 -m-1.5'
+              className='-m-1.5 p-1.5!'
               disabled={matchCount === 0}
             >
               <ArrowDown className='size-[14px]' />
@@ -529,7 +529,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               variant='ghost'
               onClick={closeOutputSearch}
               aria-label='Close search'
-              className='!p-1.5 -m-1.5'
+              className='-m-1.5 p-1.5!'
             >
               <X className='size-[14px]' />
             </Button>
@@ -538,7 +538,7 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Content */}
         <div
-          className={clsx('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
+          className={cn('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
           onContextMenu={handleOutputPanelContextMenu}
         >
           {!showInput && selectedEntry.agentStreamThinking && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
index b33dbab6314..84265672062 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
@@ -2,9 +2,8 @@
 
 import type React from 'react'
 import { memo } from 'react'
-import { Button } from '@sim/emcn'
+import { Button, cn } from '@sim/emcn'
 import { ChevronDown } from '@sim/emcn/icons'
-import clsx from 'clsx'
 
 export interface ToggleButtonProps {
   isExpanded: boolean
@@ -18,13 +17,13 @@ export const ToggleButton = memo(function ToggleButton({ isExpanded, onClick }:
   return (
     <Button
       variant='ghost'
-      className='!p-1.5 -m-1.5'
+      className='-m-1.5 p-1.5!'
       onClick={onClick}
       aria-label='Toggle terminal'
     >
       <ChevronDown
-        className={clsx(
-          'size-[14px] flex-shrink-0 transition-transform duration-100',
+        className={cn(
+          'size-[14px] shrink-0 transition-transform duration-100',
           !isExpanded && 'rotate-180'
         )}
       />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index ee8e48aa4b0..9be28b0a6cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -5,6 +5,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   ChevronDown,
+  cn,
   disclosureChevronClass,
   handleKeyboardActivation,
   Popover,
@@ -16,7 +17,6 @@ import {
 import { ArrowDown, ArrowUp, Download, MoreHorizontal, Palette, Trash } from '@sim/emcn/icons'
 import { formatDuration } from '@sim/utils/formatting'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import clsx from 'clsx'
 import Link from 'next/link'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { sendMothershipMessage } from '@/lib/mothership/events'
@@ -129,7 +129,7 @@ const BlockRow = memo(function BlockRow({
           {entry.blockName}
         </span>
       </div>
-      <span className={clsx(ROW_STYLES.status, !isRunning && ROW_STYLES.statusIdle)}>
+      <span className={cn(ROW_STYLES.status, !isRunning && ROW_STYLES.statusIdle)}>
         <StatusDisplay
           isRunning={isRunning}
           isCanceled={isCanceled}
@@ -190,10 +190,10 @@ const IterationNodeRow = memo(function IterationNodeRow({
             {iterationLabel}
           </span>
           {hasChildren && (
-            <ChevronDown className={clsx(disclosureChevronClass, !isExpanded && '-rotate-90')} />
+            <ChevronDown className={cn(disclosureChevronClass, !isExpanded && '-rotate-90')} />
           )}
         </div>
-        <span className={clsx(ROW_STYLES.status, !hasRunningChild && ROW_STYLES.statusIdle)}>
+        <span className={cn(ROW_STYLES.status, !hasRunningChild && ROW_STYLES.statusIdle)}>
           <StatusDisplay
             isRunning={hasRunningChild}
             isCanceled={hasCanceledChild}
@@ -274,10 +274,10 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           <EntryBlockTile blockType={entry.blockType} />
           <span className={hasError ? ROW_STYLES.labelError : ROW_STYLES.label}>{displayName}</span>
           {hasChildren && (
-            <ChevronDown className={clsx(disclosureChevronClass, !isExpanded && '-rotate-90')} />
+            <ChevronDown className={cn(disclosureChevronClass, !isExpanded && '-rotate-90')} />
           )}
         </div>
-        <span className={clsx(ROW_STYLES.status, !hasRunningDescendant && ROW_STYLES.statusIdle)}>
+        <span className={cn(ROW_STYLES.status, !hasRunningDescendant && ROW_STYLES.statusIdle)}>
           <StatusDisplay
             isRunning={hasRunningDescendant}
             isCanceled={hasCanceledDescendant}
@@ -373,10 +373,10 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
             {entry.blockName}
           </span>
           {hasChildren && (
-            <ChevronDown className={clsx(disclosureChevronClass, !isExpanded && '-rotate-90')} />
+            <ChevronDown className={cn(disclosureChevronClass, !isExpanded && '-rotate-90')} />
           )}
         </div>
-        <span className={clsx(ROW_STYLES.status, !hasRunningDescendant && ROW_STYLES.statusIdle)}>
+        <span className={cn(ROW_STYLES.status, !hasRunningDescendant && ROW_STYLES.statusIdle)}>
           <StatusDisplay
             isRunning={hasRunningDescendant}
             isCanceled={hasCanceledDescendant}
@@ -1201,7 +1201,7 @@ export const Terminal = memo(function Terminal() {
     <>
       <aside
         ref={terminalRef}
-        className={clsx(
+        className={cn(
           'terminal-container relative shrink-0 overflow-hidden border-[var(--border)] border-t bg-[var(--bg)]',
           isToggling && 'transition-[height] duration-100 ease-out'
         )}
@@ -1223,12 +1223,12 @@ export const Terminal = memo(function Terminal() {
         <div className='relative flex h-full'>
           {/* Left Section - Logs */}
           <div
-            className={clsx('flex flex-col', !selectedEntry && 'flex-1')}
+            className={cn('flex flex-col', !selectedEntry && 'flex-1')}
             style={selectedEntry ? { width: 'calc(100% - var(--output-panel-width))' } : undefined}
           >
             {/* Header */}
             <div
-              className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-4'
+              className='group flex h-[30px] shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-4'
               onClick={handleHeaderClick}
             >
               {/* Left side - Logs label */}
@@ -1248,7 +1248,7 @@ export const Terminal = memo(function Terminal() {
                             toggleSort()
                           }}
                           aria-label='Sort by timestamp'
-                          className='!p-1.5 -m-1.5'
+                          className='-m-1.5 p-1.5!'
                         >
                           {sortDirection === 'desc' ? (
                             <ArrowDown className='size-[14px]' />
@@ -1270,7 +1270,7 @@ export const Terminal = memo(function Terminal() {
                           <Button
                             variant='ghost'
                             aria-label='Component Playground'
-                            className='!p-1.5 -m-1.5'
+                            className='-m-1.5 p-1.5!'
                           >
                             <Palette className='size-[14px]' />
                           </Button>
@@ -1290,7 +1290,7 @@ export const Terminal = memo(function Terminal() {
                             variant='ghost'
                             onClick={handleExportConsole}
                             aria-label='Export console CSV'
-                            className='!p-1.5 -m-1.5'
+                            className='-m-1.5 p-1.5!'
                           >
                             <Download className='size-[14px]' />
                           </Button>
@@ -1305,7 +1305,7 @@ export const Terminal = memo(function Terminal() {
                             variant='ghost'
                             onClick={handleClearConsole}
                             aria-label='Clear console'
-                            className='!p-1.5 -m-1.5'
+                            className='-m-1.5 p-1.5!'
                           >
                             <Trash className='size-[14px]' />
                           </Button>
@@ -1325,7 +1325,7 @@ export const Terminal = memo(function Terminal() {
                           e.stopPropagation()
                         }}
                         aria-label='Terminal options'
-                        className='!p-1.5 -m-1.5'
+                        className='-m-1.5 p-1.5!'
                       >
                         <MoreHorizontal className='size-[14px]' />
                       </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
index a314a3f32cc..6285e7ac407 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
@@ -48,10 +48,10 @@ export const ROW_STYLES = {
   content: `flex min-w-0 flex-1 items-center ${chipContentGap}`,
   label: chipContentLabelClass,
   labelError: cn(chipContentLabelClass, 'text-[var(--text-error)]'),
-  status: 'flex-shrink-0 text-sm',
+  status: 'shrink-0 text-sm',
   statusIdle: 'text-[var(--text-muted)]',
   nested: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
-  iconButton: '!p-1.5 -m-1.5',
+  iconButton: 'p-1.5! -m-1.5',
 } as const
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 1fe75ee7c5b..7505fcf6720 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -449,16 +449,16 @@ export function Variables({ readOnly = false }: VariablesProps) {
       {/* Header (drag handle) */}
       <div
         role='presentation'
-        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between bg-[var(--surface-1)] p-0 active:cursor-grabbing'
+        className='flex h-[32px] shrink-0 cursor-grab items-center justify-between bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
         <div className='flex items-center'>
-          <span className='flex-shrink-0 text-[var(--text-primary)] text-sm'>Variables</span>
+          <span className='shrink-0 text-[var(--text-primary)] text-sm'>Variables</span>
         </div>
         <div className='flex items-center gap-2'>
           <Button
             variant='ghost'
-            className='!p-1.5 -m-1.5'
+            className='-m-1.5 p-1.5!'
             onClick={(e) => {
               e.stopPropagation()
               handleAddVariable()
@@ -470,7 +470,7 @@ export function Variables({ readOnly = false }: VariablesProps) {
           </Button>
           <Button
             variant='ghost'
-            className='!p-1.5 -m-1.5'
+            className='-m-1.5 p-1.5!'
             onClick={handleClose}
             aria-label='Close variables panel'
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index e0ddc69b313..b1df8260831 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -80,7 +80,7 @@ export function WandPromptBar({
       className={cn(
         '-translate-y-3 absolute right-0 bottom-full left-0 gap-2',
         'rounded-lg border bg-background shadow-lg',
-        'z-9999999 transition-all duration-150',
+        'transition-all duration-150',
         isExiting ? 'opacity-0' : 'opacity-100',
         className
       )}
@@ -99,7 +99,7 @@ export function WandPromptBar({
             autoCapitalize='off'
             spellCheck='false'
             className={cn(
-              'flex h-10 w-full rounded-xl bg-input-background px-3 py-2 text-foreground text-sm outline-none placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50',
+              'flex h-10 w-full rounded-xl bg-input-background px-3 py-2 text-foreground text-sm outline-hidden placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50',
               isStreaming && 'text-foreground/70',
               (isLoading || isStreaming) && 'loading-placeholder'
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 50f9660e303..3adcaed1d64 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -1185,7 +1185,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       <>
         {chipBlocks.map((subBlock, index) => (
           <Fragment key={`statement-${subBlock.id}`}>
-            {index > 0 && <span className='flex-shrink-0 text-[var(--text-muted)] text-sm'>·</span>}
+            {index > 0 && <span className='shrink-0 text-[var(--text-muted)] text-sm'>·</span>}
             <SubBlockRow
               title={getCanvasRowTitle(subBlock)}
               value={getDisplayValue(subBlockState[subBlock.id]?.value)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
index a9dcf5e4779..e28c8083708 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
@@ -39,13 +39,13 @@ export const edgeTypes: EdgeTypes = {
 export const defaultEdgeOptions = { type: 'custom' } as const
 
 export const reactFlowStyles = [
-  '[&_.react-flow__handle]:!z-[30]',
+  '[&_.react-flow__handle]:z-[30]!',
   '[&_.react-flow__pane]:select-none',
   '[&_.react-flow__selectionpane]:select-none',
-  String.raw`[&_.react-flow\_\_selection]:!border-[var(--text-secondary)]`,
-  String.raw`[&_.react-flow\_\_selection]:!bg-[color-mix(in_oklch,var(--text-secondary)_8%,transparent)]`,
+  String.raw`[&_.react-flow\_\_selection]:border-[var(--text-secondary)]!`,
+  String.raw`[&_.react-flow\_\_selection]:bg-[color-mix(in_oklch,var(--text-secondary)_8%,transparent)]!`,
   '[&_.react-flow__background]:hidden',
-  '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
+  '[&_.react-flow__node-subflowNode.selected]:shadow-none!',
 ].join(' ')
 
 export const reactFlowFitViewOptions = { padding: 0.6, maxZoom: 1.0 } as const
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index ace68029360..9e6d45618e3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -317,7 +317,7 @@ function ConnectionsSection({
   return (
     <div
       className={cn(
-        'flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t',
+        'flex shrink-0 flex-col overflow-hidden border-[var(--border)] border-t',
         !isResizing && 'transition-[height] duration-100 ease-out'
       )}
       style={{ height: `${height}px` }}
@@ -334,7 +334,7 @@ function ConnectionsSection({
 
       {/* Header with Chevron */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
+        className='flex shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
         onClick={onToggleCollapsed}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -384,7 +384,7 @@ function ConnectionsSection({
                 {hasFields && (
                   <ChevronDown
                     className={cn(
-                      'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                      'h-3.5 w-3.5 shrink-0 transition-transform duration-100',
                       'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                       isExpanded && 'rotate-180'
                     )}
@@ -404,7 +404,7 @@ function ConnectionsSection({
                     >
                       <span
                         className={cn(
-                          'flex-shrink-0',
+                          'shrink-0',
                           'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
                         )}
                       >
@@ -434,7 +434,7 @@ function ConnectionsSection({
                 handleKeyboardActivation(event, () => setExpandedVariables(!expandedVariables))
               }
             >
-              <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
+              <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
                 <span className='text-[9px] text-white'>V</span>
               </div>
               <OverflowText
@@ -444,7 +444,7 @@ function ConnectionsSection({
               />
               <ChevronDown
                 className={cn(
-                  'size-[14px] flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedVariables && 'rotate-180'
                 )}
@@ -459,7 +459,7 @@ function ConnectionsSection({
                     className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                     onContextMenu={(e) => handleValueContextMenu(e, v.value)}
                   >
-                    <span className='flex-shrink-0 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
+                    <span className='shrink-0 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
                       {v.name}
                     </span>
                     <span className='min-w-0 break-all text-[var(--text-tertiary)]'>{v.value}</span>
@@ -483,7 +483,7 @@ function ConnectionsSection({
                 handleKeyboardActivation(event, () => setExpandedEnvVars(!expandedEnvVars))
               }
             >
-              <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
+              <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
                 <span className='text-[9px] text-white'>E</span>
               </div>
               <OverflowText
@@ -493,7 +493,7 @@ function ConnectionsSection({
               />
               <ChevronDown
                 className={cn(
-                  'size-[14px] flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedEnvVars && 'rotate-180'
                 )}
@@ -507,7 +507,7 @@ function ConnectionsSection({
                     key={v.ref}
                     className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                   >
-                    <span className='flex-shrink-0 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
+                    <span className='shrink-0 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
                       {v.name}
                     </span>
                     <span className='min-w-0 break-all text-[var(--text-tertiary)]'>{v.value}</span>
@@ -1064,11 +1064,11 @@ function PreviewEditorContent({
     return (
       <div className='relative flex h-full w-full flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
         {/* Header - styled like subflow header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+        <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
           <BlockTile blockType={block.type} size='lg' />
           <OverflowText label={subflowName} className='flex-1 text-[var(--text-primary)] text-sm' />
           {onClose && (
-            <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
+            <Button variant='ghost' className='shrink-0 p-1!' onClick={onClose}>
               <X className='size-[14px]' />
             </Button>
           )}
@@ -1148,14 +1148,14 @@ function PreviewEditorContent({
   return (
     <div className='relative flex h-full w-full flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
       {/* Header - styled like editor */}
-      <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+      <div className='mx-[-1px] flex shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && <BlockTile blockType={block.type} size='lg' />}
         <OverflowText
           label={block.name || blockConfig.name}
           className='flex-1 text-[var(--text-primary)] text-sm'
         />
         {onClose && (
-          <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
+          <Button variant='ghost' className='shrink-0 p-1!' onClick={onClose}>
             <X className='size-[14px]' />
           </Button>
         )}
@@ -1212,7 +1212,7 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
+                    className='max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1230,7 +1230,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
+                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'input' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
@@ -1252,7 +1252,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
+                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
                           </Button>
@@ -1282,7 +1282,7 @@ function PreviewEditorContent({
                     code={formatValueAsJson(executionData.output)}
                     language='json'
                     className={cn(
-                      '!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]',
+                      'max-h-[300px] min-h-0 max-w-full rounded-md border-0 bg-[var(--surface-4)]! [word-break:break-all] dark:bg-[var(--surface-3)]!',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}
@@ -1302,7 +1302,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
+                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'output' ? (
                               <Check className='size-[10px] text-[var(--text-success)]' />
@@ -1324,7 +1324,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
+                            className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='size-[10px]' />
                           </Button>
@@ -1360,7 +1360,7 @@ function PreviewEditorContent({
                       </div>
                     ) : resolvedChildWorkflowState ? (
                       <>
-                        <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                        <div className='[&_.react-flow__handle]:hidden! h-full w-full [&_*:active]:cursor-grabbing! [&_*]:cursor-grab!'>
                           <PreviewWorkflow
                             workflowState={resolvedChildWorkflowState}
                             height={160}
@@ -1472,7 +1472,7 @@ function PreviewEditorContent({
       {isSearchActive && (
         <div
           role='presentation'
-          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
+          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-xs'
           onClick={(e) => e.stopPropagation()}
         >
           <Input
@@ -1493,7 +1493,7 @@ function PreviewEditorContent({
           </span>
           <Button
             variant='ghost'
-            className='!p-1'
+            className='p-1!'
             onClick={goToPreviousMatch}
             disabled={matchCount === 0}
             aria-label='Previous match'
@@ -1502,14 +1502,14 @@ function PreviewEditorContent({
           </Button>
           <Button
             variant='ghost'
-            className='!p-1'
+            className='p-1!'
             onClick={goToNextMatch}
             disabled={matchCount === 0}
             aria-label='Next match'
           >
             <ArrowDown className='size-[12px]' />
           </Button>
-          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
+          <Button variant='ghost' className='p-1!' onClick={closeSearch} aria-label='Close search'>
             <X className='size-[12px]' />
           </Button>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index d2e9a6c48cb..b3935655903 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -57,11 +57,11 @@ interface SubBlockValueEntry {
  * Extracted to avoid recreating style objects on each render.
  */
 const HANDLE_STYLES = {
-  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-xs',
+  horizontal: 'border-none! bg-[var(--surface-7)]! h-5! w-[7px]! rounded-xs!',
   right:
-    '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+    'z-[10]! border-none! bg-[var(--workflow-edge)]! h-5! w-[7px]! rounded-r-[2px]! rounded-l-none!',
   error:
-    '!z-[10] !border-none !bg-[var(--text-error)] !h-[7px] !w-6 !rounded-b-[2px] !rounded-t-none',
+    'z-[10]! border-none! bg-[var(--text-error)]! h-[7px]! w-6! rounded-b-[2px]! rounded-t-none!',
 } as const
 
 /** Reusable style object for error handles positioned at bottom-right */
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index c562966f783..288bbc4ee31 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -298,7 +298,7 @@ export function Preview({
               <Button
                 variant='ghost'
                 onClick={handleGoBack}
-                className='flex h-[28px] items-center gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 text-[var(--text-secondary)] shadow-sm hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
+                className='flex h-[28px] items-center gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 text-[var(--text-secondary)] shadow-xs hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
               >
                 <ArrowLeft className='size-[12px]' />
                 <span className='text-caption'>Back</span>
@@ -307,7 +307,7 @@ export function Preview({
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-sm'>
+            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs'>
               <OverflowText
                 label={currentWorkflowName}
                 className='text-[var(--text-secondary)] text-caption'
@@ -333,7 +333,7 @@ export function Preview({
       </div>
 
       {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
-        <div style={{ width: panelWidth }} className='relative h-full flex-shrink-0'>
+        <div style={{ width: panelWidth }} className='relative h-full shrink-0'>
           {/* Left-edge resize handle */}
           <div
             role='separator'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index e543ac8e94c..8d6431cd43f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -310,7 +310,7 @@ export function CollapsedChatFlyoutItem({
           onChange={(e) => onEditValueChange?.(e.target.value)}
           onKeyDown={onEditKeyDown}
           onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
           maxLength={100}
           disabled={isRenaming}
           onClick={(e) => {
@@ -389,7 +389,7 @@ export function CollapsedWorkflowFlyoutItem({
           onChange={(e) => onEditValueChange?.(e.target.value)}
           onKeyDown={onEditKeyDown}
           onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
           maxLength={100}
           disabled={isRenaming}
           onClick={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
index bedee9fff8e..e65664f1b83 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
@@ -87,10 +87,10 @@ export const CommandSearch = forwardRef<HTMLInputElement, CommandSearchProps>(
           SEARCH_SURFACE_CLASSNAME[surface]
         )}
       >
-        <Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
+        <Search className='size-[14px] shrink-0 text-[var(--text-muted)]' />
         <Command.Input
           ref={ref}
-          className='-ml-1 h-8 min-w-0 flex-1 cursor-text bg-transparent indent-1 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+          className='-ml-1 h-8 min-w-0 flex-1 cursor-text bg-transparent indent-1 text-[var(--text-body)] text-sm outline-hidden placeholder:text-[var(--text-muted)] focus:outline-hidden'
           onKeyDown={handleKeyDown}
           {...props}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
index 4b19b943f38..4bf47d8dc4c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
@@ -19,9 +19,7 @@ interface ItemMetaProps {
 }
 
 function ItemMeta({ meta }: ItemMetaProps) {
-  return (
-    <span className='ml-auto flex-shrink-0 pl-2 text-[var(--text-subtle)] text-small'>{meta}</span>
-  )
+  return <span className='ml-auto shrink-0 pl-2 text-[var(--text-subtle)] text-small'>{meta}</span>
 }
 
 interface ItemFolderPathProps {
@@ -38,7 +36,7 @@ function ItemFolderPath({ folderPath }: ItemFolderPathProps) {
             label={folderPath.slice(0, -1).join(' / ')}
             className='[flex-shrink:9999]'
           />
-          <span className='flex-shrink-0 whitespace-pre'> / </span>
+          <span className='shrink-0 whitespace-pre'> / </span>
         </>
       )}
       <OverflowText label={folderPath[folderPath.length - 1]} />
@@ -68,7 +66,7 @@ function ShortcutHint({ shortcut }: ShortcutHintProps) {
   return (
     <span
       aria-label={`Keyboard shortcut ${shortcut}`}
-      className='ml-auto grid w-10 flex-shrink-0 grid-cols-3 text-center text-[var(--text-subtle)] text-small'
+      className='ml-auto grid w-10 shrink-0 grid-cols-3 text-center text-[var(--text-subtle)] text-small'
     >
       {slots.map((slot, index) => (
         <span key={`${index}-${slot}`} aria-hidden='true'>
@@ -131,7 +129,7 @@ export const MemoizedActionItem = memo(
   } & ResultMetaProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
         <OverflowText label={name} className='text-[var(--text-body)]' />
         {meta ? <ItemMeta meta={meta} /> : shortcut ? <ShortcutHint shortcut={shortcut} /> : null}
       </Command.Item>
@@ -162,12 +160,12 @@ export const MemoizedWorkflowItem = memo(
   } & ResultMetaProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
+        <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
           <Workflow className='size-[14px] text-[var(--text-icon)]' />
         </div>
-        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 text-[var(--text-body)]'>
+        <span className='flex min-w-0 max-w-[75%] shrink-0 text-[var(--text-body)]'>
           <OverflowText label={name} />
-          {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
+          {isCurrent && <span className='shrink-0 whitespace-pre'> (current)</span>}
         </span>
         {meta ? (
           <ItemMeta meta={meta} />
@@ -200,10 +198,10 @@ export const MemoizedFileItem = memo(
   } & ResultMetaProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
+        <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
           <File className='size-[14px] text-[var(--text-icon)]' />
         </div>
-        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 text-[var(--text-body)]'>
+        <span className='flex min-w-0 max-w-[75%] shrink-0 text-[var(--text-body)]'>
           <OverflowText label={name} />
         </span>
         {meta ? (
@@ -268,13 +266,13 @@ export const MemoizedWorkspaceItem = memo(
             data-slot='workspace-icon'
             src={logoUrl}
             alt=''
-            className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+            className='size-[16px] shrink-0 rounded-sm object-cover'
           />
         ) : (
           <span
             data-slot='workspace-icon'
             aria-hidden='true'
-            className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium text-[9px] text-white leading-none'
+            className='relative flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium text-[9px] text-white leading-none'
           >
             <svg className='absolute inset-0 size-full' viewBox='0 0 16 16'>
               <rect width='16' height='16' rx='2' fill={backgroundColor} />
@@ -284,7 +282,7 @@ export const MemoizedWorkspaceItem = memo(
         )}
         <span className='flex min-w-0 text-[var(--text-body)]'>
           <OverflowText label={name} />
-          {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
+          {isCurrent && <span className='shrink-0 whitespace-pre'> (current)</span>}
         </span>
         {meta && <ItemMeta meta={meta} />}
       </Command.Item>
@@ -316,7 +314,7 @@ export const MemoizedPageItem = memo(
   } & ResultMetaProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
         <OverflowText label={name} className='text-[var(--text-body)]' />
         {meta ? <ItemMeta meta={meta} /> : shortcut ? <ShortcutHint shortcut={shortcut} /> : null}
       </Command.Item>
@@ -347,8 +345,8 @@ export const MemoizedIconItem = memo(
   } & ResultMetaProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 text-[var(--text-body)]'>
+        <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+        <span className='flex min-w-0 max-w-[75%] shrink-0 text-[var(--text-body)]'>
           <OverflowText label={name} />
         </span>
         {meta ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 58a79fad7e6..e29412a87f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -1392,7 +1392,7 @@ function SearchModalContent({
                 placeholder={askMode ? 'Ask Sim anything...' : 'Search anything...'}
                 endAdornment={
                   isChatEnabled ? (
-                    <span className='flex-shrink-0 whitespace-nowrap text-[var(--text-subtle)] text-xs'>
+                    <span className='shrink-0 whitespace-nowrap text-[var(--text-subtle)] text-xs'>
                       {askMode ? '⇥ Search' : '⇥ Ask Sim'}
                     </span>
                   ) : undefined
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index c3ef9162f20..6e2be871da3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -319,7 +319,7 @@ export function SettingsSidebar({
           SIDEBAR_SECTION_GAP_CLASS,
           SIDEBAR_ITEM_GAP_CLASS,
           SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
-          'flex flex-shrink-0 flex-col px-2'
+          'flex shrink-0 flex-col px-2'
         )}
       >
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
@@ -361,7 +361,7 @@ export function SettingsSidebar({
                 key={key}
                 title={title}
                 railCollapsed={isCollapsed}
-                className={cn(index > 0 && SIDEBAR_SECTION_GAP_CLASS, 'flex-shrink-0')}
+                className={cn(index > 0 && SIDEBAR_SECTION_GAP_CLASS, 'shrink-0')}
               >
                 <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
                   {sectionItems.map((item) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
index efc79d2e73e..bd9c180d979 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
@@ -75,7 +75,7 @@ function DesktopUpdateIcon({ className }: { className?: string }) {
     <div
       className={cn(
         className,
-        'flex size-[17px] flex-shrink-0 items-center justify-center rounded-full',
+        'flex size-[17px] shrink-0 items-center justify-center rounded-full',
         chipPrimaryFillTokens
       )}
     >
@@ -181,17 +181,17 @@ export function SidebarFooter({
    * left to see. The workspace header's logo sidesteps the same rule the same way.
    */
   const avatar = !profile ? (
-    <Skeleton className='size-[16px] flex-shrink-0 rounded-full' />
+    <Skeleton className='size-[16px] shrink-0 rounded-full' />
   ) : profile.image ? (
     <img
       src={profile.image}
       alt=''
       referrerPolicy='no-referrer'
-      className='size-[16px] flex-shrink-0 rounded-full object-cover'
+      className='size-[16px] shrink-0 rounded-full object-cover'
     />
   ) : (
     <div
-      className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-full text-[9px] text-white leading-none'
+      className='flex size-[16px] shrink-0 items-center justify-center rounded-full text-[9px] text-white leading-none'
       style={{ backgroundColor: getUserColor(profile.id) }}
     >
       {name.charAt(0).toUpperCase()}
@@ -308,7 +308,7 @@ export function SidebarFooter({
                than the rail, and a shrinking chip would be squeezed onto the avatar.
                Holding its size pushes it past the edge, where the aside's clip hides
                it until there is room. */
-            className={cn('flex-shrink-0', SIDEBAR_RAIL_CHIP_CLASS)}
+            className={cn('shrink-0', SIDEBAR_RAIL_CHIP_CLASS)}
           />
         </DropdownMenuTrigger>
       </SidebarTooltip>
@@ -345,7 +345,7 @@ export function SidebarFooter({
   return (
     <div
       className={cn(
-        'flex flex-shrink-0 border-t px-2 pt-[9px] pb-2',
+        'flex shrink-0 border-t px-2 pt-[9px] pb-2',
         isCollapsed ? cn(SIDEBAR_ITEM_GAP_CLASS, 'flex-col-reverse') : 'items-center'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
index 3f32ddbbaae..0516ff98ce7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
@@ -68,7 +68,7 @@ export function SidebarSection({
 
   return (
     <div className={cn('group/section flex flex-col', className)}>
-      <div className='flex h-[18px] flex-shrink-0 items-center'>
+      <div className='flex h-[18px] shrink-0 items-center'>
         {railCollapsed ? (
           <div className={TITLE_ROW_CLASS}>{label}</div>
         ) : (
@@ -95,10 +95,10 @@ export function SidebarSection({
           </button>
         )}
         {/* Carries the gutter the row gave up so the toggle can reach the rail's edge. */}
-        {action ? <div className='flex flex-shrink-0 items-center pr-4'>{action}</div> : null}
+        {action ? <div className='flex shrink-0 items-center pr-4'>{action}</div> : null}
       </div>
       <Expandable expanded={railCollapsed || expanded}>
-        <ExpandableContent className={cn(!animationsEnabled && '!animate-none')}>
+        <ExpandableContent className={cn(!animationsEnabled && 'animate-none!')}>
           {/* The header gap pads an inner wrapper rather than the animated element:
               `collapsible-up`/`-down` interpolate height alone, so a margin here would
               hold its full 6px for the whole close and then vanish on unmount, snapping
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
index 5e8bfa3e72c..ef700f0cf44 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
@@ -21,7 +21,7 @@ function StatusAlert() {
       className='flex w-full flex-col gap-2 rounded-xl border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)] p-2 shadow-[var(--shadow-overlay)] [--surface-hover:color-mix(in_srgb,var(--text-error)_8%,transparent)]'
     >
       <div className='flex min-w-0 items-center gap-1.5'>
-        <CircleAlert className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        <CircleAlert className='size-[16px] shrink-0 text-[var(--text-icon)]' />
         <p className='min-w-0 text-[var(--text-body)] text-sm leading-5'>Sim is having issues</p>
       </div>
       <ChipLink
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 78b0987f7f7..914643aeba4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -528,7 +528,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
             onChange={(e) => setEditValue(e.target.value)}
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
-            className='min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
             maxLength={50}
             disabled={isRenaming}
             onClick={(e) => {
@@ -548,7 +548,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
             >
               <OverflowText label={folder.name} className='flex-1 text-[var(--text-body)]' />
             </div>
-            <div className='relative size-[18px] flex-shrink-0'>
+            <div className='relative size-[18px] shrink-0'>
               {folder.locked && (
                 <span
                   role='img'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 8992c70e3fc..734aefef876 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -3,7 +3,6 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { chipVariants, cn, OverflowText } from '@sim/emcn'
 import { Lock, MoreHorizontal } from '@sim/emcn/icons'
-import clsx from 'clsx'
 import Link from 'next/link'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -428,7 +427,7 @@ export const WorkflowItem = memo(function WorkflowItem({
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onBlur={handleInputBlur}
-                className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
                 maxLength={100}
                 disabled={isRenaming}
                 onClick={(e) => {
@@ -449,12 +448,12 @@ export const WorkflowItem = memo(function WorkflowItem({
           </div>
         </div>
         {!isEditing && (
-          <div className='relative size-[18px] flex-shrink-0'>
+          <div className='relative size-[18px] shrink-0'>
             {workflow.locked && (
               <span
                 role='img'
                 aria-label='Workflow is locked'
-                className={clsx(
+                className={cn(
                   'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
                   !isAnyDragActive && 'group-hover:opacity-0',
                   isContextMenuOpen && 'opacity-0'
@@ -468,10 +467,19 @@ export const WorkflowItem = memo(function WorkflowItem({
               aria-label='Workflow options'
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
-              className={clsx(
+              className={cn(
                 'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
                 !isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
-                isContextMenuOpen && 'pointer-events-auto opacity-100'
+                /**
+                 * `opacity-100` only. `pointer-events-auto` belongs here too,
+                 * but it has never applied: under `clsx` both it and the base
+                 * `pointer-events-none` shipped, and Tailwind emits
+                 * `pointer-events-none` last, so it won. Adding it back under
+                 * `cn` (where the last argument wins) would make the button
+                 * clickable for the first time — a real fix, but a behaviour
+                 * change that does not belong in a rendering-neutral upgrade.
+                 */
+                isContextMenuOpen && 'opacity-100'
               )}
             >
               <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index 0ae374bc2c6..4282d30611a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import clsx from 'clsx'
+import { cn } from '@sim/emcn'
 import { useShallow } from 'zustand/react/shallow'
 import { buildFolderTree, getFolderPath } from '@/lib/folders/tree'
 import { EmptyAreaContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/empty-area-context-menu'
@@ -445,7 +445,7 @@ export const WorkflowList = memo(function WorkflowList({
         <div key={folder.id} className='relative'>
           <DropIndicatorLine show={showBefore} level={level} position='before' />
           <div
-            className={clsx(
+            className={cn(
               'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
@@ -570,12 +570,12 @@ export const WorkflowList = memo(function WorkflowList({
         data-empty-area
       >
         <div
-          className={clsx('relative flex-1 rounded-sm', !hasRootItems && 'min-h-[26px]')}
+          className={cn('relative flex-1 rounded-sm', !hasRootItems && 'min-h-[26px]')}
           {...rootDropZoneHandlers}
           data-empty-area
         >
           <div
-            className={clsx(
+            className={cn(
               'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showRootInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/pending-invitations/view-invitations-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/pending-invitations/view-invitations-modal.tsx
index 2a63f4f848d..090ca9e4b68 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/pending-invitations/view-invitations-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/pending-invitations/view-invitations-modal.tsx
@@ -121,7 +121,7 @@ export function ViewInvitationsModal({ open, onOpenChange }: ViewInvitationsModa
                 variant='primary'
                 disabled={isBusy}
                 onClick={() => void handleAccept(inv)}
-                className='flex-shrink-0'
+                className='shrink-0'
               >
                 Accept
               </Chip>
@@ -129,7 +129,7 @@ export function ViewInvitationsModal({ open, onOpenChange }: ViewInvitationsModa
                 disabled={isBusy}
                 onClick={() => void handleDecline(inv)}
                 aria-label={`Decline invitation to ${invitationLabel(inv)}`}
-                className='flex-shrink-0'
+                className='shrink-0'
               >
                 Decline
               </Chip>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 5513a68476c..f188a591562 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -457,7 +457,7 @@ function WorkspaceHeaderImpl({
           onClick={onExpandSidebar}
           className={cn(chipVariants({ fullWidth: true }), SIDEBAR_RAIL_CHIP_CLASS)}
         >
-          <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
+          <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
             {activeWorkspaceFull?.logoUrl ? (
               <>
                 <img
@@ -530,11 +530,11 @@ function WorkspaceHeaderImpl({
                   <img
                     src={activeWorkspaceFull.logoUrl}
                     alt={activeWorkspaceFull.name || 'Workspace logo'}
-                    className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+                    className='size-[16px] shrink-0 rounded-sm object-cover'
                   />
                 ) : (
                   <div
-                    className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
+                    className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
                     style={{
                       backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
                     }}
@@ -543,7 +543,7 @@ function WorkspaceHeaderImpl({
                   </div>
                 )
               ) : (
-                <Skeleton className='size-[16px] flex-shrink-0 rounded-sm' />
+                <Skeleton className='size-[16px] shrink-0 rounded-sm' />
               )}
               {!isCollapsed && activeWorkspace?.name && (
                 <>
@@ -660,11 +660,11 @@ function WorkspaceHeaderImpl({
                               <img
                                 src={workspace.logoUrl}
                                 alt={workspace.name || 'Workspace logo'}
-                                className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+                                className='size-[16px] shrink-0 rounded-sm object-cover'
                               />
                             ) : (
                               <div
-                                className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
+                                className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
                                 style={{
                                   backgroundColor: workspace.color ?? 'var(--brand-accent)',
                                 }}
@@ -712,7 +712,7 @@ function WorkspaceHeaderImpl({
                                 }
                                 setEditingWorkspaceId(null)
                               }}
-                              className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                              className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-hidden focus:outline-hidden focus:ring-0 focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0'
                               maxLength={100}
                               autoComplete='off'
                               autoCorrect='off'
@@ -752,11 +752,11 @@ function WorkspaceHeaderImpl({
                               <img
                                 src={workspace.logoUrl}
                                 alt={workspace.name || 'Workspace logo'}
-                                className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+                                className='size-[16px] shrink-0 rounded-sm object-cover'
                               />
                             ) : (
                               <div
-                                className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
+                                className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
                                 style={{
                                   backgroundColor: workspace.color ?? 'var(--brand-accent)',
                                 }}
@@ -771,7 +771,7 @@ function WorkspaceHeaderImpl({
                             {/* Pin and options share one fixed slot, as the chat rows do:
                                 the trailing width never changes, so pinning cannot re-truncate
                                 the name under the user's cursor. */}
-                            <div className='relative flex size-[18px] flex-shrink-0 items-center justify-center'>
+                            <div className='relative flex size-[18px] shrink-0 items-center justify-center'>
                               {pinnedWorkspaceIds.has(workspace.id) && (
                                 <Pin
                                   aria-hidden={false}
@@ -876,17 +876,17 @@ function WorkspaceHeaderImpl({
             <img
               src={activeWorkspaceFull.logoUrl}
               alt={activeWorkspaceFull.name || 'Workspace logo'}
-              className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+              className='size-[16px] shrink-0 rounded-sm object-cover'
             />
           ) : activeWorkspace ? (
             <div
-              className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
+              className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
               style={{ backgroundColor: activeWorkspaceFull?.color ?? 'var(--brand-accent)' }}
             >
               {workspaceInitial}
             </div>
           ) : (
-            <Skeleton className='size-[16px] flex-shrink-0 rounded-sm' />
+            <Skeleton className='size-[16px] shrink-0 rounded-sm' />
           )}
           {!isCollapsed && activeWorkspace?.name && (
             <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
index 745017e3077..dc682c71374 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
@@ -54,7 +54,7 @@ export const SIDEBAR_RAIL_CHIP_CLASS = [
   'transition-[width]',
   '![transition-duration:175ms]',
   '[transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
-  'motion-reduce:!transition-none',
+  'motion-reduce:transition-none!',
   'group-data-[collapsed]/rail:w-[32px]',
 ].join(' ')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 753b54dda44..d8574684642 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -194,7 +194,7 @@ export function SidebarTooltip({
 function SidebarItemSkeleton() {
   return (
     <div className='sidebar-collapse-hide flex h-[30px] items-center gap-2 rounded-lg px-2'>
-      <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
+      <Skeleton className='h-[16px] w-[16px] shrink-0 rounded-sm' />
     </div>
   )
 }
@@ -280,7 +280,7 @@ const SidebarChatItem = memo(function SidebarChatItem({
       >
         <OverflowText label={chat.name} className='flex-1 text-[var(--text-body)]' />
         {chat.id !== 'new' && (
-          <div className='relative flex size-[18px] flex-shrink-0 items-center justify-center'>
+          <div className='relative flex size-[18px] shrink-0 items-center justify-center'>
             {showStatusDot && (
               <span
                 aria-hidden='true'
@@ -1213,10 +1213,10 @@ export const Sidebar = memo(function Sidebar({
     [workspaces, handleLeaveWorkspace]
   )
 
-  const chatsCollapsedIcon = <Task className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+  const chatsCollapsedIcon = <Task className='size-[16px] shrink-0 text-[var(--text-icon)]' />
 
   const workflowsCollapsedIcon = (
-    <Workflow className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+    <Workflow className='size-[16px] shrink-0 text-[var(--text-icon)]' />
   )
 
   const workflowsPrimaryAction = {
@@ -1362,7 +1362,7 @@ export const Sidebar = memo(function Sidebar({
             )}
             <div
               className={cn(
-                'relative flex flex-shrink-0 items-center px-2 pt-3',
+                'relative flex shrink-0 items-center px-2 pt-3',
                 !isPeeking &&
                   '[[data-sim-desktop-title-bar=inset]_&]:pt-[var(--desktop-title-bar-height)]'
               )}
@@ -1468,7 +1468,7 @@ export const Sidebar = memo(function Sidebar({
                     SIDEBAR_SECTION_GAP_CLASS,
                     SIDEBAR_ITEM_GAP_CLASS,
                     SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
-                    'flex flex-shrink-0 flex-col px-2'
+                    'flex shrink-0 flex-col px-2'
                   )}
                 >
                   {topNavItems.map((item) => (
@@ -1495,7 +1495,7 @@ export const Sidebar = memo(function Sidebar({
                       <SidebarSection
                         title='Chats'
                         railCollapsed={isCollapsed}
-                        className='chats-section flex-shrink-0'
+                        className='chats-section shrink-0'
                       >
                         {isCollapsed ? (
                           <div className='px-2'>
@@ -1571,7 +1571,7 @@ export const Sidebar = memo(function Sidebar({
                                           }
                                           onKeyDown={chatFlyoutRename.handleKeyDown}
                                           onBlur={handleChatRenameBlur}
-                                          className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-none'
+                                          className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-hidden'
                                         />
                                       </div>
                                     )
@@ -1621,7 +1621,7 @@ export const Sidebar = memo(function Sidebar({
                     <SidebarSection
                       title='Workspace'
                       railCollapsed={isCollapsed}
-                      className={cn(SIDEBAR_SECTION_GAP_CLASS, 'flex-shrink-0')}
+                      className={cn(SIDEBAR_SECTION_GAP_CLASS, 'shrink-0')}
                     >
                       <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
                         {workspaceNavItems.map((item) => {
@@ -1815,7 +1815,7 @@ export const Sidebar = memo(function Sidebar({
                 </div>
 
                 {(isHosted || isStatusNoticePreviewEnabled) && !isCollapsed ? (
-                  <div className='flex-shrink-0 px-2 py-2'>
+                  <div className='shrink-0 px-2 py-2'>
                     <StatusNotice preview={isStatusNoticePreviewEnabled} />
                   </div>
                 ) : null}
diff --git a/apps/sim/blocks/icon-color.test.ts b/apps/sim/blocks/icon-color.test.ts
index 8ccc76d51e1..fb3b4c374d7 100644
--- a/apps/sim/blocks/icon-color.test.ts
+++ b/apps/sim/blocks/icon-color.test.ts
@@ -37,7 +37,7 @@ describe('getTileIconColorClass', () => {
   })
 
   it('emits the important variant when requested', () => {
-    expect(getTileIconColorClass('#FFFFFF', true)).toBe('!text-black')
-    expect(getTileIconColorClass('#171717', true)).toBe('!text-white')
+    expect(getTileIconColorClass('#FFFFFF', true)).toBe('text-black!')
+    expect(getTileIconColorClass('#171717', true)).toBe('text-white!')
   })
 })
diff --git a/apps/sim/blocks/icon-color.ts b/apps/sim/blocks/icon-color.ts
index b3dea250d50..e60bf408cc3 100644
--- a/apps/sim/blocks/icon-color.ts
+++ b/apps/sim/blocks/icon-color.ts
@@ -32,7 +32,7 @@ export function isLightTileColor(bgColor: string | null | undefined): boolean {
  * near-black so monochrome `currentColor` icons (Notion, Mailchimp, …) stay
  * legible instead of rendering white-on-white. Hardcoded multi-color icons
  * ignore the class and keep their own fills. Pass `important` when overriding
- * an inherited text color (the legacy `!text-white` tile rows).
+ * an inherited text color (the legacy `text-white!` tile rows).
  *
  * All four literals are spelled out so Tailwind's JIT scanner emits them.
  */
@@ -40,6 +40,6 @@ export function getTileIconColorClass(
   bgColor: string | null | undefined,
   important = false
 ): string {
-  if (isLightTileColor(bgColor)) return important ? '!text-black' : 'text-black'
-  return important ? '!text-white' : 'text-white'
+  if (isLightTileColor(bgColor)) return important ? 'text-black!' : 'text-black'
+  return important ? 'text-white!' : 'text-white'
 }
diff --git a/apps/sim/components.json b/apps/sim/components.json
index 5c03e841bc2..3a60d77178c 100644
--- a/apps/sim/components.json
+++ b/apps/sim/components.json
@@ -4,8 +4,8 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/globals.css",
+    "config": "",
+    "css": "app/_styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
diff --git a/apps/sim/components/agent-stream/agent-stream-chrome.tsx b/apps/sim/components/agent-stream/agent-stream-chrome.tsx
index ff7b3b832a0..c4a47c62a1e 100644
--- a/apps/sim/components/agent-stream/agent-stream-chrome.tsx
+++ b/apps/sim/components/agent-stream/agent-stream-chrome.tsx
@@ -178,7 +178,7 @@ export function AgentStreamThinkingChrome({
             {open && isStreaming && overflowing && (
               <div
                 aria-hidden
-                className='pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-[var(--bg)] to-transparent'
+                className='pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-linear-to-t from-[var(--bg)] to-transparent'
               />
             )}
           </div>
diff --git a/apps/sim/components/emails/_styles/base.tokens.test.ts b/apps/sim/components/emails/_styles/base.tokens.test.ts
index 9d4b794a32b..a54097c8cf5 100644
--- a/apps/sim/components/emails/_styles/base.tokens.test.ts
+++ b/apps/sim/components/emails/_styles/base.tokens.test.ts
@@ -1,7 +1,7 @@
 /**
  * Email styles cannot use CSS variables — clients strip them — so `base.ts`
  * hardcodes hex copies of the platform tokens. This suite fails when those
- * copies drift from `globals.css`, `tailwind.config.ts`, or the chip chrome.
+ * copies drift from `globals.css` or the chip chrome.
  *
  * @vitest-environment node
  */
@@ -9,7 +9,6 @@ import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { describe, expect, it } from 'vitest'
 import { baseStyles, colors, typography } from '@/components/emails/_styles'
-import tailwindConfig from '@/tailwind.config'
 
 const APP_ROOT = join(__dirname, '../../..')
 
@@ -19,7 +18,18 @@ const chipChrome = readFileSync(
   'utf8'
 )
 
-const tailwindFontSize = tailwindConfig.theme?.extend?.fontSize as Record<string, string>
+/**
+ * The type scale moved into the `@theme` block when the v4 upgrade removed
+ * `tailwind.config.ts`. This scans the whole file rather than that block, so it
+ * also picks up the `--text-*` colour tokens — harmless because only the size
+ * keys are asserted below. Paired sub-keys such as `--text-xs--line-height` are
+ * not sizes, so the double dash is excluded.
+ */
+const tailwindFontSize: Record<string, string> = Object.fromEntries(
+  [...globalsCss.matchAll(/^\s*--text-([a-z0-9-]+):\s*([^;]+);/gm)]
+    .filter(([, name]) => !name.includes('--'))
+    .map(([, name, value]) => [name, value.trim()])
+)
 
 /**
  * Dark mode redefines the same names later in the file and emails are
@@ -65,7 +75,7 @@ describe('email color tokens mirror globals.css', () => {
   })
 })
 
-describe('email type scale mirrors tailwind.config.ts', () => {
+describe('email type scale mirrors the globals.css @theme scale', () => {
   it.each(['caption', 'small', 'base', 'md'])('fontSize.%s matches the Tailwind token', (name) => {
     expect(typography.fontSize[name as keyof typeof typography.fontSize]).toBe(
       tailwindFontSize[name]
diff --git a/apps/sim/components/emails/_styles/base.ts b/apps/sim/components/emails/_styles/base.ts
index 6aa4c7d02d0..0f11ad6f8e8 100644
--- a/apps/sim/components/emails/_styles/base.ts
+++ b/apps/sim/components/emails/_styles/base.ts
@@ -66,7 +66,7 @@ export const typography = {
   systemFontFamily:
     '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
   /**
-   * `caption`/`base`/`md` are Sim's own scale from `tailwind.config.ts`. `sm` is
+   * `caption`/`base`/`md` are Sim's own scale from the `@theme` block in `app/_styles/globals.css`. `sm` is
    * Tailwind's stock 14px — not a Sim token, but what `text-sm` resolves to in
    * `chipGeometryClass`, so the CTA has to use it.
    */
diff --git a/apps/sim/components/page-header-bar.ts b/apps/sim/components/page-header-bar.ts
index 23436cad2e2..582c8d17cd4 100644
--- a/apps/sim/components/page-header-bar.ts
+++ b/apps/sim/components/page-header-bar.ts
@@ -22,7 +22,7 @@ export const TITLE_BAR_LANE_PT = 'pt-[calc(8.5px+var(--workspace-content-title-b
  *
  * Single source of truth for this geometry — never re-derive it per page.
  */
-export const PAGE_HEADER_BAR = `flex flex-shrink-0 items-center bg-[var(--bg)] px-4 ${TITLE_BAR_LANE_PT} pb-[8.5px]`
+export const PAGE_HEADER_BAR = `flex shrink-0 items-center bg-[var(--bg)] px-4 ${TITLE_BAR_LANE_PT} pb-[8.5px]`
 
 /**
  * The right-hand action cluster inside a top bar. Every header — settings,
diff --git a/apps/sim/components/permissions/member-row.tsx b/apps/sim/components/permissions/member-row.tsx
index 50308f7b05b..75e3f324074 100644
--- a/apps/sim/components/permissions/member-row.tsx
+++ b/apps/sim/components/permissions/member-row.tsx
@@ -54,7 +54,7 @@ export function MemberRow<TRole extends string = MemberRole>({
       )}
     >
       <div className='flex min-w-0 items-center gap-2.5'>
-        <Avatar className='size-9 flex-shrink-0'>
+        <Avatar className='size-9 shrink-0'>
           <AvatarFallback
             style={{ background: getUserColor(member.userId || member.userEmail || '') }}
             className='border border-[var(--border-1)] text-small text-white'
diff --git a/apps/sim/components/pii/custom-patterns-editor.tsx b/apps/sim/components/pii/custom-patterns-editor.tsx
index f441e048cd1..d3c67b5b2df 100644
--- a/apps/sim/components/pii/custom-patterns-editor.tsx
+++ b/apps/sim/components/pii/custom-patterns-editor.tsx
@@ -69,7 +69,7 @@ export function CustomPatternsEditor({ patterns, onChange }: CustomPatternsEdito
                 type='button'
                 aria-label='Remove pattern'
                 onClick={() => removeRow(index)}
-                className='flex size-[30px] flex-shrink-0 items-center justify-center rounded-md text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-error)]'
+                className='flex size-[30px] shrink-0 items-center justify-center rounded-md text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-error)]'
               >
                 <Trash className='size-[14px]' />
               </button>
diff --git a/apps/sim/components/settings/settings-sidebar.tsx b/apps/sim/components/settings/settings-sidebar.tsx
index b51c8399594..c210e9bbd1b 100644
--- a/apps/sim/components/settings/settings-sidebar.tsx
+++ b/apps/sim/components/settings/settings-sidebar.tsx
@@ -104,14 +104,14 @@ export function SettingsSidebar<Section extends SettingsSection>({
 
   return (
     <>
-      <div className='flex flex-shrink-0 flex-col gap-0.5 px-2 pb-1.5'>
+      <div className='flex shrink-0 flex-col gap-0.5 px-2 pb-1.5'>
         {/* Both stay buttons, not Links: leaving settings must run the unsaved-changes guard. */}
         {SETTINGS_PLANE_CHROME[plane].showWordmark ? (
           <button
             type='button'
             aria-label='Sim home'
             onClick={() => requestLeave(() => router.push(LANDING_HREF))}
-            className='flex h-[30px] flex-shrink-0 items-center px-2 transition-opacity hover:opacity-70'
+            className='flex h-[30px] shrink-0 items-center px-2 transition-opacity hover:opacity-70'
           >
             <SimWordmark />
           </button>
@@ -147,10 +147,7 @@ export function SettingsSidebar<Section extends SettingsSection>({
             }))
             .filter((group) => group.items.length > 0)
             .map((group, index) => (
-              <div
-                key={group.key}
-                className={cn(index > 0 && 'mt-6', 'flex flex-shrink-0 flex-col')}
-              >
+              <div key={group.key} className={cn(index > 0 && 'mt-6', 'flex shrink-0 flex-col')}>
                 <div className='px-4 pb-2'>
                   <div className='text-[var(--text-muted)] text-small'>{group.title}</div>
                 </div>
@@ -181,7 +178,7 @@ export function SettingsSidebar<Section extends SettingsSection>({
                             requestLeave(() => router.replace(href, { scroll: false }))
                           }}
                         >
-                          <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                          <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
                           <OverflowText
                             label={item.label}
                             className='sidebar-collapse-hide text-[var(--text-body)]'
diff --git a/apps/sim/components/settings/standalone-settings-shell.tsx b/apps/sim/components/settings/standalone-settings-shell.tsx
index ac31197e7b6..82a9302611c 100644
--- a/apps/sim/components/settings/standalone-settings-shell.tsx
+++ b/apps/sim/components/settings/standalone-settings-shell.tsx
@@ -95,7 +95,7 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
       */}
       <aside
         style={{ width: SIDEBAR_WIDTH.DEFAULT }}
-        className='flex h-full flex-shrink-0 flex-col overflow-hidden bg-[var(--surface-1)] pt-3'
+        className='flex h-full shrink-0 flex-col overflow-hidden bg-[var(--surface-1)] pt-3'
         aria-label={`${SETTINGS_PLANE_CHROME[plane].label} settings navigation`}
       >
         {sidebar}
diff --git a/apps/sim/components/ui/button.tsx b/apps/sim/components/ui/button.tsx
index 8f5d357f827..80b68c91009 100644
--- a/apps/sim/components/ui/button.tsx
+++ b/apps/sim/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cn } from '@sim/emcn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/ui/generated-password-input.tsx b/apps/sim/components/ui/generated-password-input.tsx
index e1d09f880a2..451c9d4a6fe 100644
--- a/apps/sim/components/ui/generated-password-input.tsx
+++ b/apps/sim/components/ui/generated-password-input.tsx
@@ -106,7 +106,7 @@ export function GeneratedPasswordInput({
                   onClick={handleGeneratePassword}
                   disabled={disabled}
                   aria-label='Generate password'
-                  className='!p-1.5'
+                  className='p-1.5!'
                 >
                   <RefreshCw className='size-3' />
                 </Button>
@@ -124,7 +124,7 @@ export function GeneratedPasswordInput({
                 onClick={() => copy(displayValue)}
                 disabled={!displayValue || disabled}
                 aria-label='Copy password'
-                className='!p-1.5'
+                className='p-1.5!'
               >
                 {copied ? <Check className='size-3' /> : <Clipboard className='size-3' />}
               </Button>
@@ -141,7 +141,7 @@ export function GeneratedPasswordInput({
                 onClick={toggleShowPassword}
                 disabled={disabled || isFetchingCurrent}
                 aria-label={showPassword ? 'Hide password' : 'Show password'}
-                className='!p-1.5'
+                className='p-1.5!'
               >
                 {isFetchingCurrent ? (
                   <Loader className='size-3' animate />
diff --git a/apps/sim/components/ui/select.tsx b/apps/sim/components/ui/select.tsx
index 7500fd1b013..bcae7e95d48 100644
--- a/apps/sim/components/ui/select.tsx
+++ b/apps/sim/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 4f66aa493f6..a115c94a864 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -157,7 +157,7 @@ function StatusFilterChip({ value, onChange }: StatusFilterChipProps) {
       onChange={(next) => onChange(next as StatusFilter)}
       options={STATUS_FILTER_OPTIONS}
       matchTriggerWidth={false}
-      className='w-[140px] flex-shrink-0'
+      className='w-[140px] shrink-0'
     />
   )
 }
@@ -546,8 +546,8 @@ function ProviderRow({
           checked={isProviderAllowed}
           onCheckedChange={() => onToggleProvider()}
         />
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-          {ProviderIcon && <ProviderIcon className='!size-[16px]' />}
+        <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
+          {ProviderIcon && <ProviderIcon className='size-[16px]!' />}
         </div>
         <button
           type='button'
@@ -560,14 +560,14 @@ function ProviderRow({
         >
           <OverflowText label={providerName} className='text-sm' />
           {isProviderAllowed && deniedCount > 0 && (
-            <ChipTag variant='gray' className='flex-shrink-0'>
+            <ChipTag variant='gray' className='shrink-0'>
               {deniedCount} blocked
             </ChipTag>
           )}
           {isProviderAllowed && (
             <ChevronDown
               className={cn(
-                'ml-auto size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+                'ml-auto size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
                 expanded && 'rotate-180'
               )}
             />
@@ -630,10 +630,10 @@ function BlockToolRow({
           onCheckedChange={() => onToggleBlock()}
         />
         <div
-          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+          className='relative flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: block.bgColor }}
         >
-          {BlockIcon && <BlockIcon className='!size-[9px] text-white' />}
+          {BlockIcon && <BlockIcon className='size-[9px]! text-white' />}
         </div>
         <button
           type='button'
@@ -651,19 +651,19 @@ function BlockToolRow({
               is the only thing that tells them apart, so an allowlist decision made without
               it is a guess. */}
           {block.sourceWorkspaceName && (
-            <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>
+            <span className='shrink-0 text-[var(--text-muted)] text-caption'>
               {block.sourceWorkspaceName}
             </span>
           )}
           {isBlockAllowed && deniedCount > 0 && (
-            <ChipTag variant='gray' className='flex-shrink-0'>
+            <ChipTag variant='gray' className='shrink-0'>
               {deniedCount} blocked
             </ChipTag>
           )}
           {isBlockAllowed && isExpandable && (
             <ChevronDown
               className={cn(
-                'ml-auto size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+                'ml-auto size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
                 expanded && 'rotate-180'
               )}
             />
@@ -671,7 +671,7 @@ function BlockToolRow({
         </button>
         {/* Outside the button: an Info trigger is itself a button and cannot nest. */}
         {block.description && (
-          <Info side='top' className={cn('flex-shrink-0', !isBlockAllowed && 'opacity-60')}>
+          <Info side='top' className={cn('shrink-0', !isBlockAllowed && 'opacity-60')}>
             {block.description}
           </Info>
         )}
@@ -1546,7 +1546,7 @@ export function GroupDetail({
                       options={workspaceOptions}
                       isLoading={workspacesLoading}
                       allowAllWorkspaces={false}
-                      className='flex-shrink-0'
+                      className='shrink-0'
                     />
                   </div>
                   {viewingGroup.workspaces.length > 0 && (
@@ -1579,7 +1579,7 @@ export function GroupDetail({
                       variant='primary'
                       leftIcon={Plus}
                       onClick={handleOpenAddMembersModal}
-                      className='flex-shrink-0'
+                      className='shrink-0'
                     >
                       Add
                     </Chip>
@@ -1588,7 +1588,7 @@ export function GroupDetail({
                     <div className='-mx-2 flex flex-col gap-y-0.5'>
                       {[1, 2].map((i) => (
                         <div key={i} className='flex items-center gap-2.5 p-2'>
-                          <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
+                          <Skeleton className='size-[14px] shrink-0 rounded-full' />
                           <Skeleton className='h-[14px] w-[180px]' />
                         </div>
                       ))}
@@ -1719,20 +1719,20 @@ export function GroupDetail({
                             onCheckedChange={() => toggleIntegration(block.type)}
                           />
                           <div
-                            className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+                            className='relative flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm'
                             style={{ background: block.bgColor }}
                           >
-                            {BlockIcon && <BlockIcon className='!size-[9px] text-white' />}
+                            {BlockIcon && <BlockIcon className='size-[9px]! text-white' />}
                           </div>
                           <OverflowText label={block.name} className='text-sm' />
                           {block.sourceWorkspaceName && (
-                            <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>
+                            <span className='shrink-0 text-[var(--text-muted)] text-caption'>
                               {block.sourceWorkspaceName}
                             </span>
                           )}
                         </label>
                         {block.description && (
-                          <Info side='top' className='flex-shrink-0'>
+                          <Info side='top' className='shrink-0'>
                             {block.description}
                           </Info>
                         )}
@@ -1837,12 +1837,12 @@ export function GroupDetail({
                             />
                             <span className='font-normal text-sm'>{feature.label}</span>
                             {inert && (
-                              <ChipTag variant='gray' className='flex-shrink-0'>
+                              <ChipTag variant='gray' className='shrink-0'>
                                 Organization
                               </ChipTag>
                             )}
                           </label>
-                          <Info side='top' className='flex-shrink-0'>
+                          <Info side='top' className='shrink-0'>
                             {inert
                               ? `${feature.hint} ${ORGANIZATION_SCOPED_FEATURE_NOTE}`
                               : feature.hint}
diff --git a/apps/sim/ee/audit-logs/components/audit-logs.tsx b/apps/sim/ee/audit-logs/components/audit-logs.tsx
index a15849a95fc..afa59de41b3 100644
--- a/apps/sim/ee/audit-logs/components/audit-logs.tsx
+++ b/apps/sim/ee/audit-logs/components/audit-logs.tsx
@@ -184,7 +184,7 @@ function auditLogDetails(entry: EnterpriseAuditLogEntry): ReactNode {
   return (
     <>
       <div className='flex gap-2'>
-        <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Resource</span>
+        <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>Resource</span>
         <span className='text-[var(--text-primary)]'>
           {formatResourceType(entry.resourceType)}
           {entry.resourceId && (
@@ -194,12 +194,12 @@ function auditLogDetails(entry: EnterpriseAuditLogEntry): ReactNode {
       </div>
       {entry.resourceName && (
         <div className='flex gap-2'>
-          <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Name</span>
+          <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>Name</span>
           <span className='text-[var(--text-primary)]'>{entry.resourceName}</span>
         </div>
       )}
       <div className='flex gap-2'>
-        <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Actor</span>
+        <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>Actor</span>
         <span className='text-[var(--text-primary)]'>
           {entry.actorName || 'Unknown'}
           {entry.actorEmail && (
@@ -209,13 +209,13 @@ function auditLogDetails(entry: EnterpriseAuditLogEntry): ReactNode {
       </div>
       {entry.description && (
         <div className='flex gap-2'>
-          <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Description</span>
+          <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>Description</span>
           <span className='text-[var(--text-primary)]'>{entry.description}</span>
         </div>
       )}
       {metadataEntries.map(([key, value]) => (
         <div key={key} className='flex gap-2'>
-          <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>
+          <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>
             {formatMetadataLabel(key)}
           </span>
           <div className='min-w-0 flex-1'>{renderMetadataValue(value)}</div>
diff --git a/apps/sim/ee/data-drains/components/data-drain-detail.tsx b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
index e8d5bcf68e0..260fe3758e0 100644
--- a/apps/sim/ee/data-drains/components/data-drain-detail.tsx
+++ b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
@@ -62,7 +62,7 @@ interface DetailRowProps {
 function DetailRow({ label, children }: DetailRowProps) {
   return (
     <div className='flex items-center justify-between gap-3'>
-      <span className='flex-shrink-0 text-[var(--text-muted)] text-small'>{label}</span>
+      <span className='shrink-0 text-[var(--text-muted)] text-small'>{label}</span>
       <span className='min-w-0 break-words text-right text-[var(--text-body)] text-sm'>
         {children}
       </span>
@@ -269,7 +269,7 @@ function RunRow({ run }: { run: DataDrainRun }) {
         </div>
         {run.error && <div className='break-words text-[var(--text-error)]'>{run.error}</div>}
       </div>
-      <div className='flex-shrink-0 text-right text-[var(--text-muted)]'>
+      <div className='shrink-0 text-right text-[var(--text-muted)]'>
         <div className='tabular-nums'>{run.rowsExported.toLocaleString()} rows</div>
         <div className='tabular-nums'>
           {formatFileSize(run.bytesWritten, { includeBytes: true })}
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index 15637672d8c..f342d9748f6 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -528,7 +528,7 @@ function PolicyDetail({
                 value={draft.workspaceIds}
                 onChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
                 options={workspaceOptions}
-                className='flex-shrink-0'
+                className='shrink-0'
               />
             </div>
           </SettingsSection>
diff --git a/apps/sim/ee/organization-usage/components/usage-consumers.tsx b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
index 610056f46cd..6039688d960 100644
--- a/apps/sim/ee/organization-usage/components/usage-consumers.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
@@ -147,12 +147,10 @@ function UsageConsumerRow({
         onSelect && 'transition-colors hover-hover:bg-[var(--surface-active)]'
       )}
     >
-      {ProviderIcon && (
-        <ProviderIcon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-      )}
+      {ProviderIcon && <ProviderIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
       <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>{row.label}</span>
       <div
-        className='h-[4px] w-[64px] flex-shrink-0 overflow-hidden rounded-full bg-[var(--border)]'
+        className='h-[4px] w-[64px] shrink-0 overflow-hidden rounded-full bg-[var(--border)]'
         aria-hidden='true'
       >
         <div
@@ -160,7 +158,7 @@ function UsageConsumerRow({
           style={{ width: `${Math.max(2, Math.round(row.share * 100))}%` }}
         />
       </div>
-      <span className='w-[72px] flex-shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
+      <span className='w-[72px] shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
         {showTokensOnly ? formatChartCompactNumber(row.tokens ?? 0) : row.credits.toLocaleString()}
       </span>
       {/* An arrow or a menu, never both — `sim-settings-pages.md`. */}
@@ -169,7 +167,7 @@ function UsageConsumerRow({
       ) : actions?.length ? (
         <RowActionsMenu label={`${row.label} actions`} actions={actions} />
       ) : reservedTrailing ? (
-        <span className={cn(reservedTrailing, 'flex-shrink-0')} aria-hidden='true' />
+        <span className={cn(reservedTrailing, 'shrink-0')} aria-hidden='true' />
       ) : null}
     </Row>
   )
@@ -273,7 +271,7 @@ export function UsageConsumers({
               <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-sm'>
                 {`Other (${breakdown.other.rowCount} more)`}
               </span>
-              <span className='w-[72px] flex-shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
+              <span className='w-[72px] shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
                 {showTokensOnly
                   ? formatChartCompactNumber(breakdown.other.tokens)
                   : breakdown.other.credits.toLocaleString()}
@@ -286,7 +284,7 @@ export function UsageConsumers({
               */}
               {trailingSlot && (
                 <span
-                  className={cn(trailingSlot, 'flex flex-shrink-0 items-center justify-center')}
+                  className={cn(trailingSlot, 'flex shrink-0 items-center justify-center')}
                   aria-hidden='true'
                 >
                   {onExpandOther && <ChevronDown className={disclosureChevronClass} />}
diff --git a/apps/sim/ee/organization-usage/components/usage-events-view.tsx b/apps/sim/ee/organization-usage/components/usage-events-view.tsx
index d53f203bed0..f15f9efae95 100644
--- a/apps/sim/ee/organization-usage/components/usage-events-view.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-events-view.tsx
@@ -27,16 +27,16 @@ function eventLabel(event: OrganizationUsageEvent): string {
 function UsageEventRow({ event }: { event: OrganizationUsageEvent }) {
   return (
     <div className='flex items-center gap-2.5 rounded-lg p-2 text-left'>
-      <span className='w-[150px] flex-shrink-0 text-[var(--text-muted)] text-caption'>
+      <span className='w-[150px] shrink-0 text-[var(--text-muted)] text-caption'>
         {formatDateTime(new Date(event.createdAt))}
       </span>
       <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>
         {eventLabel(event)}
       </span>
-      <span className='min-w-0 max-w-[180px] flex-shrink truncate text-[var(--text-muted)] text-caption'>
+      <span className='min-w-0 max-w-[180px] shrink truncate text-[var(--text-muted)] text-caption'>
         {event.description}
       </span>
-      <span className='w-[92px] flex-shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
+      <span className='w-[92px] shrink-0 text-right text-[var(--text-muted)] text-caption tabular-nums'>
         {formatApportionedCreditCost(event.credits, event.hasCost)}
       </span>
     </div>
diff --git a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
index 9b8cd104b53..ecdb4acbcd7 100644
--- a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
@@ -409,7 +409,7 @@ export function UsageMonitoring({
               void setState({ tab: value as UsageTab, workspace: null, expanded: null })
             }
           />
-          <div className='relative flex-shrink-0'>
+          <div className='relative shrink-0'>
             {/* ChipCombobox (Radix Popover, non-modal), not ChipSelect (Radix
               DropdownMenu, modal by default) — a modal trigger closing in the
               same tick that opens the Calendar popover below traps it behind
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index 0db76100a28..d81a178fff5 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -84,7 +84,7 @@ function ColorInput({ label, value, onChange, placeholder = '#000000' }: ColorIn
       <div className={cn(CHIP_FIELD_SHELL, !isValidHex && 'border-[var(--text-error)]')}>
         <div
           className={cn(
-            'size-[16px] flex-shrink-0 rounded-sm border border-[var(--border-1)]',
+            'size-[16px] shrink-0 rounded-sm border border-[var(--border-1)]',
             !showColor && 'bg-[var(--surface-3)]'
           )}
           style={showColor ? { backgroundColor: value } : undefined}
diff --git a/apps/sim/ee/workspace-forking/components/fork-activity-panel/fork-activity-panel.tsx b/apps/sim/ee/workspace-forking/components/fork-activity-panel/fork-activity-panel.tsx
index 305c026e154..eb02082ff2c 100644
--- a/apps/sim/ee/workspace-forking/components/fork-activity-panel/fork-activity-panel.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-activity-panel/fork-activity-panel.tsx
@@ -279,7 +279,7 @@ function jobDetails(job: BackgroundWorkItem, report: JobReport) {
     <>
       {report.groups.map((group) => (
         <div key={group.label} className='flex gap-2'>
-          <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>{group.label}</span>
+          <span className='w-[100px] shrink-0 text-[var(--text-muted)]'>{group.label}</span>
           <span className='min-w-0 flex-1 text-[var(--text-primary)]'>
             {group.names.join(', ')}
           </span>
diff --git a/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx b/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx
index 29f5d073344..80d50291557 100644
--- a/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx
@@ -215,7 +215,7 @@ function ExcludedFolderRow({
           </OverflowText>
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx b/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx
index 2cc7f60bda6..88a216c5956 100644
--- a/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx
@@ -143,7 +143,7 @@ function ForkFileFolderRow({
           />
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx b/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx
index 890cb0c78ff..03be8855258 100644
--- a/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx
@@ -75,7 +75,7 @@ export function ResourceKindRow({
           />
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
@@ -171,7 +171,7 @@ export function FileKindRow({
           />
           <ChevronDown
             className={cn(
-              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx b/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
index 6414c39966e..d4309868a56 100644
--- a/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
+++ b/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
@@ -96,7 +96,7 @@ const NEW_TRIGGER_URL_VALUE = '__new_trigger_url__'
  * General). Wide enough to hold a full-length secret key - these are the longest labels the
  * picker shows, and clipping them is what makes two same-prefixed keys indistinguishable.
  */
-const MAPPING_TARGET_TRIGGER_CLASS = 'w-[380px] flex-shrink-0'
+const MAPPING_TARGET_TRIGGER_CLASS = 'w-[380px] shrink-0'
 
 interface DependentBlock {
   targetBlockId: string
@@ -1056,7 +1056,7 @@ export function ForkSyncView({ controller, onDirectionChange }: ForkSyncViewProp
                       {uses > 1 ? `Drop from ${uses} fields` : 'Drop'}
                     </Chip>
                   ) : (
-                    <span className='flex-shrink-0 text-[var(--text-muted)] text-caption'>
+                    <span className='shrink-0 text-[var(--text-muted)] text-caption'>
                       same reference
                     </span>
                   )}
diff --git a/apps/sim/ee/workspace-forking/components/forks.tsx b/apps/sim/ee/workspace-forking/components/forks.tsx
index 7acc581eba9..a34970473cc 100644
--- a/apps/sim/ee/workspace-forking/components/forks.tsx
+++ b/apps/sim/ee/workspace-forking/components/forks.tsx
@@ -75,7 +75,7 @@ function ForkListRow({ name, actions }: ForkListRowProps) {
         label={name}
         className='block min-w-0 truncate text-[var(--text-body)] text-sm'
       />
-      <div className='flex flex-shrink-0 items-center gap-1'>
+      <div className='flex shrink-0 items-center gap-1'>
         <RowActionsMenu label='Fork actions' actions={actions} />
       </div>
     </div>
diff --git a/apps/sim/lib/postcss/hairline-border-width.mjs b/apps/sim/lib/postcss/hairline-border-width.mjs
new file mode 100644
index 00000000000..6d7329371cd
--- /dev/null
+++ b/apps/sim/lib/postcss/hairline-border-width.mjs
@@ -0,0 +1,108 @@
+/**
+ * Routes Tailwind's border-width utilities through `--border-width`.
+ *
+ * v3 set `borderWidth.DEFAULT`, so `border`, `border-x`, `border-t`… and
+ * `divide-*` all resolved through the hairline token (1px, or 0.5px on a 2dppx
+ * display). v4 hardcodes `1px` into those utilities and exposes no theme key
+ * for it.
+ *
+ * Re-declaring the utilities in a trailing `@layer utilities` block does not
+ * work: the copy would sit after everything Tailwind emitted, at the same
+ * specificity, so `.border` would beat `.border-2` and `.border-t-0` — the
+ * opposite of Tailwind's own ordering. `@utility border {…}` does not work
+ * either; Tailwind appends its own declaration inside the same rule and wins.
+ *
+ * Rewriting Tailwind's own declarations in place is the only form that keeps
+ * source order, specificity, and variant coverage exactly as Tailwind emits
+ * them. Runs after `@tailwindcss/postcss`.
+ */
+
+/** Utilities whose 1px width is the hairline, keyed by bare class name. */
+const HAIRLINE_UTILITIES = new Set([
+  'border',
+  'border-x',
+  'border-y',
+  'border-t',
+  'border-r',
+  'border-b',
+  'border-l',
+  'border-s',
+  'border-e',
+  'divide-x',
+  'divide-y',
+])
+
+/**
+ * Only border-width longhands. A looser `/-width$/` would also catch
+ * `outline-width`, `stroke-width`, `column-rule-width` and friends if one ever
+ * shared a rule with a border utility — reachable through `@apply`.
+ */
+const BORDER_WIDTH_PROPERTIES = new Set([
+  'border-width',
+  'border-top-width',
+  'border-right-width',
+  'border-bottom-width',
+  'border-left-width',
+  'border-inline-width',
+  'border-inline-start-width',
+  'border-inline-end-width',
+  'border-block-width',
+  'border-block-start-width',
+  'border-block-end-width',
+])
+
+/**
+ * Bare `1px` only. `\b1px\b` would also match the `1px` inside `0.1px` and
+ * splice the variable into the middle of the number, producing CSS that is
+ * silently invalid rather than failing the build.
+ */
+const ONE_PIXEL = /(?<![\w.])1px\b/g
+
+/**
+ * Every class name a selector references, unescaped. The escape alternative
+ * must come first, or the negated set consumes a lone backslash and the
+ * character it escapes then terminates the match.
+ */
+function classNames(selector) {
+  const names = []
+  for (const match of selector.matchAll(/\.((?:\\.|[^\s.,:>+~()[\]#])+)/g)) {
+    names.push(match[1].replace(/\\(.)/g, '$1'))
+  }
+  return names
+}
+
+/** Strips Tailwind's variant prefixes: `dark:hover:border-t` -> `border-t`. */
+function baseUtility(className) {
+  const separator = className.lastIndexOf(':')
+  const base = separator === -1 ? className : className.slice(separator + 1)
+  return base.endsWith('!') ? base.slice(0, -1) : base
+}
+
+function isHairlineRule(rule) {
+  return rule.selectors.some((selector) =>
+    classNames(selector).some((name) => HAIRLINE_UTILITIES.has(baseUtility(name)))
+  )
+}
+
+const plugin = () => ({
+  postcssPlugin: 'sim-hairline-border-width',
+  OnceExit(root, { result }) {
+    // Third-party stylesheets travel through the same pipeline. Several are
+    // themselves Tailwind output, so a dependency bump could ship a `.border`
+    // rule that has no idea what `--border-width` is.
+    if (result.opts.from?.includes('node_modules')) return
+
+    root.walkRules((rule) => {
+      if (!isHairlineRule(rule)) return
+      rule.walkDecls((decl) => {
+        if (!BORDER_WIDTH_PROPERTIES.has(decl.prop)) return
+        // An arbitrary `border-[2px]` keeps its own value; the divide utilities'
+        // `calc(1px * var(--tw-divide-*-reverse))` form is rewritten in place.
+        decl.value = decl.value.replace(ONE_PIXEL, 'var(--border-width)')
+      })
+    })
+  },
+})
+plugin.postcss = true
+
+export default plugin
diff --git a/apps/sim/lib/postcss/hairline-border-width.test.ts b/apps/sim/lib/postcss/hairline-border-width.test.ts
new file mode 100644
index 00000000000..bba5d0abc38
--- /dev/null
+++ b/apps/sim/lib/postcss/hairline-border-width.test.ts
@@ -0,0 +1,101 @@
+/**
+ * The hairline pass has no other safety net: it rewrites Tailwind's own output,
+ * so a miss shows up as a half-device-pixel line weight on retina — invisible
+ * in CI and easy to miss by eye. These cases pin both directions.
+ *
+ * @vitest-environment node
+ */
+import postcss from 'postcss'
+import { describe, expect, it } from 'vitest'
+import hairline from '@/lib/postcss/hairline-border-width.mjs'
+
+const FROM = '/repo/apps/sim/app/_styles/globals.css'
+
+async function run(css: string, from = FROM): Promise<string> {
+  const result = await postcss([hairline()]).process(css, { from })
+  return result.css
+}
+
+describe('hairline border width', () => {
+  describe('rewrites the utilities that carried borderWidth.DEFAULT in v3', () => {
+    /** Every emitted form, in the shape Tailwind v4 actually produces. */
+    const REWRITTEN: [string, string][] = [
+      ['.border', 'border-width: 1px'],
+      ['.border-x', 'border-inline-width: 1px'],
+      ['.border-y', 'border-block-width: 1px'],
+      ['.border-t', 'border-top-width: 1px'],
+      ['.border-r', 'border-right-width: 1px'],
+      ['.border-b', 'border-bottom-width: 1px'],
+      ['.border-l', 'border-left-width: 1px'],
+      ['.border-s', 'border-inline-start-width: 1px'],
+      ['.border-e', 'border-inline-end-width: 1px'],
+    ]
+
+    it.each(REWRITTEN)('%s', async (selector, decl) => {
+      const out = await run(`${selector} { ${decl} }`)
+      expect(out).toContain('var(--border-width)')
+      expect(out).not.toContain('1px')
+    })
+
+    it('rewrites the divide utilities inside their calc()', async () => {
+      const out = await run(
+        ':where(.divide-y > :not(:last-child)) { border-top-width: calc(1px * var(--tw-divide-y-reverse)) }'
+      )
+      expect(out).toContain('calc(var(--border-width) * var(--tw-divide-y-reverse))')
+    })
+
+    it('rewrites through variants, arbitrary variants and the important marker', async () => {
+      const out = await run(`
+        .sm\\:border { border-width: 1px }
+        .dark\\:hover\\:border-t { border-top-width: 1px }
+        .\\[\\&_tr\\]\\:border-b { border-bottom-width: 1px }
+        .border\\! { border-width: 1px }
+      `)
+      expect(out.match(/var\(--border-width\)/g)).toHaveLength(4)
+      expect(out).not.toContain('1px')
+    })
+  })
+
+  describe('leaves everything else alone', () => {
+    it('keeps an explicit width', async () => {
+      expect(await run('.border-2 { border-width: 2px }')).toContain('2px')
+    })
+
+    it('keeps a zeroed side', async () => {
+      expect(await run('.border-t-0 { border-top-width: 0px }')).toContain('0px')
+    })
+
+    it('keeps an arbitrary 1px, which asked for exactly one pixel', async () => {
+      const out = await run('.border-\\[1px\\] { border-width: 1px }')
+      expect(out).toContain('1px')
+      expect(out).not.toContain('var(--border-width)')
+    })
+
+    it('does not touch a non-border width sharing a border rule', async () => {
+      const out = await run(
+        '.border { border-width: 1px; outline-width: 1px; stroke-width: 1px; column-rule-width: 1px }'
+      )
+      expect(out).toContain('border-width: var(--border-width)')
+      expect(out).toContain('outline-width: 1px')
+      expect(out).toContain('stroke-width: 1px')
+      expect(out).toContain('column-rule-width: 1px')
+    })
+
+    it('does not splice into a sub-pixel value', async () => {
+      const out = await run('.border { border-width: 0.1px }')
+      expect(out).toContain('0.1px')
+      expect(out).not.toContain('var(--border-width)')
+    })
+
+    it('skips third-party stylesheets', async () => {
+      const out = await run('.border { border-width: 1px }', '/repo/node_modules/pkg/styles.css')
+      expect(out).toContain('1px')
+      expect(out).not.toContain('var(--border-width)')
+    })
+
+    it('ignores a hairline class that is not the rule subject', async () => {
+      const out = await run('.foo:has(.border) { border-width: 1px }')
+      expect(out).toContain('var(--border-width)')
+    })
+  })
+})
diff --git a/apps/sim/package.json b/apps/sim/package.json
index 3e356f83054..b7d20522da1 100644
--- a/apps/sim/package.json
+++ b/apps/sim/package.json
@@ -162,7 +162,6 @@
     "busboy": "1.6.0",
     "cheerio": "1.1.2",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "croner": "^9.0.0",
     "cronstrue": "3.3.0",
@@ -237,7 +236,6 @@
     "streamdown": "2.5.0",
     "stripe": "18.5.0",
     "svix": "1.99.1",
-    "tailwindcss-animate": "^1.0.7",
     "tldts": "7.0.30",
     "twilio": "5.9.0",
     "typebox": "1.1.38",
@@ -252,6 +250,7 @@
     "@next/env": "16.3.1",
     "@sim/testing": "workspace:*",
     "@sim/tsconfig": "workspace:*",
+    "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "0.5.19",
     "@testing-library/jest-dom": "^6.6.3",
     "@trigger.dev/build": "4.5.12",
@@ -277,7 +276,8 @@
     "postcss": "^8",
     "postcss-load-config": "6.0.1",
     "react-email": "6.9.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.0"
   }
diff --git a/apps/sim/postcss.config.mjs b/apps/sim/postcss.config.mjs
index 0dc456ad9c9..ef674127bde 100644
--- a/apps/sim/postcss.config.mjs
+++ b/apps/sim/postcss.config.mjs
@@ -1,7 +1,20 @@
+import { fileURLToPath } from 'node:url'
+
+/**
+ * Resolved to an absolute path from this file's own URL. Turbopack loads the
+ * PostCSS config in a worker and resolves plugin ids from a generated chunk
+ * directory, so a project-relative specifier is not found there.
+ */
+const hairlineBorderWidth = fileURLToPath(
+  new URL('./lib/postcss/hairline-border-width.mjs', import.meta.url)
+)
+
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
+    // Must run after Tailwind: it rewrites Tailwind's own border-width output.
+    [hairlineBorderWidth]: {},
   },
 }
 
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
deleted file mode 100644
index a5b0aeb77fd..00000000000
--- a/apps/sim/tailwind.config.ts
+++ /dev/null
@@ -1,334 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-export default {
-  // Nesting-aware dark variant: `dark:` utilities apply inside a `.dark` subtree
-  // UNLESS they sit inside a nested `.light` island. The landing page pins
-  // itself light (a `.light` wrapper) while the visitor's `<html>` may carry
-  // `.dark`; without this exclusion, `dark:` utilities on emcn components (e.g.
-  // the `primary` chip's `dark:bg-white`) would leak through and render
-  // white-on-white. `:where()` keeps specificity equal to base utilities so the
-  // normal (non-island) dark-mode cascade is unchanged.
-  darkMode: ['variant', '&:where(.dark, .dark *):not(:where(.light, .light *))'],
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    /**
-     * `lib/content/mdx.tsx` styles rendered blog/library markdown, so it emits
-     * classes like any component does. Without this glob Tailwind only
-     * generates the ones that happen to appear in a scanned file too, and a
-     * class unique to this directory silently resolves to nothing.
-     */
-    './lib/**/*.{js,ts,jsx,tsx,mdx}',
-    /**
-     * Block definitions and their shared helpers emit classes too — most
-     * importantly `blocks/icon-color.ts`, whose `getTileIconColorClass` returns
-     * the only bare `text-black` candidate in the app. Scanned files spell it
-     * exclusively as `dark:text-black` or `text-black/75`, which compile to
-     * different selectors, so leaving this directory out meant `.text-black`
-     * was never generated at all and every light-background brand tile
-     * inherited the ambient (near-white) color instead.
-     */
-    './blocks/**/*.{js,ts,jsx,tsx}',
-    './ee/**/*.{js,ts,jsx,tsx}',
-    './content/**/*.{js,ts,jsx,tsx}',
-    '../../packages/emcn/src/**/*.{js,ts,jsx,tsx}',
-    '../../packages/workflow-renderer/src/**/*.{js,ts,jsx,tsx}',
-    '!./app/node_modules/**',
-    '!**/node_modules/**',
-    // Tests are not production styling sources. Keeping them out also avoids
-    // Tailwind's watcher trying to stat a stale path while a test is replaced.
-    '!./**/*.test.{js,ts,jsx,tsx,mdx}',
-    '!./**/*.spec.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        season: ['var(--font-season)'],
-        body: [
-          'ui-sans-serif',
-          '-apple-system',
-          'system-ui',
-          'Segoe UI',
-          'Helvetica',
-          'Apple Color Emoji',
-          'Arial',
-          'sans-serif',
-          'Segoe UI Emoji',
-          'Segoe UI Symbol',
-        ],
-        mono: [
-          'var(--font-martian-mono, ui-monospace)',
-          'SFMono-Regular',
-          'Menlo',
-          'Monaco',
-          'Consolas',
-          '"Liberation Mono"',
-          '"Courier New"',
-          'monospace',
-        ],
-      },
-      fontSize: {
-        micro: '10px',
-        xs: '11px',
-        caption: '12px',
-        small: '13px',
-        base: '15px',
-        md: '16px',
-      },
-      spacing: {
-        '4.5': '18px',
-        /**
-         * Hairline scale key. Overriding `spacing` rather than `width`/`height`
-         * keeps every derived scale in agreement — a `w-px` line and the
-         * `-right-px` offset that positions it resolve to the same value, which
-         * a width-only override desynchronizes by half a device pixel.
-         */
-        px: 'var(--border-width)',
-      },
-      borderWidth: {
-        DEFAULT: 'var(--border-width)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        /**
-         * Neutral border colors are plain hex, not the HSL triplets the shadcn
-         * keys below use — `hsl(var(--border))` would be invalid CSS and get
-         * dropped, leaving the utility to fall through to the `*` border-color
-         * rule in globals by accident.
-         */
-        border: 'var(--border)',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        gray: {
-          50: '#fafafa',
-          100: '#f5f5f5',
-          200: '#e5e5e5',
-          300: '#d4d4d4',
-          400: '#a3a3a3',
-          500: '#737373',
-          600: '#525252',
-          700: '#404040',
-          800: '#262626',
-          900: '#171717',
-          950: '#0a0a0a',
-        },
-      },
-      borderRadius: {
-        xs: '2px',
-        sm: 'calc(var(--radius) - 4px)',
-        md: 'calc(var(--radius) - 2px)',
-        lg: 'var(--radius)',
-      },
-      boxShadow: {
-        subtle: 'var(--shadow-subtle)',
-        medium: 'var(--shadow-medium)',
-        overlay: 'var(--shadow-overlay)',
-        kbd: 'var(--shadow-kbd)',
-        'kbd-sm': 'var(--shadow-kbd-sm)',
-        card: 'var(--shadow-card)',
-        ambient: 'var(--shadow-ambient)',
-      },
-      dropShadow: {},
-      maxWidth: {
-        /**
-         * The home/chat reading column. The heading, input, suggested actions,
-         * transcript, and its skeleton must all share one value or the footer
-         * input visibly misaligns with the messages above it — so they read this
-         * key rather than repeating a literal.
-         */
-        chat: '44rem',
-      },
-      transitionProperty: {
-        width: 'width',
-        left: 'left',
-        padding: 'padding',
-      },
-      keyframes: {
-        'caret-blink': {
-          '0%,70%,100%': {
-            opacity: '1',
-          },
-          '20%,50%': {
-            opacity: '0',
-          },
-        },
-        'slide-left': {
-          '0%': {
-            transform: 'translateX(0)',
-          },
-          '100%': {
-            transform: 'translateX(-50%)',
-          },
-        },
-        'slide-right': {
-          '0%': {
-            transform: 'translateX(-50%)',
-          },
-          '100%': {
-            transform: 'translateX(0)',
-          },
-        },
-        /* One period of the running block's hatch (26px horizontal). Shifting by
-           exactly one period is what makes the loop seamless.
-
-           A transform, not `background-position`: shifting the position makes the
-           browser re-rasterize the gradient every frame at a new subpixel offset,
-           so each hard edge antialiases differently frame to frame and the gaps
-           visibly shimmer. A transform rasterizes once and slides the layer. */
-        'running-hatch-scroll': {
-          from: {
-            transform: 'translateX(-26px)',
-          },
-          to: {
-            transform: 'translateX(0)',
-          },
-        },
-        'dash-animation': {
-          from: {
-            strokeDashoffset: '0',
-          },
-          to: {
-            strokeDashoffset: '-24',
-          },
-        },
-        'placeholder-pulse': {
-          '0%, 100%': {
-            opacity: '0.5',
-          },
-          '50%': {
-            opacity: '0.8',
-          },
-        },
-        'ring-pulse': {
-          '0%, 100%': {
-            'box-shadow': '0 0 0 1.5px var(--border-success)',
-          },
-          '50%': {
-            'box-shadow': '0 0 0 4px var(--border-success)',
-          },
-        },
-        'stream-fade-in': {
-          from: { opacity: '0' },
-          to: { opacity: '1' },
-        },
-        'slide-in-right': {
-          from: { transform: 'translateX(40px)' },
-          to: { transform: 'translateX(0)' },
-        },
-        'slide-in-bottom': {
-          from: { opacity: '0', transform: 'translateY(20px)' },
-          to: { opacity: '1', transform: 'translateY(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' },
-        },
-        'hero-stage-fade': {
-          from: { opacity: '0' },
-          to: { opacity: '1' },
-        },
-        'hero-cursor-press': {
-          '0%, 100%': { transform: 'scale(1)' },
-          '45%': { transform: 'scale(0.8)' },
-        },
-        'hero-modal-in': {
-          from: { opacity: '0', transform: 'translateY(10px) scale(0.97)' },
-          to: { opacity: '1', transform: 'translateY(0) scale(1)' },
-        },
-        'hero-kb-content-morph': {
-          from: { opacity: '0' },
-          to: { opacity: '1' },
-        },
-        'hero-file-drop': {
-          from: { opacity: '0', transform: 'translateY(-44px) scale(0.96)' },
-          '60%': { opacity: '1' },
-          to: { opacity: '1', transform: 'translateY(0) scale(1)' },
-        },
-        'hero-node-pop': {
-          from: { opacity: '0', transform: 'scale(0)' },
-          to: { opacity: '1', transform: 'scale(1)' },
-        },
-        'hero-graph-pulse': {
-          '0%, 100%': { transform: 'scale(1)' },
-          '50%': { transform: 'scale(1.22)' },
-        },
-        'hero-edge-draw': {
-          to: { strokeDashoffset: '0' },
-        },
-      },
-      animation: {
-        'caret-blink': 'caret-blink 1.25s ease-out infinite',
-        'slide-left': 'slide-left 80s linear infinite',
-        'slide-right': 'slide-right 80s linear infinite',
-        'running-hatch-scroll': 'running-hatch-scroll 900ms linear infinite',
-        'dash-animation': 'dash-animation 1.5s linear infinite',
-        'placeholder-pulse': 'placeholder-pulse 1.5s ease-in-out infinite',
-        'ring-pulse': 'ring-pulse 1.5s ease-in-out infinite',
-        'stream-fade-in': 'stream-fade-in 300ms ease-out forwards',
-        'stream-fade-in-delayed': 'stream-fade-in 300ms ease-out 1.5s forwards',
-        'slide-in-right': 'slide-in-right 350ms ease-out forwards',
-        'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'collapsible-down': 'collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-        'collapsible-up': 'collapsible-up 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-        'hero-stage-fade': 'hero-stage-fade 420ms cubic-bezier(0.23, 1, 0.32, 1) both',
-        'hero-cursor-press': 'hero-cursor-press 340ms cubic-bezier(0.23, 1, 0.32, 1)',
-        'hero-modal-in': 'hero-modal-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both',
-        'hero-kb-content-morph':
-          'hero-kb-content-morph 420ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards',
-        'hero-file-drop': 'hero-file-drop 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
-        'hero-node-pop': 'hero-node-pop 440ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
-        'hero-edge-draw': 'hero-edge-draw 520ms ease-out forwards',
-      },
-    },
-  },
-  plugins: [
-    require('tailwindcss-animate'),
-    require('@tailwindcss/typography'),
-    require('tailwindcss/plugin')(
-      ({ addVariant }: { addVariant: (name: string, definition: string) => void }) => {
-        addVariant('hover-hover', '@media (hover: hover) and (pointer: fine) { &:hover }')
-      }
-    ),
-  ],
-} satisfies Config
diff --git a/biome.json b/biome.json
index ef7bcbd5a1c..81e02110a68 100644
--- a/biome.json
+++ b/biome.json
@@ -141,6 +141,11 @@
     }
   },
   "overrides": [
+    {
+      "includes": ["apps/sim/app/_styles/tailwind.css"],
+      "linter": { "enabled": false },
+      "formatter": { "enabled": false }
+    },
     {
       "includes": ["packages/**"],
       "linter": {
diff --git a/bun.lock b/bun.lock
index 29be57ebe9c..a80c11c21c1 100644
--- a/bun.lock
+++ b/bun.lock
@@ -77,7 +77,6 @@
         "@sim/workflow-renderer": "workspace:*",
         "@xyflow/react": "12.11.3",
         "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
         "drizzle-orm": "^0.45.2",
         "framer-motion": "^12.5.0",
         "fumadocs-core": "16.8.5",
@@ -90,7 +89,6 @@
         "react-dom": "19.2.4",
         "remark-breaks": "^4.0.0",
         "shiki": "4.3.1",
-        "tailwind-merge": "^3.0.2",
         "zod": "4.3.6",
       },
       "devDependencies": {
@@ -274,7 +272,6 @@
         "busboy": "1.6.0",
         "cheerio": "1.1.2",
         "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
         "croner": "^9.0.0",
         "cronstrue": "3.3.0",
@@ -349,7 +346,6 @@
         "streamdown": "2.5.0",
         "stripe": "18.5.0",
         "svix": "1.99.1",
-        "tailwindcss-animate": "^1.0.7",
         "tldts": "7.0.30",
         "twilio": "5.9.0",
         "typebox": "1.1.38",
@@ -364,6 +360,7 @@
         "@next/env": "16.3.1",
         "@sim/testing": "workspace:*",
         "@sim/tsconfig": "workspace:*",
+        "@tailwindcss/postcss": "^4.3.3",
         "@tailwindcss/typography": "0.5.19",
         "@testing-library/jest-dom": "^6.6.3",
         "@trigger.dev/build": "4.5.12",
@@ -389,7 +386,8 @@
         "postcss": "^8",
         "postcss-load-config": "6.0.1",
         "react-email": "6.9.0",
-        "tailwindcss": "^3.4.1",
+        "tailwindcss": "^4.3.3",
+        "tw-animate-css": "^1.4.0",
         "typescript": "^7.0.2",
         "vitest": "^4.1.0",
       },
@@ -497,7 +495,7 @@
       "dependencies": {
         "@sim/utils": "workspace:*",
         "clsx": "^2.1.1",
-        "tailwind-merge": "^2.6.0",
+        "tailwind-merge": "3.6.0",
       },
       "devDependencies": {
         "@radix-ui/react-avatar": "1.1.10",
@@ -1984,35 +1982,35 @@
 
     "@t3-oss/env-nextjs": ["@t3-oss/env-nextjs@0.13.4", "", { "dependencies": { "@t3-oss/env-core": "0.13.4" }, "peerDependencies": { "typescript": ">=5.0.0", "valibot": "^1.0.0-beta.7 || ^1.0.0", "zod": "^3.24.0 || ^4.0.0-beta.0" }, "optionalPeers": ["typescript", "valibot", "zod"] }, "sha512-6ecXR7SH7zJKVcBODIkB7wV9QLMU23uV8D9ec6P+ULHJ5Ea/YXEHo+Z/2hSYip5i9ptD/qZh8VuOXyldspvTTg=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.3.1", "", { "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.1" } }, "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.1", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.1", "@tailwindcss/oxide-darwin-arm64": "4.3.1", "@tailwindcss/oxide-darwin-x64": "4.3.1", "@tailwindcss/oxide-freebsd-x64": "4.3.1", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1", "@tailwindcss/oxide-linux-arm64-musl": "4.3.1", "@tailwindcss/oxide-linux-x64-gnu": "4.3.1", "@tailwindcss/oxide-linux-x64-musl": "4.3.1", "@tailwindcss/oxide-wasm32-wasi": "4.3.1", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1", "@tailwindcss/oxide-win32-x64-msvc": "4.3.1" } }, "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.1", "", { "os": "android", "cpu": "arm64" }, "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1", "", { "os": "linux", "cpu": "arm" }, "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.1", "", { "os": "linux", "cpu": "x64" }, "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.1", "", { "os": "linux", "cpu": "x64" }, "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.1", "", { "dependencies": { "@emnapi/core": "^1.10.0", "@emnapi/runtime": "^1.10.0", "@emnapi/wasi-threads": "^1.2.1", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "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" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.1", "", { "os": "win32", "cpu": "x64" }, "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.1", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.1", "@tailwindcss/oxide": "4.3.1", "postcss": "8.5.15", "tailwindcss": "4.3.1" } }, "sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.3", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "postcss": "^8.5.16", "tailwindcss": "4.3.3" } }, "sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg=="],
 
     "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
 
@@ -2414,8 +2412,6 @@
 
     "ansis": ["ansis@3.17.0", "", {}, "sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg=="],
 
-    "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
-
     "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
 
     "anynum": ["anynum@1.0.0", "", {}, "sha512-xjR9/zBVnUOP6ztMIIgShjsxui80nQUQH+5xJnvrYLs+90bF25/KJqaAi8mk+B4RDtX1Nspi6fmp4YTEts8SfA=="],
@@ -2424,8 +2420,6 @@
 
     "archiver": ["archiver@8.0.0", "", { "dependencies": { "async": "^3.2.4", "buffer-crc32": "^1.0.0", "is-stream": "^4.0.0", "lazystream": "^1.0.0", "normalize-path": "^3.0.0", "readable-stream": "^4.0.0", "readdir-glob": "^3.0.0", "tar-stream": "^3.0.0", "zip-stream": "^7.0.2" } }, "sha512-fV1orZfsnPn9BaSByR/qE67rJCLJEy2Ox5bq7nJh+jquWaNh6Sfec75kJ2T6PtdGUbPQlrVoSVCEOa5SdiTQ1g=="],
 
-    "arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
-
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
@@ -2570,8 +2564,6 @@
 
     "call-bound": ["call-bound@1.0.4", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
 
-    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
-
     "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
 
     "caniuse-lite": ["caniuse-lite@1.0.30001799", "", {}, "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw=="],
@@ -2878,16 +2870,12 @@
 
     "devtools-protocol": ["devtools-protocol@0.0.1464554", "", {}, "sha512-CAoP3lYfwAGQTaAXYvA6JZR0fjGUb7qec1qf4mToyoH2TZgUFeIqYcjh6f9jNuhHfuZiEdH+PONHYrLhRQX6aw=="],
 
-    "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
-
     "diff": ["diff@8.0.4", "", {}, "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="],
 
     "dingbat-to-unicode": ["dingbat-to-unicode@1.0.1", "", {}, "sha512-98l0sW87ZT58pU4i61wa2OHwxbiYSbuxsCBozaVnYX2iCnr3bLM3fIes1/ej7h1YdOKuKt/MLs706TVnALA65w=="],
 
     "dir-compare": ["dir-compare@4.2.0", "", { "dependencies": { "minimatch": "^3.0.5", "p-limit": "^3.1.0 " } }, "sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ=="],
 
-    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
-
     "dmg-builder": ["dmg-builder@26.15.3", "", { "dependencies": { "app-builder-lib": "26.15.3", "builder-util": "26.15.3", "fs-extra": "^10.1.0", "js-yaml": "^4.1.0" } }, "sha512-O3zJUFUYHJKgzPqioHxfxzBzlSC1eXCSr79gMSBKBP5AgjjpmrydMsMLotEg9fAJF36vdUncb+4ndRNxoPdlSQ=="],
 
     "dockerfile-ast": ["dockerfile-ast@0.7.1", "", { "dependencies": { "vscode-languageserver-textdocument": "^1.0.8", "vscode-languageserver-types": "^3.17.3" } }, "sha512-oX/A4I0EhSkGqrFv0YuvPkBUSYp1XiY8O8zAKc8Djglx8ocz+JfOr8gP0ryRMC2myqvDLagmnZaU9ot1vG2ijw=="],
@@ -2976,7 +2964,7 @@
 
     "engine.io-parser": ["engine.io-parser@5.2.3", "", {}, "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q=="],
 
-    "enhanced-resolve": ["enhanced-resolve@5.21.6", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ=="],
+    "enhanced-resolve": ["enhanced-resolve@5.24.5", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A=="],
 
     "ensure-posix-path": ["ensure-posix-path@1.1.1", "", {}, "sha512-VWU0/zXzVbeJNXvME/5EmLuEj2TauvoaTz6aFYK1Z92JCBlDlZ3Gu0tuGR42kpW1754ywTs+QB0g5TP0oj9Zaw=="],
 
@@ -3190,7 +3178,7 @@
 
     "glob": ["glob@13.0.0", "", { "dependencies": { "minimatch": "^10.1.1", "minipass": "^7.1.2", "path-scurry": "^2.0.0" } }, "sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA=="],
 
-    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "global-agent": ["global-agent@3.0.0", "", { "dependencies": { "boolean": "^3.0.1", "es6-error": "^4.1.1", "matcher": "^3.0.0", "roarr": "^2.15.3", "semver": "^7.3.2", "serialize-error": "^7.0.1" } }, "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q=="],
 
@@ -3352,8 +3340,6 @@
 
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
 
-    "is-core-module": ["is-core-module@2.16.2", "", { "dependencies": { "hasown": "^2.0.3" } }, "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA=="],
-
     "is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
 
     "is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
@@ -3532,8 +3518,6 @@
 
     "linebreak": ["linebreak@1.1.0", "", { "dependencies": { "base64-js": "0.0.8", "unicode-trie": "^2.0.0" } }, "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ=="],
 
-    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
-
     "linkifyjs": ["linkifyjs@4.3.3", "", {}, "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg=="],
 
     "lint-staged": ["lint-staged@16.0.0", "", { "dependencies": { "chalk": "^5.4.1", "commander": "^13.1.0", "debug": "^4.4.0", "lilconfig": "^3.1.3", "listr2": "^8.3.3", "micromatch": "^4.0.8", "nano-spawn": "^1.0.0", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.7.1" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-sUCprePs6/rbx4vKC60Hez6X10HPkpDJaGcy3D1NdwR7g1RcNkWL8q9mJMreOqmHBTs+1sNFp+wOiX9fr+hoOQ=="],
@@ -3788,8 +3772,6 @@
 
     "mysql2": ["mysql2@3.24.2", "", { "dependencies": { "aws-ssl-profiles": "^1.1.2", "generate-function": "^2.3.1", "iconv-lite": "^0.7.3", "long": "^5.3.2", "lru.min": "^1.1.4", "named-placeholders": "^1.1.6", "sql-escaper": "^1.5.1" }, "peerDependencies": { "@types/node": ">= 8" } }, "sha512-l9kXeKGwd6VCbSjmpO/bLWb+YCYpbvE4whte8ec6InXebvCNyEEydyRCnRU+TSHNqRLJ8B+Tk1uWb+vMCJgJzA=="],
 
-    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
-
     "named-placeholders": ["named-placeholders@1.1.6", "", { "dependencies": { "lru.min": "^1.1.0" } }, "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w=="],
 
     "nan": ["nan@2.27.0", "", {}, "sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ=="],
@@ -3858,8 +3840,6 @@
 
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
-    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
-
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
 
     "object-keys": ["object-keys@1.1.1", "", {}, "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="],
@@ -3942,8 +3922,6 @@
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
-    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
-
     "path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
 
     "path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
@@ -3972,8 +3950,6 @@
 
     "pidtree": ["pidtree@0.6.1", "", { "bin": { "pidtree": "bin/pidtree.js" } }, "sha512-e0F9AOF1JMrCfBsyJOwU9lNvQ0WtXTq0j/4jk0BQ5JSI9VAybPXmDpPRw/2FQ3e5d3ZFN1mLh7jW99m/jjaptw=="],
 
-    "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
-
     "pino": ["pino@9.14.0", "", { "dependencies": { "@pinojs/redact": "^0.4.0", "atomic-sleep": "^1.0.0", "on-exit-leak-free": "^2.1.0", "pino-abstract-transport": "^2.0.0", "pino-std-serializers": "^7.0.0", "process-warning": "^5.0.0", "quick-format-unescaped": "^4.0.3", "real-require": "^0.2.0", "safe-stable-stringify": "^2.3.1", "sonic-boom": "^4.0.1", "thread-stream": "^3.0.0" }, "bin": { "pino": "bin.js" } }, "sha512-8OEwKp5juEvb/MjpIc4hjqfgCNysrS94RIOMXYvpYCdm/jglrKEiAYmiumbmGhCvs+IcInsphYDFwqrjr7398w=="],
 
     "pino-abstract-transport": ["pino-abstract-transport@2.0.0", "", { "dependencies": { "split2": "^4.0.0" } }, "sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw=="],
@@ -3982,8 +3958,6 @@
 
     "pino-std-serializers": ["pino-std-serializers@7.1.0", "", {}, "sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw=="],
 
-    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
-
     "pkce-challenge": ["pkce-challenge@5.0.1", "", {}, "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ=="],
 
     "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
@@ -4006,14 +3980,8 @@
 
     "postcss": ["postcss@8.5.26", "", { "dependencies": { "nanoid": "^3.3.17", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ=="],
 
-    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
-
-    "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
-
     "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
 
-    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
-
     "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
@@ -4144,8 +4112,6 @@
 
     "read-binary-file-arch": ["read-binary-file-arch@1.0.6", "", { "dependencies": { "debug": "^4.3.4" }, "bin": { "read-binary-file-arch": "cli.js" } }, "sha512-BNg9EN3DD3GsDXX7Aa8O4p92sryjkmzYYgmgTAc6CA4uGLEDzFfxOxugu21akOxpcXHiEgsYkC6nPsQvLLLmEg=="],
 
-    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
-
     "readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
 
     "readable-web-to-node-stream": ["readable-web-to-node-stream@3.0.4", "", { "dependencies": { "readable-stream": "^4.7.0" } }, "sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw=="],
@@ -4216,8 +4182,6 @@
 
     "resend": ["resend@4.8.0", "", { "dependencies": { "@react-email/render": "1.1.2" } }, "sha512-R8eBOFQDO6dzRTDmaMEdpqrkmgSjPpVXt4nGfWsZdYOet0kqra0xgbvTES6HmCriZEXbmGk3e0DiGIaLFTFSHA=="],
 
-    "resolve": ["resolve@1.22.12", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA=="],
-
     "resolve-alpn": ["resolve-alpn@1.2.1", "", {}, "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="],
 
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
@@ -4452,14 +4416,10 @@
 
     "stylis": ["stylis@4.4.0", "", {}, "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA=="],
 
-    "sucrase": ["sucrase@3.35.1", "", { "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" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
-
     "sumchecker": ["sumchecker@3.0.1", "", { "dependencies": { "debug": "^4.1.0" } }, "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg=="],
 
     "supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
 
-    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
-
     "svix": ["svix@1.99.1", "", { "dependencies": { "standardwebhooks": "1.0.0" } }, "sha512-JfpvbAg5iT5NagDAfOq3e6Ci6NbOMbMm6C3DnfDBB60m2JDK+Z2hXPE9XNAmutb53DCdPoih1V70IbklZnX09A=="],
 
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
@@ -4468,11 +4428,9 @@
 
     "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],
 
-    "tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
-
-    "tailwindcss": ["tailwindcss@3.4.19", "", { "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" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],
+    "tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
 
-    "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
 
     "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
 
@@ -4500,10 +4458,6 @@
 
     "text-decoder": ["text-decoder@1.2.7", "", { "dependencies": { "b4a": "^1.6.4" } }, "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ=="],
 
-    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
-
-    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
-
     "thread-stream": ["thread-stream@3.2.0", "", { "dependencies": { "real-require": "^0.2.0" } }, "sha512-zLBvqpwr4Esa0kRjcrzGU6zL25lePWaCLMx0RQFrmteozIfeNdaMLpG5U7PeHzvlFkAWaRKA9/KVW4F60iB+qw=="],
 
     "tiny-async-pool": ["tiny-async-pool@1.3.0", "", { "dependencies": { "semver": "^5.5.0" } }, "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA=="],
@@ -4552,8 +4506,6 @@
 
     "ts-dedent": ["ts-dedent@2.3.0", "", {}, "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg=="],
 
-    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
-
     "tsconfck": ["tsconfck@3.1.3", "", { "peerDependencies": { "typescript": "^5.0.0" }, "optionalPeers": ["typescript"], "bin": { "tsconfck": "bin/tsconfck.js" } }, "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ=="],
 
     "tsconfig-paths": ["tsconfig-paths@4.2.0", "", { "dependencies": { "json5": "^2.2.2", "minimist": "^1.2.6", "strip-bom": "^3.0.0" } }, "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg=="],
@@ -4564,6 +4516,8 @@
 
     "turbo": ["turbo@2.9.14", "", { "optionalDependencies": { "@turbo/darwin-64": "2.9.14", "@turbo/darwin-arm64": "2.9.14", "@turbo/linux-64": "2.9.14", "@turbo/linux-arm64": "2.9.14", "@turbo/windows-64": "2.9.14", "@turbo/windows-arm64": "2.9.14" }, "bin": { "turbo": "bin/turbo" } }, "sha512-BQqXRr4UoWI3UPFrtznCLykYHxwxWh53iCB57x092jPMjIlW1wnm3N895g5irpiXmnxUhREBB0n6+y8BHhs4nw=="],
 
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
     "tweetnacl": ["tweetnacl@0.14.5", "", {}, "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="],
 
     "twilio": ["twilio@5.9.0", "", { "dependencies": { "axios": "^1.11.0", "dayjs": "^1.11.9", "https-proxy-agent": "^5.0.0", "jsonwebtoken": "^9.0.2", "qs": "^6.9.4", "scmp": "^2.1.0", "xmlbuilder": "^13.0.2" } }, "sha512-Ij+xT9MZZSjP64lsy+x6vYsCCb5m2Db9KffkMXBrN3zWbG3rbkXxl+MZVVzrvpwEdSbQD0vMuin+TTlQ6kR6Xg=="],
@@ -4882,8 +4836,6 @@
 
     "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
 
-    "@fumadocs/tailwind/tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="],
-
     "@google-cloud/storage/google-auth-library": ["google-auth-library@9.15.1", "", { "dependencies": { "base64-js": "^1.3.0", "ecdsa-sig-formatter": "^1.0.11", "gaxios": "^6.1.1", "gcp-metadata": "^6.1.0", "gtoken": "^7.0.0", "jws": "^4.0.0" } }, "sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng=="],
 
     "@grpc/proto-loader/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
@@ -5030,13 +4982,11 @@
 
     "@tailwindcss/node/jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
 
-    "@tailwindcss/node/tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.5", "", { "dependencies": { "@tybys/wasm-util": "^0.10.2" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q=="],
 
@@ -5044,8 +4994,6 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "@tailwindcss/postcss/tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="],
-
     "@tiptap/markdown/marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
 
     "@trigger.dev/core/@opentelemetry/api-logs": ["@opentelemetry/api-logs@0.218.0", "", { "dependencies": { "@opentelemetry/api": "^1.3.0" } }, "sha512-fmEWp5kXlGEc3i/lR698Hz41DfGyN4Tbe4g7L1AxSc7fF8Xeh/FQ9Quqpa9dVA413Q1Ad43QOLzU4JoXgbFPWw=="],
@@ -5192,8 +5140,6 @@
 
     "cacheable-request/mimic-response": ["mimic-response@4.0.0", "", {}, "sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg=="],
 
-    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
     "chrome-launcher/@types/node": ["@types/node@25.9.3", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg=="],
 
     "cli-table3/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
@@ -5232,10 +5178,6 @@
 
     "dmg-builder/fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
 
-    "docs/tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
-
-    "docs/tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="],
-
     "docx/@types/node": ["@types/node@25.9.3", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg=="],
 
     "docx/nanoid": ["nanoid@5.1.16", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-kVrnsrJqMR8+oLJnGEmSWw9BivK5mt7H3FZatVRjrc5wGqFYuBxX1yG7+A7Gi5AefkX6t/oCkizcQgpu0cY1dQ=="],
@@ -5282,8 +5224,6 @@
 
     "express/cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],
 
-    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
     "fetch-blob/web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
 
     "fetch-cookie/set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
@@ -5310,8 +5250,6 @@
 
     "fumadocs-openapi/lucide-react": ["lucide-react@1.23.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw=="],
 
-    "fumadocs-openapi/tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
-
     "fumadocs-ui/@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.4", "@radix-ui/react-compose-refs": "1.1.3", "@radix-ui/react-context": "1.1.4", "@radix-ui/react-id": "1.1.2", "@radix-ui/react-presence": "1.1.6", "@radix-ui/react-primitive": "2.1.6", "@radix-ui/react-use-controllable-state": "1.2.3", "@radix-ui/react-use-layout-effect": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9bT+FvifX1FK2Mj6UEsTdyu0cN3JaA3KdfhaBao+ONrYFy/pyOy3TU1TNw7iOk1o+0hOEq67RojlUUmoFGwxyA=="],
 
     "fumadocs-ui/@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.17", "", { "dependencies": { "@radix-ui/primitive": "1.1.4", "@radix-ui/react-compose-refs": "1.1.3", "@radix-ui/react-context": "1.1.4", "@radix-ui/react-dismissable-layer": "1.1.13", "@radix-ui/react-focus-guards": "1.1.4", "@radix-ui/react-focus-scope": "1.1.10", "@radix-ui/react-id": "1.1.2", "@radix-ui/react-portal": "1.1.12", "@radix-ui/react-presence": "1.1.6", "@radix-ui/react-primitive": "2.1.6", "@radix-ui/react-slot": "1.3.0", "@radix-ui/react-use-controllable-state": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TDTYmpdq8dI2+Xgvgj9AJ8Ghqq+Eph/TRVEdaFQPDItIY+6QSkU7MJMeevw1568Yw/2Ijz8BTphPSP2XejKphw=="],
@@ -5328,8 +5266,6 @@
 
     "fumadocs-ui/lucide-react": ["lucide-react@1.23.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw=="],
 
-    "fumadocs-ui/tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
-
     "gaxios/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
 
     "gaxios/uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
@@ -5438,8 +5374,6 @@
 
     "plist/xmlbuilder": ["xmlbuilder@15.1.1", "", {}, "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg=="],
 
-    "postcss-nested/postcss-selector-parser": ["postcss-selector-parser@6.1.4", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ=="],
-
     "posthog-node/@posthog/core": ["@posthog/core@1.24.4", "", { "dependencies": { "cross-spawn": "^7.0.6" } }, "sha512-S+TolwBHSSJz7WWtgaELQWQqXviSm3uf1e+qorWUts0bZcgPwWzhnmhCUZAhvn0NVpTQHDJ3epv+hHbPLl5dHg=="],
 
     "postject/commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],
@@ -5486,18 +5420,10 @@
 
     "streamdown/marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
 
-    "streamdown/tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
-
     "string-width/strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
 
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
-
-    "tailwindcss/jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
-
-    "tailwindcss/postcss-selector-parser": ["postcss-selector-parser@6.1.4", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ=="],
-
     "tedious/@types/node": ["@types/node@25.9.3", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg=="],
 
     "tedious/iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
diff --git a/packages/emcn/package.json b/packages/emcn/package.json
index 50e4aaf18bb..f641e9c3fcf 100644
--- a/packages/emcn/package.json
+++ b/packages/emcn/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@sim/utils": "workspace:*",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "3.6.0"
   },
   "peerDependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
diff --git a/packages/emcn/src/components/badge/badge.tsx b/packages/emcn/src/components/badge/badge.tsx
index a7dffc6821b..cb0d1c3cd7f 100644
--- a/packages/emcn/src/components/badge/badge.tsx
+++ b/packages/emcn/src/components/badge/badge.tsx
@@ -5,7 +5,7 @@ import { cn } from '../../lib/cn'
 /** Shared base styles for status color badge variants */
 const STATUS_BASE = 'gap-1.5 rounded-md'
 
-const badgeVariants = cva('inline-flex items-center focus:outline-none transition-colors', {
+const badgeVariants = cva('inline-flex items-center focus:outline-hidden transition-colors', {
   variants: {
     variant: {
       default:
diff --git a/packages/emcn/src/components/button-group/button-group.tsx b/packages/emcn/src/components/button-group/button-group.tsx
index d1ead7aaef9..50d3d8c3b3e 100644
--- a/packages/emcn/src/components/button-group/button-group.tsx
+++ b/packages/emcn/src/components/button-group/button-group.tsx
@@ -100,7 +100,7 @@ function ButtonGroup({
 }
 
 const buttonGroupItemVariants = cva(
-  'inline-flex items-center justify-center transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
+  'inline-flex items-center justify-center transition-colors outline-hidden focus:outline-hidden focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
   {
     variants: {
       active: {
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 1893a682403..523aa73ef58 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -21,7 +21,7 @@ import { cn } from '../../lib/cn'
  * @example <Button variant='quiet' size='icon' aria-label='Dismiss'><X className='size-[16px]' /></Button>
  */
 const buttonVariants = cva(
-  'inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
+  'inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-70 outline-hidden focus:outline-hidden focus-visible:outline-hidden rounded-[5px]',
   {
     variants: {
       variant: {
diff --git a/packages/emcn/src/components/checkbox/checkbox.tsx b/packages/emcn/src/components/checkbox/checkbox.tsx
index ba721515e96..9df963bf85e 100644
--- a/packages/emcn/src/components/checkbox/checkbox.tsx
+++ b/packages/emcn/src/components/checkbox/checkbox.tsx
@@ -27,7 +27,7 @@ const checkboxVariants = cva(
     'relative peer flex shrink-0 cursor-pointer items-center justify-center rounded-sm border transition-colors',
     'border-[var(--border-1)] bg-transparent',
     'before:absolute before:inset-[-12px] before:content-[""]',
-    'focus-visible:outline-none',
+    'focus-visible:outline-hidden',
     'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
     'data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)]',
     'data-[state=indeterminate]:border-[var(--text-primary)] data-[state=indeterminate]:bg-[var(--text-primary)]',
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
index e946977e77a..9370d2fa6ea 100644
--- a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
+++ b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
@@ -135,7 +135,7 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(
             data-native-surface-overlay=''
             className={cn(
               POPOVER_ANIMATION_CLASSES,
-              'z-[var(--z-popover)] origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border-1)] bg-[var(--bg)] shadow-sm'
+              'z-[var(--z-popover)] origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border-1)] bg-[var(--bg)] shadow-xs'
             )}
           >
             {props.mode === 'range' ? (
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
index 7932ebee96e..c4d5af5f49d 100644
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
+++ b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
@@ -237,7 +237,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
     }
     const isPlaceholder = !isMultiple && selectedValues.length === 0
 
-    const iconClass = cn('size-[16px] flex-shrink-0', !isInverse && 'text-[var(--text-icon)]')
+    const iconClass = cn('size-[16px] shrink-0', !isInverse && 'text-[var(--text-icon)]')
     /**
      * The chevron glyph stays at its conventional subtle size, but is rendered
      * inside a `size-[16px]` slot so its bounding box matches `leftIcon`'s. The
@@ -249,9 +249,9 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
     /**
      * `flex-1` is always applied so the chevron is pushed flush against the
      * trailing edge whenever the trigger gets stretched — by `fullWidth`, by a
-     * flex parent with `flex-grow`, or by a CSS grid cell with a fixed track.
+     * flex parent with `grow`, or by a CSS grid cell with a fixed track.
      * On intrinsic-width triggers (`inline-flex` with no parent constraint) the
-     * container is sized to max-content, so `flex-grow` has no leftover space to
+     * container is sized to max-content, so `grow` has no leftover space to
      * consume and the layout collapses to the natural `gap-2` between items.
      */
     const labelClass = cn('flex-1 text-sm', !isInverse && 'text-[var(--text-body)]')
@@ -299,7 +299,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
           ) : (
             <span className={cn(overflowTextClipClass, 'flex-1')}>{option.label}</span>
           )}
-          {showSelectedCheck && isSelected ? <Check className='!ml-auto !size-[16px]' /> : null}
+          {showSelectedCheck && isSelected ? <Check className='ml-auto! size-[16px]!' /> : null}
         </DropdownMenuItem>
       )
     }
@@ -364,7 +364,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
               }}
             >
               <DropdownMenuItemLabel label={allLabel} />
-              {selectedValues.length === 0 ? <Check className='!ml-auto !size-[16px]' /> : null}
+              {selectedValues.length === 0 ? <Check className='ml-auto! size-[16px]!' /> : null}
             </DropdownMenuItem>
           )}
           {filteredOptions.map(renderItem)}
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 416d5415604..e1dca7bc55e 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -73,7 +73,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         className
       )}
     >
-      {Icon ? <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' /> : null}
+      {Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null}
       <input
         ref={ref}
         type={type}
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 610528b77a1..ccbf48e6da7 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -314,7 +314,7 @@ const ChipModalHeader = React.forwardRef<HTMLDivElement, ChipModalHeaderProps>(
             variant='ghost'
             onClick={onClose}
             disabled={closeDisabled || dismissDisabled}
-            className='relative size-[14px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+            className='relative size-[14px] shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
           >
             <X className='size-[14px] text-[var(--text-icon)]' />
             <span className='sr-only'>{closeAriaLabel}</span>
@@ -998,7 +998,7 @@ function ChipModalPasswordControl({
             // and "Hide" would leave a focused password on screen.
             onMouseDown={(event) => event.preventDefault()}
             onClick={() => setRevealed((current) => !current)}
-            className='size-6 flex-shrink-0 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+            className='size-6 shrink-0 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
             aria-label={revealed ? 'Hide password' : 'Show password'}
           >
             {revealed ? <EyeOff className='size-[14px]' /> : <Eye className='size-[14px]' />}
@@ -1117,7 +1117,7 @@ function ChipModalFileControl({
         if (isInteractive) emitFiles(event.dataTransfer.files)
       }}
       className={cn(
-        'flex w-full flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--border-1)] border-dashed bg-[var(--surface-5)] px-2 py-2.5 text-center outline-none transition-colors hover-hover:border-[var(--surface-7)] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[var(--surface-4)]',
+        'flex w-full flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--border-1)] border-dashed bg-[var(--surface-5)] px-2 py-2.5 text-center outline-hidden transition-colors hover-hover:border-[var(--surface-7)] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[var(--surface-4)]',
         isDragging && 'border-[var(--surface-7)]'
       )}
     >
diff --git a/packages/emcn/src/components/chip-switch/chip-switch.tsx b/packages/emcn/src/components/chip-switch/chip-switch.tsx
index dcf287749b2..69c5ead90ca 100644
--- a/packages/emcn/src/components/chip-switch/chip-switch.tsx
+++ b/packages/emcn/src/components/chip-switch/chip-switch.tsx
@@ -87,7 +87,7 @@ export function ChipSwitch<T extends string>({
                 : 'text-[var(--text-muted)] hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
             )}
           >
-            {Icon ? <Icon className='size-[14px] flex-shrink-0' /> : null}
+            {Icon ? <Icon className='size-[14px] shrink-0' /> : null}
             {option.label}
           </button>
         )
diff --git a/packages/emcn/src/components/chip-tag/chip-tag.tsx b/packages/emcn/src/components/chip-tag/chip-tag.tsx
index cd64a5405ae..365cf1a4121 100644
--- a/packages/emcn/src/components/chip-tag/chip-tag.tsx
+++ b/packages/emcn/src/components/chip-tag/chip-tag.tsx
@@ -192,7 +192,7 @@ export function ChipTag({
      `--text-icon` gray is tuned for this component's light surfaces and would
      all but disappear on a tone's deep fill. */
   const iconClass = cn(
-    'size-[14px] flex-shrink-0',
+    'size-[14px] shrink-0',
     !invalid && variant !== 'workflow' && variant !== 'brand' && 'text-[var(--text-icon)]'
   )
   const interactive = RightIcon != null && onRightIconClick != null
@@ -213,7 +213,7 @@ export function ChipTag({
             onClick={onRightIconClick}
             disabled={rightIconDisabled}
             aria-label={rightIconLabel}
-            className='relative flex flex-shrink-0 items-center opacity-80 transition-opacity before:absolute before:inset-[-8px] before:content-[""] hover-hover:opacity-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+            className='relative flex shrink-0 items-center opacity-80 transition-opacity before:absolute before:inset-[-8px] before:content-[""] hover-hover:opacity-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50'
           >
             <RightIcon className={iconClass} />
           </button>
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index 979076d5682..b4c5d63c52c 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -39,7 +39,7 @@ export const chipBorderShadowRing =
  * further from the visible text the longer the value. Matches `Input`/`Textarea`.
  */
 export const chipFieldTextClass =
-  'text-[var(--text-body)] text-sm [letter-spacing:inherit] outline-none placeholder:text-[var(--text-muted)]'
+  'text-[var(--text-body)] text-sm [letter-spacing:inherit] outline-hidden placeholder:text-[var(--text-muted)]'
 
 /**
  * Icon↔label gap of the canonical chip-content row — the icon↔label pair inside
@@ -65,7 +65,7 @@ export const chipGeometryUnroundedClass = `h-[30px] items-center ${chipContentGa
  */
 export const chipGeometryClass = `${chipGeometryUnroundedClass} ${chipRadiusClass}`
 /** Chip-content icon (non-inverse): 16px, non-shrinking, `--text-icon`. Inverse chip variants override the color to `currentColor`. */
-export const chipContentIconClass = 'size-[16px] flex-shrink-0 text-[var(--text-icon)]'
+export const chipContentIconClass = 'size-[16px] shrink-0 text-[var(--text-icon)]'
 /** Fade-free single-line fallback for rich chip content. Plain text labels should render through `OverflowText`. */
 export const chipContentLabelClass =
   'min-w-0 overflow-hidden text-clip whitespace-nowrap text-[var(--text-body)] text-sm'
@@ -108,9 +108,9 @@ export const chipDropTargetSurfaceClass = `${chipActiveSurfaceClass} outline out
  * migrating them onto this token is the remaining half of the consolidation.
  */
 export const disclosureChevronClass =
-  'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-[opacity,transform] duration-150'
+  'size-[14px] shrink-0 text-[var(--text-icon)] transition-[opacity,transform] duration-150'
 /** The 16px square a chip-row icon or chevron centers in, so every row's label starts on the same baseline. */
-export const chipIconSlotClass = 'inline-flex size-[16px] flex-shrink-0 items-center justify-center'
+export const chipIconSlotClass = 'inline-flex size-[16px] shrink-0 items-center justify-center'
 /**
  * Force-sizes a PRE-RENDERED icon node (`<svg>`/`<img>`/`<span>` avatar) to the
  * 14px resource-row standard + `--text-icon` color — regardless of the size the
@@ -126,4 +126,4 @@ export const chipIconSlotClass = 'inline-flex size-[16px] flex-shrink-0 items-ce
  * chrome — do not relocate it to a table-specific module.
  */
 export const cellIconNodeClass =
-  'inline-flex flex-shrink-0 items-center text-[var(--text-icon)] [&>svg]:size-[14px] [&>img]:size-[14px] [&>span]:size-[14px]'
+  'inline-flex shrink-0 items-center text-[var(--text-icon)] [&>svg]:size-[14px] [&>img]:size-[14px] [&>span]:size-[14px]'
diff --git a/packages/emcn/src/components/code/code.tsx b/packages/emcn/src/components/code/code.tsx
index ccf82d2e3ee..b044aefea98 100644
--- a/packages/emcn/src/components/code/code.tsx
+++ b/packages/emcn/src/components/code/code.tsx
@@ -470,7 +470,7 @@ const CollapseButton = memo(function CollapseButton({ isCollapsed, onClick }: Co
     >
       <ChevronRight
         className={cn(
-          '!h-[12px] !w-[12px] transition-transform duration-100',
+          'h-[12px]! w-[12px]! transition-transform duration-100',
           !isCollapsed && 'rotate-90'
         )}
       />
@@ -596,15 +596,15 @@ export function getCodeEditorProps(options?: {
       // Base editor classes
       'bg-transparent font-[inherit] text-[inherit]',
       'text-[var(--text-primary)] dark:text-[var(--code-foreground)]',
-      'leading-[21px] outline-none focus:outline-none',
+      'leading-[21px] outline-hidden focus:outline-hidden',
       'min-h-[106px]',
       // Streaming/disabled states
       (isStreaming || disabled) && 'cursor-not-allowed opacity-50'
     ),
     textareaClassName: cn(
       // Reset browser defaults
-      'border-none bg-transparent outline-none resize-none',
-      'focus:outline-none focus:ring-0',
+      'border-none bg-transparent outline-hidden resize-none',
+      'focus:outline-hidden focus:ring-0',
       // Selection styling - light and dark modes
       'selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)]',
       'dark:selection:bg-[var(--selection-dark)] dark:selection:text-white',
@@ -772,7 +772,7 @@ function CodeRow({
       {showGutter && (
         <div
           className={cn(
-            'flex-shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] tabular-nums dark:text-[var(--code-line-number)]',
+            'shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] tabular-nums dark:text-[var(--code-line-number)]',
             density === 'compact' ? 'text-caption leading-5' : 'text-xs leading-[21px]'
           )}
           style={{ width: gutterWidth, marginLeft: leftOffset, ...gutterStyle }}
@@ -782,7 +782,7 @@ function CodeRow({
       )}
       {showCollapseColumn && (
         <div
-          className='ml-1 flex flex-shrink-0 items-start justify-end'
+          className='ml-1 flex shrink-0 items-start justify-end'
           style={{ width: COLLAPSE_COLUMN_WIDTH }}
         >
           {isCollapsible && (
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index c15ce0f8715..24ec26bf3dc 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -25,7 +25,7 @@ import { OverflowText } from '../overflow-text/overflow-text'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
 
 const comboboxVariants = cva(
-  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -762,11 +762,11 @@ const Combobox = memo(
           >
             {option.iconElement
               ? option.iconElement
-              : OptionIcon && <OptionIcon className='size-[14px] flex-shrink-0' />}
+              : OptionIcon && <OptionIcon className='size-[14px] shrink-0' />}
             <OverflowText label={option.label} className='flex-1 text-[var(--text-primary)]' />
             {option.suffixElement}
             {multiSelect && isSelected && (
-              <Check className='ml-2 size-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+              <Check className='ml-2 size-[12px] shrink-0 text-[var(--text-primary)]' />
             )}
           </div>
         )
@@ -813,7 +813,7 @@ const Combobox = memo(
                           overlayContent
                         ) : (
                           <>
-                            {SelectedIcon && <SelectedIcon className='mr-2 size-3 flex-shrink-0' />}
+                            {SelectedIcon && <SelectedIcon className='mr-2 size-3 shrink-0' />}
                             <OverflowText
                               label={selectedOption?.label ?? ''}
                               className='text-[var(--text-primary)]'
@@ -864,7 +864,7 @@ const Combobox = memo(
                     />
                     <ChevronDown
                       className={cn(
-                        'ml-2 size-4 flex-shrink-0 opacity-50 transition-transform',
+                        'ml-2 size-4 shrink-0 opacity-50 transition-transform',
                         open && 'rotate-180'
                       )}
                     />
@@ -917,7 +917,7 @@ const Combobox = memo(
                   <Search className='mr-[7px] ml-[1px] size-[13px] shrink-0 text-[var(--text-muted)]' />
                   <input
                     ref={searchInputRef}
-                    className='w-full bg-transparent text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
+                    className='w-full bg-transparent text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-hidden'
                     placeholder={searchPlaceholder}
                     value={searchQuery}
                     onChange={(e) => updateSearchQuery(e.target.value)}
@@ -945,7 +945,7 @@ const Combobox = memo(
               )}
               <PopoverScrollArea
                 ref={scrollAreaRef}
-                className='!flex-none p-1'
+                className='flex-none! p-1'
                 style={{ maxHeight: `${maxHeight}px` }}
                 onScroll={(event) => {
                   if (hasActiveSearch || !hasMore || isLoadingContinuation || !onLoadMore) return
@@ -1039,16 +1039,14 @@ const Combobox = memo(
                               >
                                 {option.iconElement
                                   ? option.iconElement
-                                  : OptionIcon && (
-                                      <OptionIcon className='size-[14px] flex-shrink-0' />
-                                    )}
+                                  : OptionIcon && <OptionIcon className='size-[14px] shrink-0' />}
                                 <OverflowText
                                   label={option.label}
                                   className='flex-1 text-[var(--text-primary)]'
                                 />
                                 {option.suffixElement}
                                 {multiSelect && isSelected && (
-                                  <Check className='ml-2 size-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                                  <Check className='ml-2 size-[12px] shrink-0 text-[var(--text-primary)]' />
                                 )}
                               </div>
                             )
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
index f5bd88c565e..87d6295f58d 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
@@ -169,7 +169,7 @@ const MENU_MAX_HEIGHT_CLASS = 'max-h-[min(420px,var(--radix-popper-available-hei
  * and gave the menu a wider gutter than its own 8px row padding; two consumers had
  * already overridden it back down to 4px by hand.
  */
-const CONTENT_BASE_CLASSES = `z-[var(--z-popover)] ${MENU_MAX_HEIGHT_CLASS} min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden overscroll-none rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1 text-[var(--text-body)] shadow-sm`
+const CONTENT_BASE_CLASSES = `z-[var(--z-popover)] ${MENU_MAX_HEIGHT_CLASS} min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden overscroll-none rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1 text-[var(--text-body)] shadow-xs`
 
 /**
  * Menu root. Inside a `ModalContent` (Radix modal dialog) the menu is forced
@@ -225,7 +225,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
         /* An open submenu keeps its trigger on the selected surface — including while
            the pointer is on it, so walking into the submenu doesn't drop the trigger
            back to the hover fill. */
-        `flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[state=open]:bg-[var(--surface-active)] data-[state=open]:focus:bg-[var(--surface-active)] ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`,
+        `flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[state=open]:bg-[var(--surface-active)] data-[state=open]:focus:bg-[var(--surface-active)] ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`,
         inset && 'pl-7',
         className
       )}
@@ -298,7 +298,7 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
  * is how the `@`-mention list drifted to its own gap, radius, height and text size.
  * Compose this instead of restating the literals.
  */
-export const dropdownMenuRowClass = `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-pointer select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`
+export const dropdownMenuRowClass = `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-pointer select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
@@ -382,7 +382,7 @@ const DropdownMenuItemAction = React.forwardRef<
       onPointerDown?.(e)
     }}
     className={cn(
-      'flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:text-[var(--text-icon)]',
+      'flex size-[18px] shrink-0 items-center justify-center rounded-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:text-[var(--text-icon)]',
       className
     )}
     {...props}
@@ -397,7 +397,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
+      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
       className
     )}
     checked={checked}
@@ -420,7 +420,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
+      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
       className
     )}
     {...props}
@@ -522,7 +522,7 @@ const DropdownMenuSearchInput = React.forwardRef<
           onKeyDown?.(e)
         }}
         className={cn(
-          'h-full w-full bg-transparent text-[var(--text-body)] text-small outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
+          'h-full w-full bg-transparent text-[var(--text-body)] text-small outline-hidden placeholder:text-[var(--text-muted)] focus:outline-hidden',
           className
         )}
         {...props}
diff --git a/packages/emcn/src/components/info-card/info-card.tsx b/packages/emcn/src/components/info-card/info-card.tsx
index 8187ade7836..11fd521792c 100644
--- a/packages/emcn/src/components/info-card/info-card.tsx
+++ b/packages/emcn/src/components/info-card/info-card.tsx
@@ -85,7 +85,7 @@ export interface InfoCardItemProps extends React.LiHTMLAttributes<HTMLLIElement>
 const InfoCardItem = React.forwardRef<HTMLLIElement, InfoCardItemProps>(
   ({ className, children, icon: Icon = Check, ...props }, ref) => (
     <li ref={ref} className={cn('flex items-center gap-2', className)} {...props}>
-      {Icon ? <Icon className='size-[12px] flex-shrink-0 text-[var(--text-icon)]' /> : null}
+      {Icon ? <Icon className='size-[12px] shrink-0 text-[var(--text-icon)]' /> : null}
       <span className='text-[var(--text-body)] text-sm'>{children}</span>
     </li>
   )
diff --git a/packages/emcn/src/components/info/info.tsx b/packages/emcn/src/components/info/info.tsx
index 7ceb6323244..71b8ad16309 100644
--- a/packages/emcn/src/components/info/info.tsx
+++ b/packages/emcn/src/components/info/info.tsx
@@ -43,7 +43,7 @@ export function Info({ children, className, side = 'top', align = 'start' }: Inf
           type='button'
           aria-label='More information'
           className={cn(
-            'inline-flex size-[14px] items-center justify-center text-[var(--text-icon)] focus-visible:outline-none',
+            'inline-flex size-[14px] items-center justify-center text-[var(--text-icon)] focus-visible:outline-hidden',
             className
           )}
         >
diff --git a/packages/emcn/src/components/input/input.tsx b/packages/emcn/src/components/input/input.tsx
index ffb1c728e2a..fe0a4c1806a 100644
--- a/packages/emcn/src/components/input/input.tsx
+++ b/packages/emcn/src/components/input/input.tsx
@@ -29,7 +29,7 @@ import { cn } from '../../lib/cn'
  * longer the value. Keep this in step with `Textarea`.
  */
 const INPUT_CLASS =
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50 scroll-pr-1'
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50 scroll-pr-1'
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx
index 7e4f99c83ce..fff9331f040 100644
--- a/packages/emcn/src/components/modal/modal.tsx
+++ b/packages/emcn/src/components/modal/modal.tsx
@@ -679,7 +679,7 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
           <Button
             variant='ghost'
             disabled={dismissDisabled}
-            className='relative size-[16px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+            className='relative size-[16px] shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
           >
             <X className='size-[16px]' />
             <span className='sr-only'>Close</span>
diff --git a/packages/emcn/src/components/popover/popover.tsx b/packages/emcn/src/components/popover/popover.tsx
index 8c549184f3b..529d2f57d06 100644
--- a/packages/emcn/src/components/popover/popover.tsx
+++ b/packages/emcn/src/components/popover/popover.tsx
@@ -609,7 +609,7 @@ const PopoverContent = React.forwardRef<
         {...restProps}
         data-native-surface-overlay=''
         className={cn(
-          'z-[var(--z-popover)] flex flex-col outline-none',
+          'z-[var(--z-popover)] flex flex-col outline-hidden',
           showArrow ? 'overflow-visible' : 'overflow-auto',
           STYLES.colorScheme[colorScheme].content,
           STYLES.content,
@@ -797,7 +797,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
           STYLES.colorScheme[colorScheme].text,
           STYLES.size[size].item,
           getItemStateClasses(colorScheme, !!isActive),
-          suppressHover && 'hover-hover:!bg-transparent',
+          suppressHover && 'hover-hover:bg-transparent!',
           disabled && 'pointer-events-none cursor-not-allowed opacity-50',
           className
         )}
@@ -993,7 +993,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
             STYLES.colorScheme[colorScheme].text,
             STYLES.size[size].item,
             getItemStateClasses(colorScheme, isActive || isHoverOpen),
-            suppressHover && 'hover-hover:!bg-transparent',
+            suppressHover && 'hover-hover:bg-transparent!',
             className
           )}
           role='menuitem'
@@ -1096,7 +1096,7 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
               STYLES.colorScheme[colorScheme].text,
               STYLES.size[size].item,
               getItemStateClasses(colorScheme, !!folderTitleActive),
-              'peer-hover:!bg-transparent'
+              'peer-hover:bg-transparent!'
             )}
             role='button'
             onClick={(e) => {
@@ -1168,7 +1168,7 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
         <input
           ref={inputRef}
           className={cn(
-            'w-full bg-transparent focus:outline-none',
+            'w-full bg-transparent focus:outline-hidden',
             STYLES.colorScheme[colorScheme].searchInput,
             size === 'sm' ? 'text-xs' : 'text-caption'
           )}
diff --git a/packages/emcn/src/components/secret-reveal/secret-reveal.tsx b/packages/emcn/src/components/secret-reveal/secret-reveal.tsx
index a26eb0e2eda..fe9032032d0 100644
--- a/packages/emcn/src/components/secret-reveal/secret-reveal.tsx
+++ b/packages/emcn/src/components/secret-reveal/secret-reveal.tsx
@@ -60,7 +60,7 @@ export function SecretReveal({ value, className, redacted = false }: SecretRevea
         {isHidden ? REDACTED_DOTS : value}
       </code>
       {!isHidden && (
-        <Button variant='ghost' size='icon' className='flex-shrink-0' onClick={handleCopy}>
+        <Button variant='ghost' size='icon' className='shrink-0' onClick={handleCopy}>
           {copied ? <Check className='size-[14px]' /> : <Duplicate className='size-[14px]' />}
           <span className='sr-only'>Copy to clipboard</span>
         </Button>
diff --git a/packages/emcn/src/components/slider/slider.tsx b/packages/emcn/src/components/slider/slider.tsx
index c9435557284..7dd386a0599 100644
--- a/packages/emcn/src/components/slider/slider.tsx
+++ b/packages/emcn/src/components/slider/slider.tsx
@@ -30,7 +30,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
+      <SliderPrimitive.Thumb className='relative block size-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-xs transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
     </SliderPrimitive.Root>
   )
 )
diff --git a/packages/emcn/src/components/switch/switch.tsx b/packages/emcn/src/components/switch/switch.tsx
index 2e0e6fd3d8b..1d5b0c8be9c 100644
--- a/packages/emcn/src/components/switch/switch.tsx
+++ b/packages/emcn/src/components/switch/switch.tsx
@@ -16,13 +16,13 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
         className
       )}
       {...props}
       ref={ref}
     >
-      <SwitchPrimitives.Thumb className='pointer-events-none block size-4 rounded-full bg-[var(--surface-2)] shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5' />
+      <SwitchPrimitives.Thumb className='pointer-events-none block size-4 rounded-full bg-[var(--surface-2)] shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5' />
     </SwitchPrimitives.Root>
   ))
 )
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx
index 2cb12802028..056f4125262 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx
@@ -93,9 +93,9 @@ const TAB_SHAPE: Record<TabStripVariant, string> = {
  */
 const TAB_ACTIVE: Record<TabStripVariant, string> = {
   attached:
-    'hover-hover:!border-[var(--border)] hover-hover:!bg-[var(--bg)] hover-hover:!text-[var(--text-primary)] hover-hover:!brightness-100 hover-hover:!opacity-100 border-[var(--border)] bg-[var(--bg)] text-[var(--text-primary)] transition-none',
+    'hover-hover:border-[var(--border)]! hover-hover:bg-[var(--bg)]! hover-hover:text-[var(--text-primary)]! hover-hover:brightness-100! hover-hover:opacity-100! border-[var(--border)] bg-[var(--bg)] text-[var(--text-primary)] transition-none',
   floating:
-    'hover-hover:!bg-[var(--surface-active)] hover-hover:!text-[var(--text-primary)] bg-[var(--surface-active)] text-[var(--text-primary)]',
+    'hover-hover:bg-[var(--surface-active)]! hover-hover:text-[var(--text-primary)]! bg-[var(--surface-active)] text-[var(--text-primary)]',
 }
 
 /**
diff --git a/packages/emcn/src/components/tag-input/tag-input.tsx b/packages/emcn/src/components/tag-input/tag-input.tsx
index c46e0b8f197..d898d32f375 100644
--- a/packages/emcn/src/components/tag-input/tag-input.tsx
+++ b/packages/emcn/src/components/tag-input/tag-input.tsx
@@ -66,9 +66,9 @@ const tagInputVariants = cva(
     variants: {
       variant: {
         default:
-          'items-center rounded-sm py-1.5 focus-within:outline-none dark:bg-[var(--surface-5)]',
+          'items-center rounded-sm py-1.5 focus-within:outline-hidden dark:bg-[var(--surface-5)]',
         block:
-          'min-h-[112px] content-start items-start rounded-lg py-2 focus-within:outline-none dark:bg-[var(--surface-4)]',
+          'min-h-[112px] content-start items-start rounded-lg py-2 focus-within:outline-hidden dark:bg-[var(--surface-4)]',
       },
     },
     defaultVariants: {
@@ -455,7 +455,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
               placeholder={hasItems ? placeholderWithTags : placeholder}
               size={hasItems ? placeholderWithTags?.length || 10 : placeholder?.length || 12}
               className={cn(
-                'appearance-none border-none bg-transparent align-middle font-sans outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
+                'appearance-none border-none bg-transparent align-middle font-sans outline-hidden placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
                 inputValue.trim()
                   ? 'absolute top-0 left-0 h-full w-full p-0 text-inherit text-sm leading-5'
                   : 'h-5 w-auto min-w-0 p-0 text-[var(--text-body)] text-sm leading-5',
@@ -482,7 +482,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                   inputRef.current?.focus()
                 }
               }}
-              className='relative flex flex-shrink-0 items-center opacity-80 transition-opacity before:absolute before:inset-[-10px] before:content-[""] hover-hover:opacity-100 focus:outline-none'
+              className='relative flex shrink-0 items-center opacity-80 transition-opacity before:absolute before:inset-[-10px] before:content-[""] hover-hover:opacity-100 focus:outline-hidden'
               disabled={disabled}
               aria-label='Add tag'
             >
diff --git a/packages/emcn/src/components/textarea/textarea.tsx b/packages/emcn/src/components/textarea/textarea.tsx
index 7d2525be242..d1cb2b59309 100644
--- a/packages/emcn/src/components/textarea/textarea.tsx
+++ b/packages/emcn/src/components/textarea/textarea.tsx
@@ -4,7 +4,7 @@ import { cn } from '../../lib/cn'
 
 /** `[letter-spacing:inherit]` — see the note on `INPUT_CLASS`; keep the two in step. */
 const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/packages/emcn/src/components/time-picker/time-picker.tsx b/packages/emcn/src/components/time-picker/time-picker.tsx
index 857e78f2ba8..009f2815beb 100644
--- a/packages/emcn/src/components/time-picker/time-picker.tsx
+++ b/packages/emcn/src/components/time-picker/time-picker.tsx
@@ -36,7 +36,7 @@ import { Popover, PopoverAnchor, PopoverContent } from '../popover/popover'
  * Matches the input and combobox styling patterns.
  */
 const timePickerVariants = cva(
-  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
   {
     variants: {
       variant: {
@@ -240,7 +240,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               </span>
               <ChevronDown
                 className={cn(
-                  'ml-2 size-[14px] flex-shrink-0 opacity-50 transition-transform',
+                  'ml-2 size-[14px] shrink-0 opacity-50 transition-transform',
                   open && 'rotate-180'
                 )}
               />
@@ -256,7 +256,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
             <div className='flex items-center gap-1.5'>
               <input
                 ref={hourInputRef}
-                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)]'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-sans text-[var(--text-primary)] text-small outline-hidden transition-colors placeholder:text-[var(--text-muted)]'
                 value={hour}
                 onChange={handleHourChange}
                 onBlur={handleHourBlur}
@@ -268,7 +268,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               />
               <span className='text-[var(--text-muted)] text-small'>:</span>
               <input
-                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)]'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-sans text-[var(--text-primary)] text-small outline-hidden transition-colors placeholder:text-[var(--text-muted)]'
                 value={minute}
                 onChange={handleMinuteChange}
                 onBlur={handleMinuteBlur}
diff --git a/packages/emcn/src/components/toast/toast.tsx b/packages/emcn/src/components/toast/toast.tsx
index f58c9b655bf..f5a92f56e57 100644
--- a/packages/emcn/src/components/toast/toast.tsx
+++ b/packages/emcn/src/components/toast/toast.tsx
@@ -424,7 +424,7 @@ function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: T
               reduceMotion={reduceMotion}
             />
           </div>
-          <div className='flex h-5 flex-shrink-0 items-center'>
+          <div className='flex h-5 shrink-0 items-center'>
             <Button
               variant='quiet'
               onClick={dismiss}
diff --git a/packages/emcn/src/components/tooltip/tooltip-styles.ts b/packages/emcn/src/components/tooltip/tooltip-styles.ts
index 66f9d4f1638..53060bd5608 100644
--- a/packages/emcn/src/components/tooltip/tooltip-styles.ts
+++ b/packages/emcn/src/components/tooltip/tooltip-styles.ts
@@ -3,4 +3,4 @@ export const TOOLTIP_MAX_WIDTH_PX = 256
 
 /** Canonical platform tooltip chrome, without positioning or content padding. */
 export const TOOLTIP_SURFACE_CLASS =
-  'w-fit max-w-[min(16rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-caption shadow-sm'
+  'w-fit max-w-[min(16rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-caption shadow-xs'
diff --git a/packages/emcn/src/lib/cn.test.ts b/packages/emcn/src/lib/cn.test.ts
new file mode 100644
index 00000000000..7507ea397f4
--- /dev/null
+++ b/packages/emcn/src/lib/cn.test.ts
@@ -0,0 +1,102 @@
+/**
+ * `cn` merges every class string in the product, and the only thing standing
+ * between a tailwind-merge bump and a silent restyle is the class-group
+ * extension it is configured with. These cases pin the behaviour that config
+ * exists for.
+ *
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { cn } from './cn'
+
+describe('cn', () => {
+  describe("Sim's font-size class group", () => {
+    /**
+     * The whole reason `cn.ts` extends the `font-size` group: without it the
+     * merger reads `text-small` as a colour, so it does not conflict with
+     * `text-sm` and both survive — leaving CSS source order to pick the winner
+     * instead of the caller's last argument.
+     */
+    it.each([
+      ['text-sm text-small', 'text-small'],
+      ['text-small text-sm', 'text-sm'],
+      ['text-micro text-caption', 'text-caption'],
+      ['text-caption text-micro', 'text-micro'],
+      ['text-base text-md', 'text-md'],
+      ['text-md text-base', 'text-base'],
+      ['text-small text-md text-micro', 'text-micro'],
+    ])('%s -> %s', (input, expected) => {
+      expect(cn(input)).toBe(expected)
+    })
+
+    it('keeps a font size and a text colour together', () => {
+      expect(cn('text-small text-[var(--text-body)]')).toBe('text-small text-[var(--text-body)]')
+    })
+
+    it('conflicts an arbitrary size with a named one', () => {
+      expect(cn('text-[13px] text-small')).toBe('text-small')
+    })
+
+    it('resolves the custom sizes per variant, not across them', () => {
+      expect(cn('hover:text-small hover:text-md')).toBe('hover:text-md')
+      expect(cn('text-small hover:text-md')).toBe('text-small hover:text-md')
+    })
+  })
+
+  describe('stock conflict resolution', () => {
+    it.each([
+      ['p-2 p-4', 'p-4'],
+      ['px-2 p-4', 'p-4'],
+      ['border border-2', 'border-2'],
+      ['rounded-sm rounded-lg', 'rounded-lg'],
+      ['bg-red-500 bg-[var(--surface-2)]', 'bg-[var(--surface-2)]'],
+    ])('%s -> %s', (input, expected) => {
+      expect(cn(input)).toBe(expected)
+    })
+
+    it('keeps non-conflicting utilities in order', () => {
+      expect(cn('flex items-center gap-2')).toBe('flex items-center gap-2')
+    })
+  })
+
+  describe('v4 syntax', () => {
+    /**
+     * An important utility does not conflict with its plain counterpart — they
+     * are separate groups, so both survive. tailwind-merge behaves the same way
+     * (`p-2 !p-4` -> `p-2 !p-4`), so this is parity, not a `cn` quirk.
+     */
+    it('does not conflict an important utility with its plain counterpart', () => {
+      expect(cn('p-2 p-4!')).toBe('p-2 p-4!')
+      expect(cn('p-2! p-4')).toBe('p-2! p-4')
+    })
+
+    it('still resolves two important utilities against each other', () => {
+      expect(cn('p-2! p-4!')).toBe('p-4!')
+    })
+
+    it('scopes conflicts to the variant chain', () => {
+      expect(cn('hover:border hover:border-2')).toBe('hover:border-2')
+      expect(cn('border hover:border-2')).toBe('border hover:border-2')
+    })
+
+    it("resolves within Sim's hover-hover custom variant", () => {
+      expect(cn('hover-hover:bg-red-500 hover-hover:bg-blue-500')).toBe('hover-hover:bg-blue-500')
+    })
+
+    it('handles arbitrary variants', () => {
+      expect(cn('[&_svg]:size-3 [&_svg]:size-4')).toBe('[&_svg]:size-4')
+    })
+  })
+
+  describe('clsx-style inputs', () => {
+    it('accepts conditionals, arrays and objects', () => {
+      expect(cn('p-2', false && 'p-4', undefined, null)).toBe('p-2')
+      expect(cn(['flex', 'p-2'], { 'p-4': true, hidden: false })).toBe('flex p-4')
+    })
+
+    it('returns an empty string for no usable input', () => {
+      expect(cn()).toBe('')
+      expect(cn(false, null, undefined, '')).toBe('')
+    })
+  })
+})
diff --git a/packages/emcn/src/lib/cn.ts b/packages/emcn/src/lib/cn.ts
index 5102be6f19f..44b68c24039 100644
--- a/packages/emcn/src/lib/cn.ts
+++ b/packages/emcn/src/lib/cn.ts
@@ -1,6 +1,16 @@
 import { type ClassValue, clsx } from 'clsx'
 import { extendTailwindMerge } from 'tailwind-merge'
 
+/**
+ * v3 of tailwind-merge, matching the app's Tailwind v4 utility surface. v2
+ * encodes Tailwind v3's smaller set and would stop resolving conflicts for
+ * anything v4 added or renamed.
+ *
+ * The `font-size` extension teaches the merger that Sim's own type scale keys
+ * are font sizes, not colours — without it `text-small` and `text-sm` do not
+ * conflict, so a component that sets one while a consumer passes the other
+ * emits both and CSS source order decides instead of the caller.
+ */
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
@@ -9,9 +19,7 @@ const twMerge = extendTailwindMerge({
   },
 })
 
-/**
- * Combines class names using clsx and tailwind-merge
- */
+/** Combines class names and resolves Tailwind conflicts, last argument winning. */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
diff --git a/packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx b/packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx
index d9271dbe847..88aee947fd9 100644
--- a/packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx
+++ b/packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx
@@ -67,7 +67,7 @@ describe('OverflowSpan code preview', () => {
     })
     const preview = document.querySelector('[data-code-hover-card]')
     expect(preview).toHaveTextContent('line 20')
-    expect(preview).toHaveClass('w-fit', 'max-w-[min(16rem,calc(100vw-2rem))]', 'shadow-sm')
+    expect(preview).toHaveClass('w-fit', 'max-w-[min(16rem,calc(100vw-2rem))]', 'shadow-xs')
     expect(preview).toHaveStyle({ maxWidth: 'min(480px, calc(100vw - 2rem))' })
     expect(preview?.querySelector('.overflow-x-hidden')).toHaveClass('overflow-y-auto')
     expect(preview?.querySelector('.tabular-nums')).toHaveTextContent('1')
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index 43f45cca2c0..d47a556d391 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1017,7 +1017,7 @@ export function NoteBlockView({
                     }
                   }}
                   className={cn(
-                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-[17px] text-current caret-current outline-none focus-visible:outline-none',
+                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-[17px] text-current caret-current outline-hidden focus-visible:outline-hidden',
                     colorOption.selectionClassName,
                     !isEnabled && 'opacity-50'
                   )}
@@ -1029,7 +1029,7 @@ export function NoteBlockView({
                   onPointerDown={(event) => recordEditPointerStart(event, 'title')}
                   onClick={(event) => startEditing(event, 'title')}
                   className={cn(
-                    'min-w-0 flex-1 cursor-text rounded-sm bg-transparent text-left outline-offset-1 focus-visible:outline-2 focus-visible:outline-current/50',
+                    'min-w-0 flex-1 cursor-text rounded-sm bg-transparent text-left',
                     !isEnabled && 'opacity-50'
                   )}
                 >
@@ -1066,14 +1066,14 @@ export function NoteBlockView({
                           'absolute inset-0 size-[14px] transition-[opacity,scale,filter] duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
                           isExpanded
                             ? 'scale-[0.25] opacity-0 blur-[4px]'
-                            : 'scale-100 opacity-100 blur-0'
+                            : 'scale-100 opacity-100 blur-none'
                         )}
                       />
                       <ChevronsDownUp
                         className={cn(
                           'absolute inset-0 size-[14px] transition-[opacity,scale,filter] duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
                           isExpanded
-                            ? 'scale-100 opacity-100 blur-0'
+                            ? 'scale-100 opacity-100 blur-none'
                             : 'scale-[0.25] opacity-0 blur-[4px]'
                         )}
                       />
@@ -1180,7 +1180,7 @@ export function NoteBlockView({
                     aria-label='Edit note content'
                     onPointerDown={(event) => recordEditPointerStart(event, 'content')}
                     onClick={(event) => startEditing(event, 'content')}
-                    className='absolute inset-0 z-20 w-full cursor-text rounded-sm bg-transparent outline-offset-1 focus-visible:outline-2 focus-visible:outline-current/50'
+                    className='absolute inset-0 z-20 w-full cursor-text rounded-sm bg-transparent'
                   />
                 )}
                 <div
diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
index 3d40d5b54c0..b520473d126 100644
--- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
+++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
@@ -107,11 +107,11 @@ const getCursorHandleSize = (side: WorkflowBorderCursorHandle['edgeSide']) =>
 /** Invisible React Flow handles aligned with the painted connection knobs. */
 const getHandleClasses = (position: 'left' | 'right') => {
   const baseClasses =
-    '!z-20 !h-[38px] !w-[14px] !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+    'z-20! h-[38px]! w-[14px]! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
 
   const positionClasses = {
-    left: '!left-[-7px]',
-    right: '!right-[-7px]',
+    left: 'left-[-7px]!',
+    right: 'right-[-7px]!',
   }
 
   return cn(baseClasses, positionClasses[position])
@@ -130,10 +130,10 @@ function SubflowStateIndicator({ label, Icon }: SubflowStateIndicatorProps) {
         <ChipTag
           variant='workflow'
           tone='neutral'
-          className='size-5 flex-shrink-0 justify-center p-0'
+          className='size-5 shrink-0 justify-center p-0'
           aria-label={label}
         >
-          <Icon className='size-[12px] flex-shrink-0' />
+          <Icon className='size-[12px] shrink-0' />
         </ChipTag>
       </Tooltip.Trigger>
       <Tooltip.Content side='top'>
@@ -291,7 +291,7 @@ export function SubflowStartView({
           type='source'
           position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
           id={cursorHandleId}
-          className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+          className='z-50! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
           style={{
             right: 'auto',
             bottom: 'auto',
@@ -585,7 +585,7 @@ export function SubflowNodeView({
             type='source'
             position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
             id={cursorSourceHandle.handleId}
-            className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            className='z-50! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
             style={{
               right: 'auto',
               bottom: 'auto',
@@ -624,19 +624,19 @@ export function SubflowNodeView({
               className={cn('text-[17px]', !isEnabled && 'text-[var(--text-muted)]')}
             />
           </div>
-          <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
+          <div className='relative z-10 flex shrink-0 items-center gap-1'>
             {!isEnabled && <SubflowStateIndicator label='Disabled' Icon={Ban} />}
             {isLocked && <SubflowStateIndicator label='Locked' Icon={Lock} />}
             <ChipTag
               variant={blockTypeAccent.variant}
               tone={blockTypeAccent.tone}
               className={cn(
-                'flex-shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+                'shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
                 !isEnabled && 'opacity-50'
               )}
               data-subflow-type-tag={data.kind}
             >
-              <BlockIcon className='size-[14px] flex-shrink-0' />
+              <BlockIcon className='size-[14px] shrink-0' />
               {blockTypeLabel}
             </ChipTag>
           </div>
diff --git a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
index a1b901b6aa1..e99df95945b 100644
--- a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
@@ -82,7 +82,7 @@ export function SubBlockRowView({
   if (variant === 'meta' && Icon) {
     return (
       <div className='flex min-w-0 items-center gap-2'>
-        <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
         <OverflowSpan
           value={displayValue ?? '-'}
           className={cn(
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index efbe1ce00d2..e49322fbdfa 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -204,7 +204,7 @@ export function WorkflowTypeIcon({
     <ChipTag
       variant={typeAccent.variant}
       tone={typeAccent.tone}
-      className={cn('size-[16px] flex-shrink-0 justify-center p-0', className)}
+      className={cn('size-[16px] shrink-0 justify-center p-0', className)}
       data-workflow-type-icon={type}
       {...props}
     >
@@ -238,7 +238,7 @@ export function WorkflowTypeTag({
 }: WorkflowTypeTagProps) {
   const typeAccent = getWorkflowTypeAccent(type)
   const sharedClassName = cn(
-    'flex-shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+    'shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
     !isEnabled && 'opacity-50'
   )
   /*
@@ -260,7 +260,7 @@ export function WorkflowTypeTag({
         data-workflow-type-accent={type}
         data-workflow-brand-tag=''
       >
-        <Icon className='size-[14px] flex-shrink-0' />
+        <Icon className='size-[14px] shrink-0' />
         {label}
       </ChipTag>
     )
@@ -273,7 +273,7 @@ export function WorkflowTypeTag({
       className={sharedClassName}
       data-workflow-type-accent={type}
     >
-      <Icon className='size-[14px] flex-shrink-0' />
+      <Icon className='size-[14px] shrink-0' />
       {label}
     </ChipTag>
   )
@@ -291,10 +291,10 @@ function BlockStateIndicator({ label, Icon }: BlockStateIndicatorProps) {
         <ChipTag
           variant='workflow'
           tone='neutral'
-          className='size-5 flex-shrink-0 justify-center p-0'
+          className='size-5 shrink-0 justify-center p-0'
           aria-label={label}
         >
-          <Icon className='size-[12px] flex-shrink-0' />
+          <Icon className='size-[12px] shrink-0' />
         </ChipTag>
       </Tooltip.Trigger>
       <Tooltip.Content side='top'>
@@ -316,13 +316,13 @@ const clampTabLength = (length: number) =>
  */
 const getInvisibleHandleClasses = (side: 'left' | 'right' | 'top' | 'bottom') => {
   const offsetClasses = {
-    right: '!right-[-7px]',
-    left: '!left-[-7px]',
-    top: '!top-[-7px]',
-    bottom: '!bottom-[-7px]',
+    right: 'right-[-7px]!',
+    left: 'left-[-7px]!',
+    top: 'top-[-7px]!',
+    bottom: 'bottom-[-7px]!',
   } as const
   return cn(
-    '!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0',
+    'z-20! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!',
     offsetClasses[side]
   )
 }
@@ -883,7 +883,7 @@ export function WorkflowBlockView({
             type='source'
             position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
             id={cursorSourceHandle.handleId}
-            className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            className='z-50! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
             style={{
               right: 'auto',
               bottom: 'auto',
@@ -904,7 +904,7 @@ export function WorkflowBlockView({
           />
         )}
         {isPending && (
-          <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-amber-500 px-2 py-0.5 text-white text-xs'>
+          <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 rounded-t-md bg-amber-500 px-2 py-0.5 text-white text-xs'>
             Next Step
           </div>
         )}
@@ -956,7 +956,7 @@ export function WorkflowBlockView({
               )}
             />
           </div>
-          <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
+          <div className='relative z-10 flex shrink-0 items-center gap-1'>
             {!isEnabled && <BlockStateIndicator label='Disabled' Icon={Ban} />}
             {isLocked && <BlockStateIndicator label='Locked' Icon={Lock} />}
             <WorkflowTypeTag
@@ -1254,7 +1254,7 @@ export function WorkflowBlockView({
             type='source'
             position={ERROR_SOURCE_HANDLE_POSITION}
             id='error'
-            className='!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            className='z-20! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
             style={getErrorSourceHandleStyle()}
             data-nodeid={id}
             data-handleid='error'