diff --git a/web/package.json b/web/package.json
index 6c9e6c25..ca7d7bbe 100644
--- a/web/package.json
+++ b/web/package.json
@@ -77,6 +77,8 @@
     "test:e2e:parallel": "PLAYWRIGHT_PARALLEL=true playwright test",
     "test:e2e:parallel:headed": "PLAYWRIGHT_PARALLEL=true playwright test --headed",
     "test:e2e:parallel:workers": "PLAYWRIGHT_PARALLEL=true PLAYWRIGHT_WORKERS=4 playwright test",
+    "test:e2e:fast": "./scripts/test-fast.sh",
+    "test:e2e:perf": "playwright test --config=playwright.config.performance.ts",
     "prepare": "husky"
   },
   "pnpm": {
@@ -123,6 +125,7 @@
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.54.1",
     "@prettier/plugin-oxc": "^0.0.4",
+    "@tailwindcss/postcss": "^4.1.11",
     "@testing-library/dom": "^10.4.1",
     "@types/compression": "^1.8.1",
     "@types/express": "^5.0.3",
@@ -146,10 +149,11 @@
     "lint-staged": "^16.1.2",
     "node-fetch": "^3.3.2",
     "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
     "prettier": "^3.6.2",
     "puppeteer": "^24.15.0",
     "supertest": "^7.1.4",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
     "uuid": "^11.1.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 310b16ba..99b58a55 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -108,6 +108,9 @@ importers:
       '@prettier/plugin-oxc':
         specifier: ^0.0.4
         version: 0.0.4
+      '@tailwindcss/postcss':
+        specifier: ^4.1.11
+        version: 4.1.11
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
@@ -177,6 +180,9 @@ importers:
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
+      postcss-cli:
+        specifier: ^11.0.1
+        version: 11.0.1(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
@@ -187,8 +193,8 @@ importers:
         specifier: ^7.1.4
         version: 7.1.4
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.1.11
+        version: 4.1.11
       tsx:
         specifier: ^4.20.3
         version: 4.20.3
@@ -200,7 +206,7 @@ importers:
         version: 11.1.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+        version: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
       ws-mock:
         specifier: ^0.1.0
         version: 0.1.0
@@ -511,6 +517,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
   '@istanbuljs/schema@0.1.3':
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
@@ -817,6 +827,94 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.11':
+    resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
+
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -1100,9 +1198,6 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -1110,9 +1205,6 @@ packages:
   append-field@1.0.0:
     resolution: {integrity: sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1264,10 +1356,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -1307,6 +1395,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
   chromium-bidi@7.2.0:
     resolution: {integrity: sha512-gREyhyBstermK+0RbcJLbFhcQctg92AGgDe/h/taMJEOLRdtSswBAO9KmvltFSQWgM2LrwWu5SIuEUbdm3JsyQ==}
     peerDependencies:
@@ -1367,10 +1459,6 @@ packages:
     resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
     engines: {node: '>=20'}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
@@ -1441,11 +1529,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -1524,6 +1607,10 @@ packages:
     resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==}
     engines: {node: '>= 0.6.0'}
 
+  dependency-graph@1.0.0:
+    resolution: {integrity: sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==}
+    engines: {node: '>=4'}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -1532,22 +1619,20 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+
   devtools-protocol@0.0.1464554:
     resolution: {integrity: sha512-CAoP3lYfwAGQTaAXYvA6JZR0fjGUb7qec1qf4mToyoH2TZgUFeIqYcjh6f9jNuhHfuZiEdH+PONHYrLhRQX6aw==}
 
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dns-packet@5.6.1:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
@@ -1594,6 +1679,10 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  enhanced-resolve@5.18.2:
+    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
+    engines: {node: '>=10.13.0'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -1776,6 +1865,10 @@ packages:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
 
+  fs-extra@11.3.0:
+    resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
+    engines: {node: '>=14.14'}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1824,10 +1917,6 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
@@ -1840,6 +1929,9 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   happy-dom@18.0.1:
     resolution: {integrity: sha512-qn+rKOW7KWpVTtgIUi6RVmTBZJSe2k0Db0vh1f7CWrWclkkc7/Q+FrOfkZIb2eiErLyqu5AXEzE7XthO9JVxRA==}
     engines: {node: '>=20.0.0'}
@@ -1961,10 +2053,6 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -2051,8 +2139,8 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
     hasBin: true
 
   js-tokens@4.0.0:
@@ -2071,6 +2159,9 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
   jsonwebtoken@9.0.2:
     resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
     engines: {node: '>=12', npm: '>=6'}
@@ -2113,6 +2204,70 @@ packages:
     resolution: {integrity: sha512-+CCssgnrWKx9aI3OeZwroa/ckG4JICxvIFnSiOUyl2Uv+UTI+xIw0FfFrWS7cQFpoePpr9o8csss7KzsTzNL8Q==}
     engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -2282,6 +2437,10 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -2294,6 +2453,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
@@ -2315,9 +2479,6 @@ packages:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nan@2.23.0:
     resolution: {integrity: sha512-1UxuyYGdoQHcGg87Lkqm3FzefucTa0NAiOcuRsDmysep3c1LVCRK2krrUDafMWtjSG04htvAmvg96+SDknOmgQ==}
 
@@ -2383,10 +2544,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -2483,9 +2640,6 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
   path-scurry@1.11.1:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
@@ -2528,10 +2682,6 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
-
   playwright-core@1.54.1:
     resolution: {integrity: sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==}
     engines: {node: '>=18'}
@@ -2542,39 +2692,33 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
+  postcss-cli@11.0.1:
+    resolution: {integrity: sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==}
+    engines: {node: '>=18'}
+    hasBin: true
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
+  postcss-load-config@5.1.0:
+    resolution: {integrity: sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==}
+    engines: {node: '>= 18'}
     peerDependencies:
+      jiti: '>=1.21.0'
       postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
+      tsx: ^4.8.1
     peerDependenciesMeta:
+      jiti:
+        optional: true
       postcss:
         optional: true
-      ts-node:
+      tsx:
         optional: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
+  postcss-reporter@7.1.0:
+    resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==}
+    engines: {node: '>=10'}
     peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+      postcss: ^8.1.0
 
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@@ -2597,6 +2741,10 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  pretty-hrtime@1.0.3:
+    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
+    engines: {node: '>= 0.8'}
+
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -2682,11 +2830,6 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
   restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -2795,6 +2938,10 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
   slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
@@ -2904,11 +3051,6 @@ packages:
   style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   superagent@10.2.3:
     resolution: {integrity: sha512-y/hkYGeXAj7wUMjxRbB21g/l6aAEituGXM9Rwl4o20+SX3e8YOSV6BxFXl+dL3Uk0mjSL3kCbNkwURm8/gEDig==}
     engines: {node: '>=14.18.0'}
@@ -2925,14 +3067,12 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
 
   tar-fs@3.1.0:
     resolution: {integrity: sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==}
@@ -2940,6 +3080,10 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   test-exclude@7.0.1:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
@@ -2947,12 +3091,8 @@ packages:
   text-decoder@1.2.3:
     resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+  thenby@1.3.4:
+    resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
 
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
@@ -2995,9 +3135,6 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3039,6 +3176,10 @@ packages:
   undici-types@7.8.0:
     resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
 
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -3223,6 +3364,10 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
   yaml@2.8.0:
     resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
     engines: {node: '>= 14.6'}
@@ -3531,6 +3676,10 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
   '@istanbuljs/schema@0.1.3': {}
 
   '@jridgewell/gen-mapping@0.3.12':
@@ -3797,6 +3946,78 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@tailwindcss/node@4.1.11':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.11':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/postcss@4.1.11':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      postcss: 8.5.6
+      tailwindcss: 4.1.11
+
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -4022,7 +4243,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+      vitest: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -4034,13 +4255,13 @@ snapshots:
       chai: 5.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0))':
+  '@vitest/mocker@3.2.4(vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+      vite: 7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -4071,7 +4292,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+      vitest: 3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -4195,8 +4416,6 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -4204,8 +4423,6 @@ snapshots:
 
   append-field@1.0.0: {}
 
-  arg@5.0.2: {}
-
   argparse@2.0.1: {}
 
   aria-query@5.3.0:
@@ -4355,8 +4572,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
   caniuse-lite@1.0.30001731: {}
@@ -4405,6 +4620,8 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  chownr@3.0.0: {}
+
   chromium-bidi@7.2.0(devtools-protocol@0.0.1464554):
     dependencies:
       devtools-protocol: 0.0.1464554
@@ -4468,8 +4685,6 @@ snapshots:
 
   commander@14.0.0: {}
 
-  commander@4.1.1: {}
-
   commander@9.5.0: {}
 
   component-emitter@1.3.1: {}
@@ -4547,8 +4762,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  cssesc@3.0.0: {}
-
   data-uri-to-buffer@4.0.1: {}
 
   data-uri-to-buffer@6.0.2: {}
@@ -4595,10 +4808,14 @@ snapshots:
 
   dependency-graph@0.11.0: {}
 
+  dependency-graph@1.0.0: {}
+
   dequal@2.0.3: {}
 
   destroy@1.2.0: {}
 
+  detect-libc@2.0.4: {}
+
   devtools-protocol@0.0.1464554: {}
 
   dezalgo@1.0.4:
@@ -4606,14 +4823,10 @@ snapshots:
       asap: 2.0.6
       wrappy: 1.0.2
 
-  didyoumean@1.2.2: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   dns-packet@5.6.1:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
@@ -4652,6 +4865,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  enhanced-resolve@5.18.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.2
+
   env-paths@2.2.1: {}
 
   environment@1.1.0: {}
@@ -4881,6 +5099,12 @@ snapshots:
 
   fresh@2.0.0: {}
 
+  fs-extra@11.3.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
   fsevents@2.3.2:
     optional: true
 
@@ -4933,10 +5157,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.1
@@ -4957,6 +5177,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   happy-dom@18.0.1:
     dependencies:
       '@types/node': 20.19.9
@@ -5089,10 +5311,6 @@ snapshots:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-docker@2.2.1: {}
 
   is-extglob@2.1.1: {}
@@ -5172,7 +5390,7 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.7: {}
+  jiti@2.5.1: {}
 
   js-tokens@4.0.0: {}
 
@@ -5186,6 +5404,12 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   jsonwebtoken@9.0.2:
     dependencies:
       jws: 3.2.2
@@ -5279,6 +5503,51 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -5434,6 +5703,10 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
   mitt@3.0.1: {}
 
   mkdirp@0.5.6:
@@ -5442,6 +5715,8 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
+  mkdirp@3.0.1: {}
+
   monaco-editor@0.52.2: {}
 
   mrmime@2.0.1: {}
@@ -5465,12 +5740,6 @@ snapshots:
       dns-packet: 5.6.1
       thunky: 1.1.0
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nan@2.23.0: {}
 
   nano-spawn@1.0.2: {}
@@ -5513,8 +5782,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   on-finished@2.4.1:
@@ -5624,8 +5891,6 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-parse@1.0.7: {}
-
   path-scurry@1.11.1:
     dependencies:
       lru-cache: 10.4.3
@@ -5651,8 +5916,6 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pirates@4.0.7: {}
-
   playwright-core@1.54.1: {}
 
   playwright@1.54.1:
@@ -5661,34 +5924,38 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  postcss-import@15.1.0(postcss@8.5.6):
+  postcss-cli@11.0.1(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3):
     dependencies:
+      chokidar: 3.6.0
+      dependency-graph: 1.0.0
+      fs-extra: 11.3.0
+      picocolors: 1.1.1
       postcss: 8.5.6
-      postcss-value-parser: 4.2.0
+      postcss-load-config: 5.1.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)
+      postcss-reporter: 7.1.0(postcss@8.5.6)
+      pretty-hrtime: 1.0.3
       read-cache: 1.0.0
-      resolve: 1.22.10
+      slash: 5.1.0
+      tinyglobby: 0.2.14
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - jiti
+      - tsx
 
-  postcss-js@4.0.1(postcss@8.5.6):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.6
-
-  postcss-load-config@4.0.2(postcss@8.5.6):
+  postcss-load-config@5.1.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3):
     dependencies:
       lilconfig: 3.1.3
       yaml: 2.8.0
     optionalDependencies:
+      jiti: 2.5.1
       postcss: 8.5.6
+      tsx: 4.20.3
 
-  postcss-nested@6.2.0(postcss@8.5.6):
+  postcss-reporter@7.1.0(postcss@8.5.6):
     dependencies:
+      picocolors: 1.1.1
       postcss: 8.5.6
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+      thenby: 1.3.4
 
   postcss-value-parser@4.2.0: {}
 
@@ -5710,6 +5977,8 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  pretty-hrtime@1.0.3: {}
+
   progress@2.0.3: {}
 
   proxy-addr@2.0.7:
@@ -5821,12 +6090,6 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
@@ -5978,6 +6241,8 @@ snapshots:
 
   slash@3.0.0: {}
 
+  slash@5.1.0: {}
+
   slice-ansi@4.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -6087,16 +6352,6 @@ snapshots:
 
   style-mod@4.1.2: {}
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      ts-interface-checker: 0.1.13
-
   superagent@10.2.3:
     dependencies:
       component-emitter: 1.3.1
@@ -6126,34 +6381,9 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-preserve-symlinks-flag@1.0.0: {}
+  tailwindcss@4.1.11: {}
 
-  tailwindcss@3.4.17:
-    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.3
-      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.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)
-      postcss-nested: 6.2.0(postcss@8.5.6)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tapable@2.2.2: {}
 
   tar-fs@3.1.0:
     dependencies:
@@ -6171,6 +6401,15 @@ snapshots:
       fast-fifo: 1.3.2
       streamx: 2.22.1
 
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
   test-exclude@7.0.1:
     dependencies:
       '@istanbuljs/schema': 0.1.3
@@ -6181,13 +6420,7 @@ snapshots:
     dependencies:
       b4a: 1.6.7
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
+  thenby@1.3.4: {}
 
   thunky@1.1.0: {}
 
@@ -6216,8 +6449,6 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tslib@2.8.1: {}
 
   tsscmp@1.0.6: {}
@@ -6252,6 +6483,8 @@ snapshots:
 
   undici-types@7.8.0: {}
 
+  universalify@2.0.1: {}
+
   unpipe@1.0.0: {}
 
   update-browserslist-db@1.1.3(browserslist@4.25.1):
@@ -6266,13 +6499,13 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vite-node@3.2.4(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0):
+  vite-node@3.2.4(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+      vite: 7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -6287,7 +6520,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0):
+  vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.8
       fdir: 6.4.6(picomatch@4.0.3)
@@ -6298,15 +6531,16 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.1.0
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.5.1
+      lightningcss: 1.30.1
       tsx: 4.20.3
       yaml: 2.8.0
 
-  vitest@3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0):
+  vitest@3.2.4(@types/node@24.1.0)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0))
+      '@vitest/mocker': 3.2.4(vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -6324,8 +6558,8 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.0.6(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
-      vite-node: 3.2.4(@types/node@24.1.0)(jiti@1.21.7)(tsx@4.20.3)(yaml@2.8.0)
+      vite: 7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
+      vite-node: 3.2.4(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.1.0
@@ -6416,6 +6650,8 @@ snapshots:
 
   y18n@5.0.8: {}
 
+  yallist@5.0.0: {}
+
   yaml@2.8.0: {}
 
   yargs-parser@13.1.2:
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 96bb01e7..1b7b8945 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
\ No newline at end of file
diff --git a/web/scripts/build-ci.js b/web/scripts/build-ci.js
index d501b2b1..8d3cbd99 100644
--- a/web/scripts/build-ci.js
+++ b/web/scripts/build-ci.js
@@ -14,7 +14,7 @@ execSync('node scripts/copy-assets.js', { stdio: 'inherit' });
 
 // Build CSS
 console.log('Building CSS...');
-execSync('pnpm exec tailwindcss -i ./src/client/styles.css -o ./public/bundle/styles.css --minify', { stdio: 'inherit' });
+execSync('pnpm exec postcss ./src/client/styles.css -o ./public/bundle/styles.css', { stdio: 'inherit' });
 
 // Bundle client JavaScript
 console.log('Bundling client JavaScript...');
diff --git a/web/scripts/build.js b/web/scripts/build.js
index 73fa5008..40676fbb 100644
--- a/web/scripts/build.js
+++ b/web/scripts/build.js
@@ -22,7 +22,7 @@ async function build() {
 
   // Build CSS
   console.log('Building CSS...');
-  execSync('pnpm exec tailwindcss -i ./src/client/styles.css -o ./public/bundle/styles.css --minify', { stdio: 'inherit' });
+  execSync('pnpm exec postcss ./src/client/styles.css -o ./public/bundle/styles.css', { stdio: 'inherit' });
 
   // Bundle client JavaScript
   console.log('Bundling client JavaScript...');
diff --git a/web/scripts/dev.js b/web/scripts/dev.js
index 5d9dd662..9ca1d100 100644
--- a/web/scripts/dev.js
+++ b/web/scripts/dev.js
@@ -109,12 +109,12 @@ for (let i = 0; i < allArgs.length; i++) {
 console.log('Initial build...');
 require('child_process').execSync('node scripts/ensure-dirs.js', { stdio: 'inherit' });
 require('child_process').execSync('node scripts/copy-assets.js', { stdio: 'inherit' });
-require('child_process').execSync('pnpm exec tailwindcss -i ./src/client/styles.css -o ./public/bundle/styles.css', { stdio: 'inherit' });
+require('child_process').execSync('pnpm exec postcss ./src/client/styles.css -o ./public/bundle/styles.css', { stdio: 'inherit' });
 
 // Build the command parts
 const commands = [
   // Watch CSS
-  ['pnpm', ['exec', 'tailwindcss', '-i', './src/client/styles.css', '-o', './public/bundle/styles.css', '--watch']],
+  ['pnpm', ['exec', 'postcss', './src/client/styles.css', '-o', './public/bundle/styles.css', '--watch']],
   // Watch assets
   ['pnpm', ['exec', 'chokidar', 'src/client/assets/**/*', '-c', 'node scripts/copy-assets.js']],
 ];
diff --git a/web/src/client/app.ts b/web/src/client/app.ts
index c478aa31..0cc58adf 100644
--- a/web/src/client/app.ts
+++ b/web/src/client/app.ts
@@ -1757,7 +1757,7 @@ export class VibeTunnelApp extends LitElement {
               <div
                 class="fixed inset-0 sm:hidden transition-all ${
                   this.isInSidebarDismissMode
-                    ? 'bg-bg bg-opacity-50 backdrop-blur-sm'
+                    ? 'bg-bg/50 backdrop-blur-sm'
                     : 'bg-transparent pointer-events-none'
                 }"
                 style="z-index: ${Z_INDEX.MOBILE_OVERLAY}; transition-duration: ${TRANSITIONS.MOBILE_SLIDE}ms;"
diff --git a/web/src/client/components/auth-login.ts b/web/src/client/components/auth-login.ts
index 711fc2e5..b78af96c 100644
--- a/web/src/client/components/auth-login.ts
+++ b/web/src/client/components/auth-login.ts
@@ -162,7 +162,7 @@ export class AuthLogin extends LitElement {
       <div class="auth-container">
         <!-- Settings button in top right corner -->
         <button
-          class="absolute top-4 right-4 p-2 text-muted hover:text-primary transition-colors"
+          class="absolute top-4 right-4 p-2 text-text-muted hover:text-primary transition-colors"
           @click=${this.handleOpenSettings}
           title="Settings"
         >
@@ -187,7 +187,7 @@ export class AuthLogin extends LitElement {
             this.error
               ? html`
                 <div
-                  class="bg-status-error text-base px-3 py-1.5 rounded mb-3 font-mono text-xs sm:text-sm"
+                  class="bg-status-error text-bg px-3 py-1.5 rounded mb-3 font-mono text-xs sm:text-sm"
                   data-testid="error-message"
                 >
                   ${this.error}
@@ -195,7 +195,7 @@ export class AuthLogin extends LitElement {
                     @click=${() => {
                       this.error = '';
                     }}
-                    class="ml-2 text-base hover:text-primary"
+                    class="ml-2 text-bg hover:text-primary"
                     data-testid="error-close"
                   >
                     ✕
@@ -208,14 +208,14 @@ export class AuthLogin extends LitElement {
             this.success
               ? html`
                 <div
-                  class="bg-status-success text-base px-3 py-1.5 rounded mb-3 font-mono text-xs sm:text-sm"
+                  class="bg-status-success text-bg px-3 py-1.5 rounded mb-3 font-mono text-xs sm:text-sm"
                 >
                   ${this.success}
                   <button
                     @click=${() => {
                       this.success = '';
                     }}
-                    class="ml-2 text-base hover:text-primary"
+                    class="ml-2 text-bg hover:text-primary"
                   >
                     ✕
                   </button>
@@ -248,10 +248,10 @@ export class AuthLogin extends LitElement {
                             `
                             : html`
                               <div
-                                class="w-full h-full bg-secondary flex items-center justify-center"
+                                class="w-full h-full bg-bg-secondary flex items-center justify-center"
                               >
                                 <svg
-                                  class="w-12 h-12 sm:w-14 sm:h-14 text-muted"
+                                  class="w-12 h-12 sm:w-14 sm:h-14 text-text-muted"
                                   fill="currentColor"
                                   viewBox="0 0 20 20"
                                 >
@@ -300,7 +300,7 @@ export class AuthLogin extends LitElement {
                   <div class="ssh-key-item p-6 sm:p-8">
                     <div class="flex flex-col items-center mb-4 sm:mb-6">
                       <div
-                        class="w-16 h-16 sm:w-20 sm:h-20 rounded-full mb-2 sm:mb-3 overflow-hidden border-2 border-base"
+                        class="w-16 h-16 sm:w-20 sm:h-20 rounded-full mb-2 sm:mb-3 overflow-hidden border-2 border-border"
                       >
                         ${
                           this.userAvatar
@@ -315,10 +315,10 @@ export class AuthLogin extends LitElement {
                             `
                             : html`
                               <div
-                                class="w-full h-full bg-secondary flex items-center justify-center"
+                                class="w-full h-full bg-bg-secondary flex items-center justify-center"
                               >
                                 <svg
-                                  class="w-8 h-8 sm:w-10 sm:h-10 text-muted"
+                                  class="w-8 h-8 sm:w-10 sm:h-10 text-text-muted"
                                   fill="currentColor"
                                   viewBox="0 0 20 20"
                                 >
@@ -335,7 +335,7 @@ export class AuthLogin extends LitElement {
                             : 'Please authenticate to continue'
                         }
                       </p>
-                      <p class="text-muted text-xs mt-1 sm:mt-2">
+                      <p class="text-text-muted text-xs mt-1 sm:mt-2">
                         SSH key authentication required
                       </p>
                     </div>
@@ -374,11 +374,11 @@ export class AuthLogin extends LitElement {
                     </div>
 
                     <div class="space-y-3">
-                      <div class="bg-base border border-base rounded p-3">
-                        <p class="text-muted text-xs mb-2">
+                      <div class="bg-bg border border-border rounded p-3">
+                        <p class="text-text-muted text-xs mb-2">
                           Generate SSH keys for browser-based authentication
                         </p>
-                        <p class="text-muted text-xs">
+                        <p class="text-text-muted text-xs">
                           💡 SSH keys work in both browser and terminal
                         </p>
                       </div>
diff --git a/web/src/client/components/auth-quick-keys.ts b/web/src/client/components/auth-quick-keys.ts
index 00e5b1ce..c9ed4685 100644
--- a/web/src/client/components/auth-quick-keys.ts
+++ b/web/src/client/components/auth-quick-keys.ts
@@ -33,13 +33,13 @@ export class AuthQuickKeys extends LitElement {
 
   render() {
     return html`
-      <div class="quick-keys-bar bg-secondary border-t border-base p-2">
+      <div class="quick-keys-bar bg-bg-secondary border-t border-border p-2">
         <div class="flex gap-1 overflow-x-auto scrollbar-hide">
           ${QUICK_KEYS.map(
             ({ key, label }) => html`
               <button
                 type="button"
-                class="quick-key-btn px-3 py-1.5 bg-tertiary text-primary text-xs font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap flex-shrink-0"
+                class="quick-key-btn px-3 py-1.5 bg-bg-tertiary text-primary text-xs font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap flex-shrink-0"
                 @click=${() => this.handleKeyPress(key)}
               >
                 ${label}
diff --git a/web/src/client/components/file-browser.ts b/web/src/client/components/file-browser.ts
index fab02374..be8ba4cb 100644
--- a/web/src/client/components/file-browser.ts
+++ b/web/src/client/components/file-browser.ts
@@ -405,7 +405,7 @@ export class FileBrowser extends LitElement {
   private renderPreview() {
     if (this.previewLoading) {
       return html`
-        <div class="flex items-center justify-center h-full text-muted">
+        <div class="flex items-center justify-center h-full text-text-muted">
           Loading preview...
         </div>
       `;
@@ -417,7 +417,7 @@ export class FileBrowser extends LitElement {
 
     if (!this.preview) {
       return html`
-        <div class="flex flex-col items-center justify-center h-full text-muted">
+        <div class="flex flex-col items-center justify-center h-full text-text-muted">
           ${UIIcons.preview}
           <div>Select a file to preview</div>
         </div>
@@ -451,11 +451,11 @@ export class FileBrowser extends LitElement {
 
       case 'binary':
         return html`
-          <div class="flex flex-col items-center justify-center h-full text-muted">
+          <div class="flex flex-col items-center justify-center h-full text-text-muted">
             ${UIIcons.binary}
             <div class="text-lg mb-2">Binary File</div>
             <div class="text-sm">${this.preview.humanSize || `${this.preview.size} bytes`}</div>
-            <div class="text-sm text-muted mt-2">
+            <div class="text-sm text-text-muted mt-2">
               ${this.preview.mimeType || 'Unknown type'}
             </div>
           </div>
@@ -467,7 +467,7 @@ export class FileBrowser extends LitElement {
     // For new files (added or untracked), we might not have a diff but we have diffContent
     if (!this.diffContent && (!this.diff || !this.diff.diff)) {
       return html`
-        <div class="flex items-center justify-center h-full text-muted">
+        <div class="flex items-center justify-center h-full text-text-muted">
           No changes in this file
         </div>
       `;
@@ -496,7 +496,7 @@ export class FileBrowser extends LitElement {
     return html`
       <div class="overflow-auto h-full p-4 font-mono text-xs">
         ${lines.map((line) => {
-          let className = 'text-muted';
+          let className = 'text-text-muted';
           if (line.startsWith('+')) className = 'text-status-success bg-status-success/10';
           else if (line.startsWith('-')) className = 'text-status-error bg-status-error/10';
           else if (line.startsWith('@@')) className = 'text-status-info font-semibold';
@@ -518,7 +518,7 @@ export class FileBrowser extends LitElement {
         ${
           this.isMobile && this.mobileView === 'preview'
             ? html`
-              <div class="absolute top-1/2 left-2 -translate-y-1/2 text-muted opacity-50">
+              <div class="absolute top-1/2 left-2 -translate-y-1/2 text-text-muted opacity-50">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     stroke-linecap="round"
@@ -537,12 +537,12 @@ export class FileBrowser extends LitElement {
         >
           <!-- Compact Header (like session-view) -->
           <div
-            class="flex items-center justify-between px-3 py-2 border-b border-border/50 text-sm min-w-0 bg-secondary"
+            class="flex items-center justify-between px-3 py-2 border-b border-border/50 text-sm min-w-0 bg-bg-secondary"
             style="padding-top: max(0.5rem, env(safe-area-inset-top)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right));"
           >
             <div class="flex items-center gap-3 min-w-0 flex-1">
               <button
-                class="text-muted hover:text-primary font-mono text-xs px-2 py-1 flex-shrink-0 transition-colors flex items-center gap-1"
+                class="text-text-muted hover:text-primary font-mono text-xs px-2 py-1 flex-shrink-0 transition-colors flex items-center gap-1"
                 @click=${this.handleCancel}
               >
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -585,7 +585,7 @@ export class FileBrowser extends LitElement {
                 ${
                   this.gitStatus?.branch
                     ? html`
-                      <span class="text-muted text-xs flex items-center gap-1 font-mono flex-shrink-0">
+                      <span class="text-text-muted text-xs flex items-center gap-1 font-mono flex-shrink-0">
                         ${UIIcons.git} ${this.gitStatus.branch}
                       </span>
                     `
@@ -614,16 +614,16 @@ export class FileBrowser extends LitElement {
             <div
               class="${this.isMobile && this.mobileView === 'preview' ? 'hidden' : ''} ${
                 this.isMobile ? 'w-full' : 'w-80'
-              } bg-secondary border-r border-border/50 flex flex-col"
+              } bg-bg-secondary border-r border-border/50 flex flex-col"
             >
               <!-- File list header with toggles -->
               <div
-                class="bg-secondary border-b border-border/50 p-3 flex items-center justify-between"
+                class="bg-bg-secondary border-b border-border/50 p-3 flex items-center justify-between"
               >
                 <div class="flex gap-2">
                   <button
                     class="btn-secondary text-xs px-2 py-1 font-mono ${
-                      this.gitFilter === 'changed' ? 'bg-primary text-text-bright' : ''
+                      this.gitFilter === 'changed' ? 'bg-primary text-bg' : ''
                     }"
                     @click=${this.toggleGitFilter}
                     title="Show only Git changes"
@@ -632,7 +632,7 @@ export class FileBrowser extends LitElement {
                   </button>
                   <button
                     class="btn-secondary text-xs px-2 py-1 font-mono ${
-                      this.showHidden ? 'bg-primary text-text-bright' : ''
+                      this.showHidden ? 'bg-primary text-bg' : ''
                     }"
                     @click=${this.toggleHidden}
                     title="Show hidden files"
@@ -649,7 +649,7 @@ export class FileBrowser extends LitElement {
                 ${
                   this.loading
                     ? html`
-                      <div class="flex items-center justify-center h-full text-muted">
+                      <div class="flex items-center justify-center h-full text-text-muted">
                         Loading...
                       </div>
                     `
@@ -662,7 +662,7 @@ export class FileBrowser extends LitElement {
                               @click=${this.handleParentClick}
                             >
                               ${getParentDirectoryIcon()}
-                              <span class="text-muted">..</span>
+                              <span class="text-text-muted">..</span>
                             </div>
                           `
                           : ''
@@ -684,7 +684,7 @@ export class FileBrowser extends LitElement {
                                 file.isSymlink
                                   ? html`
                                     <svg
-                                      class="w-3 h-3 text-muted absolute -bottom-1 -right-1"
+                                      class="w-3 h-3 text-text-muted absolute -bottom-1 -right-1">
                                       fill="currentColor"
                                       viewBox="0 0 20 20"
                                     >
@@ -726,7 +726,7 @@ export class FileBrowser extends LitElement {
                 this.selectedFile
                   ? html`
                     <div
-                      class="bg-secondary border-b border-border/50 p-3 ${
+                      class="bg-bg-secondary border-b border-border/50 p-3 ${
                         this.isMobile ? 'space-y-2' : 'flex items-center justify-between'
                       }"
                     >
@@ -738,7 +738,7 @@ export class FileBrowser extends LitElement {
                                 @click=${() => {
                                   this.mobileView = 'list';
                                 }}
-                                class="text-muted hover:text-primary transition-colors flex-shrink-0"
+                                class="text-text-muted hover:text-primary transition-colors flex-shrink-0"
                                 title="Back to files"
                               >
                                 <svg
@@ -821,7 +821,7 @@ export class FileBrowser extends LitElement {
                             ? html`
                               <button
                                 class="btn-secondary text-xs px-2 py-1 font-mono ${
-                                  this.showDiff ? 'bg-primary text-text-bright' : ''
+                                  this.showDiff ? 'bg-primary text-bg' : ''
                                 } ${
                                   this.isMobile &&
                                   this.selectedFile.type === 'file' &&
diff --git a/web/src/client/components/file-picker.ts b/web/src/client/components/file-picker.ts
index e936d389..df38098f 100644
--- a/web/src/client/components/file-picker.ts
+++ b/web/src/client/components/file-picker.ts
@@ -247,7 +247,7 @@ export class FilePicker extends LitElement {
     }
 
     return html`
-      <div class="fixed inset-0 bg-bg bg-opacity-80 backdrop-blur-sm flex items-center justify-center animate-fade-in" style="z-index: ${Z_INDEX.FILE_PICKER};" @click=${this.handleCancel}>
+      <div class="fixed inset-0 bg-bg/80 backdrop-blur-sm flex items-center justify-center animate-fade-in" style="z-index: ${Z_INDEX.FILE_PICKER};" @click=${this.handleCancel}>
         <div class="bg-elevated border border-border/50 rounded-xl shadow-2xl p-8 m-4 max-w-sm w-full animate-scale-in" @click=${(e: Event) => e.stopPropagation()}>
           <h3 class="text-xl font-bold text-primary mb-6">
             Select File
@@ -258,10 +258,10 @@ export class FilePicker extends LitElement {
               ? html`
             <div class="mb-6">
               <div class="flex items-center justify-between mb-3">
-                <span class="text-sm text-muted font-mono">Uploading...</span>
+                <span class="text-sm text-text-muted font-mono">Uploading...</span>
                 <span class="text-sm text-primary font-mono font-medium">${Math.round(this.uploadProgress)}%</span>
               </div>
-              <div class="w-full bg-secondary rounded-full h-2 overflow-hidden">
+              <div class="w-full bg-bg-secondary rounded-full h-2 overflow-hidden">
                 <div 
                   class="bg-gradient-to-r from-primary to-primary-light h-2 rounded-full transition-all duration-300 shadow-glow-sm" 
                   style="width: ${this.uploadProgress}%"
@@ -289,7 +289,7 @@ export class FilePicker extends LitElement {
             <button
               id="file-picker-cancel-button"
               @click=${this.handleCancel}
-              class="w-full bg-secondary border border-border/50 text-primary font-mono py-3 px-6 rounded-lg transition-all duration-200 hover:bg-surface hover:border-primary active:scale-95"
+              class="w-full bg-bg-secondary border border-border/50 text-primary font-mono py-3 px-6 rounded-lg transition-all duration-200 hover:bg-surface hover:border-primary active:scale-95"
               ?disabled=${this.uploading}
             >
               Cancel
diff --git a/web/src/client/components/log-viewer.ts b/web/src/client/components/log-viewer.ts
index 684ba11c..40d48b8a 100644
--- a/web/src/client/components/log-viewer.ts
+++ b/web/src/client/components/log-viewer.ts
@@ -282,7 +282,7 @@ export class LogViewer extends LitElement {
 
     if (this.loading) {
       return html`
-        <div class="flex items-center justify-center h-screen bg-base text-primary">
+        <div class="flex items-center justify-center h-screen bg-bg text-primary">
           <div class="text-center">
             <div
               class="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent mb-4 mx-auto"
@@ -297,16 +297,16 @@ export class LogViewer extends LitElement {
 
     return html`
       ${scrollbarStyles}
-      <div class="flex flex-col h-full bg-base text-primary font-mono">
+      <div class="flex flex-col h-full bg-bg text-primary font-mono">
         <!-- Header - single row on desktop, two rows on mobile -->
-        <div class="bg-secondary border-b border-border/50 p-3 sm:p-4">
+        <div class="bg-bg-secondary border-b border-border/50 p-3 sm:p-4">
           <!-- Mobile layout (two rows) -->
           <div class="sm:hidden">
             <!-- Top row with back button and title -->
             <div class="flex items-center gap-2 mb-3">
               <!-- Back button -->
               <button
-                class="p-2 bg-base border border-border/50 rounded text-sm text-primary hover:border-primary hover:text-primary transition-colors flex items-center gap-1 flex-shrink-0"
+                class="p-2 bg-bg border border-border/50 rounded text-sm text-primary hover:border-primary hover:text-primary transition-colors flex items-center gap-1 flex-shrink-0"
                 @click=${() => {
                   window.location.href = '/';
                 }}
@@ -335,8 +335,8 @@ export class LogViewer extends LitElement {
                 <button
                   class="p-2 text-xs uppercase font-bold rounded transition-colors ${
                     this.autoScroll
-                      ? 'bg-primary text-base'
-                      : 'bg-tertiary text-muted border border-border/50'
+                      ? 'bg-primary text-bg'
+                      : 'bg-bg-tertiary text-text-muted border border-border/50'
                   }"
                   @click=${() => {
                     this.autoScroll = !this.autoScroll;
@@ -362,7 +362,7 @@ export class LogViewer extends LitElement {
               <!-- Search input -->
               <input
                 type="text"
-                class="px-3 py-1.5 bg-base border border-border/50 rounded text-sm text-primary placeholder-muted focus:outline-none focus:border-primary transition-colors w-full"
+                class="px-3 py-1.5 bg-bg border border-border/50 rounded text-sm text-primary placeholder-text-muted focus:outline-none focus:border-primary transition-colors w-full"
                 placeholder="Filter logs..."
                 .value=${this.filter}
                 @input=${(e: Event) => {
@@ -380,12 +380,12 @@ export class LogViewer extends LitElement {
                         class="px-1.5 py-1 text-xs uppercase font-bold rounded transition-colors ${
                           this.levelFilter.has(level)
                             ? level === 'error'
-                              ? 'bg-status-error bg-opacity-20 text-status-error border border-status-error'
+                              ? 'bg-status-error/20 text-status-error border border-status-error'
                               : level === 'warn'
-                                ? 'bg-status-warning bg-opacity-20 text-status-warning border border-status-warning'
+                                ? 'bg-status-warning/20 text-status-warning border border-status-warning'
                                 : level === 'debug'
                                   ? 'bg-bg-tertiary text-text-muted border border-border'
-                                  : 'bg-primary bg-opacity-20 text-primary border border-primary'
+                                  : 'bg-primary/20 text-primary border border-primary'
                             : 'bg-bg-tertiary text-text-muted border border-border'
                         }"
                         @click=${() => this.toggleLevel(level)}
@@ -410,7 +410,7 @@ export class LogViewer extends LitElement {
                   <button
                     class="px-1.5 py-1 text-xs uppercase font-bold rounded transition-colors ${
                       this.showClient
-                        ? 'bg-status-warning bg-opacity-20 text-status-warning border border-status-warning'
+                        ? 'bg-status-warning/20 text-status-warning border border-status-warning'
                         : 'bg-bg-tertiary text-text-muted border border-border'
                     }"
                     @click=${() => {
@@ -423,7 +423,7 @@ export class LogViewer extends LitElement {
                   <button
                     class="px-1.5 py-1 text-xs uppercase font-bold rounded transition-colors ${
                       this.showServer
-                        ? 'bg-primary bg-opacity-20 text-primary border border-primary'
+                        ? 'bg-primary/20 text-primary border border-primary'
                         : 'bg-bg-tertiary text-text-muted border border-border'
                     }"
                     @click=${() => {
@@ -485,12 +485,12 @@ export class LogViewer extends LitElement {
                       class="px-2 py-1 text-xs uppercase font-bold rounded transition-colors ${
                         this.levelFilter.has(level)
                           ? level === 'error'
-                            ? 'bg-status-error bg-opacity-20 text-status-error border border-status-error'
+                            ? 'bg-status-error/20 text-status-error border border-status-error'
                             : level === 'warn'
-                              ? 'bg-status-warning bg-opacity-20 text-status-warning border border-status-warning'
+                              ? 'bg-status-warning/20 text-status-warning border border-status-warning'
                               : level === 'debug'
                                 ? 'bg-bg-tertiary text-text-muted border border-border'
-                                : 'bg-primary bg-opacity-20 text-primary border border-primary'
+                                : 'bg-primary/20 text-primary border border-primary'
                           : 'bg-bg-tertiary text-text-muted border border-border'
                       }"
                       @click=${() => this.toggleLevel(level)}
@@ -506,7 +506,7 @@ export class LogViewer extends LitElement {
                 <button
                   class="px-2 py-1 text-xs uppercase font-bold rounded transition-colors ${
                     this.showClient
-                      ? 'bg-status-warning bg-opacity-20 text-status-warning border border-status-warning'
+                      ? 'bg-status-warning/20 text-status-warning border border-status-warning'
                       : 'bg-bg-tertiary text-text-muted border border-border'
                   }"
                   @click=${() => {
@@ -518,7 +518,7 @@ export class LogViewer extends LitElement {
                 <button
                   class="px-2 py-1 text-xs uppercase font-bold rounded transition-colors ${
                     this.showServer
-                      ? 'bg-primary bg-opacity-20 text-primary border border-primary'
+                      ? 'bg-primary/20 text-primary border border-primary'
                       : 'bg-bg-tertiary text-text-muted border border-border'
                   }"
                   @click=${() => {
@@ -533,7 +533,7 @@ export class LogViewer extends LitElement {
               <button
                 class="px-3 py-1 text-xs uppercase font-bold rounded transition-colors ${
                   this.autoScroll
-                    ? 'bg-primary bg-opacity-20 text-primary border border-primary'
+                    ? 'bg-primary/20 text-primary border border-primary'
                     : 'bg-bg-tertiary text-text-muted border border-border'
                 }"
                 @click=${() => {
diff --git a/web/src/client/components/session-card.ts b/web/src/client/components/session-card.ts
index 7f20b9be..6eb0abcf 100644
--- a/web/src/client/components/session-card.ts
+++ b/web/src/client/components/session-card.ts
@@ -373,7 +373,7 @@ export class SessionCard extends LitElement {
       >
         <!-- Compact Header -->
         <div
-          class="flex justify-between items-center px-3 py-2 border-b border-base bg-gradient-to-r from-secondary to-tertiary"
+          class="flex justify-between items-center px-3 py-2 border-b border-border bg-gradient-to-r from-bg-secondary to-bg-tertiary"
         >
           <div class="text-xs font-mono pr-2 flex-1 min-w-0 text-primary">
             <div class="flex items-center gap-2">
@@ -421,8 +421,8 @@ export class SessionCard extends LitElement {
                   <button
                     class="p-1 rounded-full transition-all duration-200 disabled:opacity-50 flex-shrink-0 ${
                       this.session.status === 'running'
-                        ? 'text-status-error hover:bg-status-error hover:bg-opacity-20'
-                        : 'text-status-warning hover:bg-status-warning hover:bg-opacity-20'
+                        ? 'text-status-error hover:bg-status-error/20'
+                        : 'text-status-warning hover:bg-status-warning/20'
                     }"
                     @click=${this.handleKillClick}
                     ?disabled=${this.killing}
@@ -491,7 +491,7 @@ export class SessionCard extends LitElement {
 
         <!-- Compact Footer -->
         <div
-          class="px-3 py-2 text-muted text-xs border-t border-base bg-gradient-to-r from-tertiary to-secondary"
+          class="px-3 py-2 text-text-muted text-xs border-t border-border bg-gradient-to-r from-bg-tertiary to-bg-secondary"
         >
           <div class="flex justify-between items-center min-w-0">
             <span 
@@ -601,7 +601,7 @@ export class SessionCard extends LitElement {
       return 'text-status-error';
     }
     if (this.session.active === false) {
-      return 'text-muted';
+      return 'text-text-muted';
     }
     if (this.session.status === 'running' && this.session.activityStatus?.specificStatus) {
       return 'text-status-warning';
@@ -622,7 +622,7 @@ export class SessionCard extends LitElement {
       } else if (this.session.activityStatus?.isActive || this.isActive) {
         return 'bg-status-success'; // Generic active - solid green
       } else {
-        return 'bg-status-success ring-1 ring-status-success ring-opacity-50'; // Idle - green with ring
+        return 'bg-status-success ring-1 ring-status-success/50'; // Idle - green with ring
       }
     }
     return 'bg-status-warning';
diff --git a/web/src/client/components/session-create-form/quick-start-section.ts b/web/src/client/components/session-create-form/quick-start-section.ts
index 20b6df91..b0bec884 100644
--- a/web/src/client/components/session-create-form/quick-start-section.ts
+++ b/web/src/client/components/session-create-form/quick-start-section.ts
@@ -99,7 +99,7 @@ export class QuickStartSection extends LitElement {
                     @click=${() => this.handleQuickStartClick(command)}
                     class="${
                       this.selectedCommand === command
-                        ? 'px-2 py-1.5 sm:px-3 sm:py-2 lg:px-4 lg:py-3 rounded-lg border text-left transition-all bg-primary bg-opacity-10 border-primary/50 text-primary hover:bg-opacity-20 font-medium text-[10px] sm:text-xs lg:text-sm'
+                        ? 'px-2 py-1.5 sm:px-3 sm:py-2 lg:px-4 lg:py-3 rounded-lg border text-left transition-all bg-primary/10 border-primary/50 text-primary hover:bg-primary/20 font-medium text-[10px] sm:text-xs lg:text-sm'
                         : 'px-2 py-1.5 sm:px-3 sm:py-2 lg:px-4 lg:py-3 rounded-lg border text-left transition-all bg-bg-elevated border-border/50 text-text hover:bg-hover hover:border-primary/50 hover:text-primary text-[10px] sm:text-xs lg:text-sm'
                     }"
                     ?disabled=${this.disabled || this.isCreating}
diff --git a/web/src/client/components/session-list.ts b/web/src/client/components/session-list.ts
index 4b53739b..ba43bd50 100644
--- a/web/src/client/components/session-list.ts
+++ b/web/src/client/components/session-list.ts
@@ -1102,7 +1102,7 @@ export class SessionList extends LitElement {
               !this.hideExited && exitedSessions.length > 0
                 ? html`
               <button
-                class="font-mono text-xs px-3 py-1.5 rounded-md border transition-all duration-200 border-status-warning bg-status-warning bg-opacity-10 text-status-warning hover:bg-opacity-20 hover:shadow-glow-warning-sm active:scale-95 disabled:opacity-50"
+                class="font-mono text-xs px-3 py-1.5 rounded-md border transition-all duration-200 border-status-warning bg-status-warning/10 text-status-warning hover:bg-status-warning/20 hover:shadow-glow-warning-sm active:scale-95 disabled:opacity-50"
                 id="clean-exited-button"
                 @click=${this.handleCleanupExited}
                 ?disabled=${this.cleaningExited}
@@ -1128,7 +1128,7 @@ export class SessionList extends LitElement {
               runningSessions.length > 0
                 ? html`
               <button
-                class="font-mono text-xs px-3 py-1.5 rounded-md border transition-all duration-200 border-status-error bg-status-error bg-opacity-10 text-status-error hover:bg-opacity-20 hover:shadow-glow-error-sm active:scale-95"
+                class="font-mono text-xs px-3 py-1.5 rounded-md border transition-all duration-200 border-status-error bg-status-error/10 text-status-error hover:bg-status-error/20 hover:shadow-glow-error-sm active:scale-95"
                 id="kill-all-button"
                 @click=${() => this.dispatchEvent(new CustomEvent('kill-all-sessions'))}
                 data-testid="kill-all-button"
diff --git a/web/src/client/components/session-list/compact-session-card.ts b/web/src/client/components/session-list/compact-session-card.ts
index bc9dac8c..04cfd7eb 100644
--- a/web/src/client/components/session-list/compact-session-card.ts
+++ b/web/src/client/components/session-list/compact-session-card.ts
@@ -72,7 +72,7 @@ export class CompactSessionCard extends LitElement {
 
     if (session.activityStatus?.isActive === false) {
       // Idle
-      return html`<div class="w-2.5 h-2.5 rounded-full bg-status-success ring-1 ring-status-success ring-opacity-50"></div>`;
+      return html`<div class="w-2.5 h-2.5 rounded-full bg-status-success ring-1 ring-status-success/50"></div>`;
     }
 
     // Active
diff --git a/web/src/client/components/session-view.ts b/web/src/client/components/session-view.ts
index b1aec45f..9ac8211d 100644
--- a/web/src/client/components/session-view.ts
+++ b/web/src/client/components/session-view.ts
@@ -955,10 +955,10 @@ export class SessionView extends LitElement {
   render() {
     if (!this.session) {
       return html`
-        <div class="fixed inset-0 bg-base flex items-center justify-center">
+        <div class="fixed inset-0 bg-bg flex items-center justify-center">
           <div class="text-primary font-mono text-center">
             <div class="text-2xl mb-2">${this.loadingAnimationManager.getLoadingText()}</div>
-            <div class="text-sm text-muted">Waiting for session...</div>
+            <div class="text-sm text-text-muted">Waiting for session...</div>
           </div>
         </div>
       `;
@@ -1130,11 +1130,11 @@ export class SessionView extends LitElement {
               ? html`
                 <!-- Enhanced Loading overlay -->
                 <div
-                  class="absolute inset-0 bg-bg bg-opacity-90 backdrop-filter backdrop-blur-sm flex items-center justify-center z-10 animate-fade-in"
+                  class="absolute inset-0 bg-bg/90 backdrop-filter backdrop-blur-sm flex items-center justify-center z-10 animate-fade-in"
                 >
                   <div class="text-primary font-mono text-center">
                     <div class="text-2xl mb-3 text-primary animate-pulse-primary">${this.loadingAnimationManager.getLoadingText()}</div>
-                    <div class="text-sm text-muted">Connecting to session...</div>
+                    <div class="text-sm text-text-muted">Connecting to session...</div>
                   </div>
                 </div>
               `
@@ -1179,7 +1179,7 @@ export class SessionView extends LitElement {
           ${
             uiState.isMobile && !uiState.showMobileInput && !uiState.useDirectKeyboard
               ? html`
-                <div class="p-4 bg-secondary">
+                <div class="p-4 bg-bg-secondary">
                 <!-- First row: Arrow keys -->
                 <div class="flex gap-2 mb-2">
                   <button
diff --git a/web/src/client/components/session-view/compact-menu.ts b/web/src/client/components/session-view/compact-menu.ts
index 1f0ce0e6..618af8dd 100644
--- a/web/src/client/components/session-view/compact-menu.ts
+++ b/web/src/client/components/session-view/compact-menu.ts
@@ -214,7 +214,7 @@ export class CompactMenu extends LitElement {
     return html`
       <div class="relative w-[44px] flex-shrink-0">
         <button
-          class="p-2 ${this.showMenu ? 'text-primary border-primary' : 'text-primary border-base'} hover:border-primary hover:text-primary rounded-lg"
+          class="p-2 bg-bg-tertiary border ${this.showMenu ? 'text-primary border-primary' : 'text-primary border-border'} hover:border-primary hover:text-primary hover:bg-surface-hover rounded-lg transition-all duration-200"
           @click=${this.toggleMenu}
           @keydown=${this.handleMenuButtonKeyDown}
           title="More actions"
@@ -235,13 +235,13 @@ export class CompactMenu extends LitElement {
     let menuItemIndex = 0;
     return html`
       <div 
-        class="absolute right-0 top-full mt-2 bg-surface border border-base rounded-lg shadow-xl py-1 min-w-[250px]"
+        class="absolute right-0 top-full mt-2 bg-surface border border-border rounded-lg shadow-xl py-1 min-w-[250px]"
         style="z-index: ${Z_INDEX.WIDTH_SELECTOR_DROPDOWN};"
       >
         
         <!-- New Session -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleAction(this.onCreateSession)}
           data-testid="compact-new-session"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -252,11 +252,11 @@ export class CompactMenu extends LitElement {
           New Session
         </button>
         
-        <div class="border-t border-base my-1"></div>
+        <div class="border-t border-border my-1"></div>
         
         <!-- File Browser -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleAction(this.onOpenFileBrowser)}
           data-testid="compact-file-browser"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -269,7 +269,7 @@ export class CompactMenu extends LitElement {
         
         <!-- Upload Image -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleAction(this.onUploadImage)}
           data-testid="compact-upload-image"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -282,7 +282,7 @@ export class CompactMenu extends LitElement {
         
         <!-- Width Settings -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleAction(this.onMaxWidthToggle)}
           data-testid="compact-width-settings"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -298,7 +298,7 @@ export class CompactMenu extends LitElement {
           this.hasGitRepo
             ? html`
               <button
-                class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+                class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
                 @click=${() => this.handleAction(this.onToggleViewMode)}
                 data-testid="compact-worktree-toggle"
                 tabindex="${this.showMenu ? '0' : '-1'}"
@@ -314,7 +314,7 @@ export class CompactMenu extends LitElement {
         
         <!-- Theme Toggle -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleThemeChange()}
           data-testid="compact-theme-toggle"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -325,7 +325,7 @@ export class CompactMenu extends LitElement {
         
         <!-- Settings -->
         <button
-          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+          class="w-full text-left px-4 py-3 text-sm font-mono text-primary hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
           @click=${() => this.handleAction(this.onOpenSettings)}
           data-testid="compact-settings"
           tabindex="${this.showMenu ? '0' : '-1'}"
@@ -339,14 +339,14 @@ export class CompactMenu extends LitElement {
         ${
           this.session
             ? html`
-          <div class="border-t border-base my-1"></div>
+          <div class="border-t border-border my-1"></div>
           
           <!-- Session Actions -->
           ${
             this.session.status === 'running'
               ? html`
             <button
-              class="w-full text-left px-4 py-3 text-sm font-mono text-status-error hover:bg-secondary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary' : ''}"
+              class="w-full text-left px-4 py-3 text-sm font-mono text-status-error hover:bg-surface-hover flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover' : ''}"
               @click=${() => this.handleAction(this.onTerminateSession)}
               data-testid="compact-terminate-session"
               tabindex="${this.showMenu ? '0' : '-1'}"
@@ -359,7 +359,7 @@ export class CompactMenu extends LitElement {
           `
               : html`
             <button
-              class="w-full text-left px-4 py-3 text-sm font-mono text-muted hover:bg-secondary hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-secondary text-primary' : ''}"
+              class="w-full text-left px-4 py-3 text-sm font-mono text-text-muted hover:bg-surface-hover hover:text-primary flex items-center gap-3 ${this.focusedIndex === menuItemIndex++ ? 'bg-surface-hover text-primary' : ''}"
               @click=${() => this.handleAction(this.onClearSession)}
               data-testid="compact-clear-session"
               tabindex="${this.showMenu ? '0' : '-1'}"
diff --git a/web/src/client/components/session-view/ctrl-alpha-overlay.ts b/web/src/client/components/session-view/ctrl-alpha-overlay.ts
index 5e4c55ed..ecb06813 100644
--- a/web/src/client/components/session-view/ctrl-alpha-overlay.ts
+++ b/web/src/client/components/session-view/ctrl-alpha-overlay.ts
@@ -50,7 +50,7 @@ export class CtrlAlphaOverlay extends LitElement {
           <div class="text-primary text-center mb-2 font-bold">Ctrl + Key</div>
 
           <!-- Help text -->
-          <div class="text-xs text-muted text-center mb-3 opacity-70">
+          <div class="text-xs text-text-muted text-center mb-3 opacity-70">
             Build sequences like ctrl+c ctrl+c
           </div>
 
@@ -58,8 +58,8 @@ export class CtrlAlphaOverlay extends LitElement {
           ${
             this.ctrlSequence.length > 0
               ? html`
-                <div class="text-center mb-4 p-2 border border-base rounded bg-base">
-                  <div class="text-xs text-muted mb-1">Current sequence:</div>
+                <div class="text-center mb-4 p-2 border border-border rounded bg-bg">
+                  <div class="text-xs text-text-muted mb-1">Current sequence:</div>
                   <div class="text-sm text-primary font-bold">
                     ${this.ctrlSequence.map((letter) => `Ctrl+${letter}`).join(' ')}
                   </div>
@@ -110,7 +110,7 @@ export class CtrlAlphaOverlay extends LitElement {
           </div>
 
           <!-- Common shortcuts info -->
-          <div class="text-xs text-muted text-center mb-3">
+          <div class="text-xs text-text-muted text-center mb-3">
             <div>Common: C=interrupt, X=exit, O=save, W=search</div>
           </div>
 
diff --git a/web/src/client/components/session-view/image-upload-menu.ts b/web/src/client/components/session-view/image-upload-menu.ts
index b29dddc4..cd69fca8 100644
--- a/web/src/client/components/session-view/image-upload-menu.ts
+++ b/web/src/client/components/session-view/image-upload-menu.ts
@@ -245,7 +245,7 @@ export class ImageUploadMenu extends LitElement {
       <div class="relative">
         <vt-tooltip content="Upload Image (⌘U)" .show=${!this.isMobile}>
           <button
-            class="bg-bg-tertiary border border-border rounded-lg p-2 font-mono text-muted transition-all duration-200 hover:text-primary hover:bg-surface-hover hover:border-primary hover:shadow-sm flex-shrink-0"
+            class="bg-bg-tertiary border border-border rounded-lg p-2 font-mono text-text-muted transition-all duration-200 hover:text-primary hover:bg-surface-hover hover:border-primary hover:shadow-sm flex-shrink-0"
             @click=${this.toggleMenu}
             @keydown=${this.handleMenuButtonKeyDown}
             title="Upload Image"
diff --git a/web/src/client/components/session-view/overlays-container.ts b/web/src/client/components/session-view/overlays-container.ts
index 598f5cd0..15193b5b 100644
--- a/web/src/client/components/session-view/overlays-container.ts
+++ b/web/src/client/components/session-view/overlays-container.ts
@@ -181,7 +181,7 @@ export class OverlaysContainer extends LitElement {
       ${
         this.uiState.isDragOver
           ? html`
-            <div class="fixed inset-0 bg-bg bg-opacity-90 backdrop-blur-sm flex items-center justify-center z-50 pointer-events-none animate-fade-in">
+            <div class="fixed inset-0 bg-bg/90 backdrop-blur-sm flex items-center justify-center z-50 pointer-events-none animate-fade-in">
               <div class="bg-elevated border-2 border-dashed border-primary rounded-xl p-10 text-center max-w-md mx-4 shadow-2xl animate-scale-in">
                 <div class="relative mb-6">
                   <div class="w-24 h-24 mx-auto bg-gradient-to-br from-primary to-primary-light rounded-full flex items-center justify-center shadow-glow">
@@ -192,10 +192,10 @@ export class OverlaysContainer extends LitElement {
                   <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-50"></div>
                 </div>
                 <h3 class="text-2xl font-bold text-primary mb-3">Drop files here</h3>
-                <p class="text-sm text-muted mb-4">Files will be uploaded and the path sent to terminal</p>
-                <div class="inline-flex items-center gap-2 text-xs text-dim bg-secondary px-4 py-2 rounded-lg">
+                <p class="text-sm text-text-muted mb-4">Files will be uploaded and the path sent to terminal</p>
+                <div class="inline-flex items-center gap-2 text-xs text-text-dim bg-bg-secondary px-4 py-2 rounded-lg">
                   <span class="opacity-75">Or press</span>
-                  <kbd class="px-2 py-1 bg-tertiary border border-base rounded text-primary font-mono text-xs">⌘V</kbd>
+                  <kbd class="px-2 py-1 bg-bg-tertiary border border-border rounded text-primary font-mono text-xs">⌘V</kbd>
                   <span class="opacity-75">to paste from clipboard</span>
                 </div>
               </div>
diff --git a/web/src/client/components/session-view/session-header.ts b/web/src/client/components/session-view/session-header.ts
index b39069e0..f666984a 100644
--- a/web/src/client/components/session-view/session-header.ts
+++ b/web/src/client/components/session-view/session-header.ts
@@ -152,9 +152,9 @@ export class SessionHeader extends LitElement {
   }
 
   private getStatusDotColor(): string {
-    if (!this.session) return 'bg-muted';
+    if (!this.session) return 'bg-bg-muted';
     if ('active' in this.session && this.session.active === false) {
-      return 'bg-muted';
+      return 'bg-bg-muted';
     }
     return this.session.status === 'running' ? 'bg-status-success' : 'bg-status-warning';
   }
@@ -418,7 +418,7 @@ export class SessionHeader extends LitElement {
                 
                 <!-- Terminal size button -->
                 <button
-                  class="bg-bg-tertiary border border-border rounded-lg px-3 py-2 font-mono text-xs text-muted transition-all duration-200 hover:text-primary hover:bg-surface-hover hover:border-primary hover:shadow-sm flex-shrink-0 width-selector-button"
+                  class="bg-bg-tertiary border border-border rounded-lg px-3 py-2 font-mono text-xs text-text-muted transition-all duration-200 hover:text-primary hover:bg-surface-hover hover:border-primary hover:shadow-sm flex-shrink-0 width-selector-button"
                   @click=${() => this.onMaxWidthToggle?.()}
                   title="${this.widthTooltip}"
                 >
diff --git a/web/src/client/components/session-view/session-status-dropdown.ts b/web/src/client/components/session-view/session-status-dropdown.ts
index 29ee8590..dad992e9 100644
--- a/web/src/client/components/session-view/session-status-dropdown.ts
+++ b/web/src/client/components/session-view/session-status-dropdown.ts
@@ -197,7 +197,7 @@ export class SessionStatusDropdown extends LitElement {
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            class="transition-transform text-muted ${this.showMenu ? 'rotate-180' : ''}"
+            class="transition-transform text-text-muted ${this.showMenu ? 'rotate-180' : ''}"
           >
             <path d="M5 7L1 3h8z" />
           </svg>
@@ -235,7 +235,7 @@ export class SessionStatusDropdown extends LitElement {
           `
             : html`
             <button
-              class="w-full text-left px-6 py-3 text-sm font-mono text-muted hover:bg-bg-secondary hover:text-primary flex items-center gap-3 ${
+              class="w-full text-left px-6 py-3 text-sm font-mono text-text-muted hover:bg-bg-secondary hover:text-primary flex items-center gap-3 ${
                 this.focusedIndex === menuItemIndex++ ? 'bg-bg-secondary text-primary' : ''
               }"
               @click=${() => this.handleAction(this.onClear)}
diff --git a/web/src/client/components/session-view/terminal-dimensions.ts b/web/src/client/components/session-view/terminal-dimensions.ts
index 8651996b..47f72fcc 100644
--- a/web/src/client/components/session-view/terminal-dimensions.ts
+++ b/web/src/client/components/session-view/terminal-dimensions.ts
@@ -37,7 +37,7 @@ export class TerminalDimensions extends LitElement {
 
     return html`
       <span
-        class="hidden sm:inline text-muted text-xs opacity-60"
+        class="hidden sm:inline text-text-muted text-xs opacity-60"
         style="font-size: 10px; line-height: 1;"
       >
         ${this.cols}×${this.rows}
diff --git a/web/src/client/components/session-view/width-selector.ts b/web/src/client/components/session-view/width-selector.ts
index cd8972ea..c9921593 100644
--- a/web/src/client/components/session-view/width-selector.ts
+++ b/web/src/client/components/session-view/width-selector.ts
@@ -174,7 +174,7 @@ export class TerminalSettingsModal extends LitElement {
           <div class="flex items-center justify-between mb-6">
             <h2 id="terminal-settings-title" class="text-lg font-semibold text-text-bright">Terminal Settings</h2>
             <button
-              class="text-muted hover:text-primary transition-colors p-1"
+              class="text-text-muted hover:text-primary transition-colors p-1"
               @click=${() => this.handleClose()}
               title="Close"
               aria-label="Close terminal settings"
diff --git a/web/src/client/components/settings.ts b/web/src/client/components/settings.ts
index 44a27903..6b080c16 100644
--- a/web/src/client/components/settings.ts
+++ b/web/src/client/components/settings.ts
@@ -385,7 +385,7 @@ export class Settings extends LitElement {
           <div class="p-4 pb-4 border-b border-border/50 relative flex-shrink-0">
             <h2 class="text-primary text-lg font-bold">Settings</h2>
             <button
-              class="absolute top-4 right-4 text-muted hover:text-primary transition-colors p-1"
+              class="absolute top-4 right-4 text-text-muted hover:text-primary transition-colors p-1"
               @click=${this.handleClose}
               title="Close"
               aria-label="Close settings"
@@ -431,7 +431,7 @@ export class Settings extends LitElement {
         ${
           !this.isNotificationsSupported
             ? html`
-              <div class="p-4 bg-status-warning bg-opacity-10 border border-status-warning rounded-lg">
+              <div class="p-4 bg-status-warning/10 border border-status-warning rounded-lg">
                 ${
                   isIOSSafari && !isStandalone
                     ? html`
@@ -452,7 +452,7 @@ export class Settings extends LitElement {
             `
             : html`
               <!-- Main toggle -->
-              <div class="flex items-center justify-between p-4 bg-tertiary rounded-lg border border-border/50">
+              <div class="flex items-center justify-between p-4 bg-bg-tertiary rounded-lg border border-border/50">
                 <div class="flex-1">
                   <label class="text-primary font-medium">Enable Notifications</label>
                   <p class="text-muted text-xs mt-1">
@@ -482,8 +482,8 @@ export class Settings extends LitElement {
                     <!-- Notification types -->
                     <div class="mt-4 space-y-4">
                       <div>
-                        <h4 class="text-sm font-medium text-muted mb-3">Notification Types</h4>
-                        <div class="space-y-2 bg-base rounded-lg p-3">
+                        <h4 class="text-sm font-medium text-text-muted mb-3">Notification Types</h4>
+                        <div class="space-y-2 bg-bg rounded-lg p-3">
                           ${this.renderNotificationToggle('sessionExit', 'Session Exit', 'When a session terminates or crashes (shows exit code)')}
                           ${this.renderNotificationToggle('sessionStart', 'Session Start', 'When a new session starts (useful for shared terminals)')}
                           ${this.renderNotificationToggle('commandError', 'Session Errors', 'When commands fail with non-zero exit codes')}
@@ -495,8 +495,8 @@ export class Settings extends LitElement {
 
                       <!-- Sound and vibration -->
                       <div>
-                        <h4 class="text-sm font-medium text-muted mb-3">Notification Behavior</h4>
-                        <div class="space-y-2 bg-base rounded-lg p-3">
+                        <h4 class="text-sm font-medium text-text-muted mb-3">Notification Behavior</h4>
+                        <div class="space-y-2 bg-bg rounded-lg p-3">
                           ${this.renderNotificationToggle('soundEnabled', 'Sound', 'Play a notification sound when alerts are triggered')}
                           ${this.renderNotificationToggle('vibrationEnabled', 'Vibration', 'Vibrate device with notifications (mobile devices only)')}
                         </div>
@@ -562,7 +562,7 @@ export class Settings extends LitElement {
         ${
           this.mediaState.isMobile
             ? html`
-              <div class="flex items-center justify-between p-4 bg-tertiary rounded-lg border border-border/50">
+              <div class="flex items-center justify-between p-4 bg-bg-tertiary rounded-lg border border-border/50">
                 <div class="flex-1">
                   <label class="text-primary font-medium">
                     Use Direct Keyboard
@@ -592,7 +592,7 @@ export class Settings extends LitElement {
 
 
         <!-- Repository Base Path -->
-        <div class="p-4 bg-tertiary rounded-lg border border-border/50">
+        <div class="p-4 bg-bg-tertiary rounded-lg border border-border/50">
           <div class="mb-3">
             <div class="flex items-center justify-between">
               <label class="text-primary font-medium">Repository Base Path</label>
diff --git a/web/src/client/components/ssh-key-manager.ts b/web/src/client/components/ssh-key-manager.ts
index 8b141f9d..e9048d76 100644
--- a/web/src/client/components/ssh-key-manager.ts
+++ b/web/src/client/components/ssh-key-manager.ts
@@ -176,7 +176,7 @@ export class SSHKeyManager extends LitElement {
 
     return html`
       <div 
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-[1000]"
+        class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[1000]"
         @click=${this.handleBackdropClick}
       >
         <div
@@ -190,7 +190,7 @@ export class SSHKeyManager extends LitElement {
             <h2 class="text-2xl font-mono text-primary text-center">🔑 SSH Key Manager</h2>
             <button 
               @click=${this.handleClose} 
-              class="absolute top-0 right-0 w-8 h-8 flex items-center justify-center text-muted hover:text-primary hover:bg-surface rounded transition-colors"
+              class="absolute top-0 right-0 w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary hover:bg-surface rounded transition-colors"
               title="Close"
             >
               ✕
@@ -277,7 +277,7 @@ export class SSHKeyManager extends LitElement {
                         <div>
                           <label class="form-label">Algorithm</label>
                           <div
-                            class="input-field bg-secondary text-muted cursor-not-allowed"
+                            class="input-field bg-bg-secondary text-text-muted cursor-not-allowed"
                           >
                             Ed25519 (recommended)
                           </div>
@@ -296,7 +296,7 @@ export class SSHKeyManager extends LitElement {
                           }}
                           ?disabled=${this.loading}
                         />
-                        <p class="text-muted text-xs mt-1">
+                        <p class="text-text-muted text-xs mt-1">
                           💡 Leave empty for unencrypted key. Password is required when using the
                           key for signing.
                         </p>
@@ -346,7 +346,7 @@ export class SSHKeyManager extends LitElement {
                           }}
                           ?disabled=${this.loading}
                         ></textarea>
-                        <p class="text-muted text-xs mt-1">
+                        <p class="text-text-muted text-xs mt-1">
                           💡 If the key is password-protected, you'll be prompted for the password
                           when using it for authentication.
                         </p>
@@ -383,7 +383,7 @@ export class SSHKeyManager extends LitElement {
                       @click=${() => {
                         this.showInstructions = false;
                       }}
-                      class="w-8 h-8 flex items-center justify-center text-muted hover:text-primary hover:bg-bg rounded transition-colors"
+                      class="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary hover:bg-bg rounded transition-colors"
                       title="Close instructions"
                     >
                       ✕
@@ -391,7 +391,7 @@ export class SSHKeyManager extends LitElement {
                   </div>
                   <div class="space-y-6">
                     <div class="bg-bg border border-border rounded-lg p-4">
-                      <p class="text-muted text-sm mb-3 font-medium">
+                      <p class="text-text-muted text-sm mb-3 font-medium">
                         1. Add the public key to your authorized_keys file:
                       </p>
                       <div class="relative">
@@ -415,7 +415,7 @@ echo "${this.sshAgent.getPublicKey(this.instructionsKeyId)}" >> ~/.ssh/authorize
                       </div>
                     </div>
                     <div class="bg-bg border border-border rounded-lg p-4">
-                      <p class="text-muted text-sm mb-3 font-medium">2. Or copy the public key:</p>
+                      <p class="text-text-muted text-sm mb-3 font-medium">2. Or copy the public key:</p>
                       <div class="relative">
                         <pre
                           class="bg-secondary p-3 rounded-lg text-xs overflow-x-auto text-primary pr-20 font-mono"
@@ -437,8 +437,8 @@ ${this.sshAgent.getPublicKey(this.instructionsKeyId)}</pre
                         </button>
                       </div>
                     </div>
-                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                      <p class="text-blue-700 text-sm font-mono flex items-center gap-2">
+                    <div class="bg-status-info/10 border border-status-info/30 rounded-lg p-3">
+                      <p class="text-status-info text-sm font-mono flex items-center gap-2">
                         💡 <strong>Tip:</strong> Make sure ~/.ssh/authorized_keys has correct permissions (600)
                       </p>
                     </div>
@@ -453,7 +453,7 @@ ${this.sshAgent.getPublicKey(this.instructionsKeyId)}</pre
             ${
               this.keys.length === 0
                 ? html`
-                  <div class="text-center py-12 text-muted border border-border rounded-lg bg-surface">
+                  <div class="text-center py-12 text-text-muted border border-border rounded-lg bg-surface">
                     <div class="text-4xl mb-4">🔑</div>
                     <p class="font-mono text-lg mb-2 text-primary">No SSH keys found</p>
                     <p class="text-sm">Generate or import a key to get started</p>
@@ -473,7 +473,7 @@ ${this.sshAgent.getPublicKey(this.instructionsKeyId)}</pre
                                 : ''
                             }
                           </div>
-                          <div class="text-sm text-muted font-mono space-y-1">
+                          <div class="text-sm text-text-muted font-mono space-y-1">
                             <div>ID: ${key.id}</div>
                             <div>Fingerprint: ${key.fingerprint}</div>
                             <div>Created: ${new Date(key.createdAt).toLocaleString()}</div>
diff --git a/web/src/client/components/terminal-quick-keys.ts b/web/src/client/components/terminal-quick-keys.ts
index eb13b66f..3c8b6e50 100644
--- a/web/src/client/components/terminal-quick-keys.ts
+++ b/web/src/client/components/terminal-quick-keys.ts
@@ -418,7 +418,7 @@ export class TerminalQuickKeys extends LitElement {
                 <button
                   type="button"
                   tabindex="-1"
-                  class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-tertiary text-primary font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${arrow ? 'arrow-key' : ''} ${toggle ? 'toggle-key' : ''} ${toggle && ((key === 'CtrlExpand' && this.showCtrlKeys) || (key === 'F' && this.showFunctionKeys)) ? 'active' : ''} ${modifier && key === 'Option' && this.activeModifiers.has('Option') ? 'active' : ''}"
+                  class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-bg-tertiary text-primary font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${arrow ? 'arrow-key' : ''} ${toggle ? 'toggle-key' : ''} ${toggle && ((key === 'CtrlExpand' && this.showCtrlKeys) || (key === 'F' && this.showFunctionKeys)) ? 'active' : ''} ${modifier && key === 'Option' && this.activeModifiers.has('Option') ? 'active' : ''}"
                   @mousedown=${(e: Event) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -470,7 +470,7 @@ export class TerminalQuickKeys extends LitElement {
                     <button
                       type="button"
                       tabindex="-1"
-                      class="ctrl-shortcut-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-tertiary text-primary font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''}"
+                      class="ctrl-shortcut-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-bg-tertiary text-primary font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''}"
                       @mousedown=${(e: Event) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -505,7 +505,7 @@ export class TerminalQuickKeys extends LitElement {
                     <button
                       type="button"
                       tabindex="-1"
-                      class="func-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-tertiary text-primary font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap"
+                      class="func-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-bg-tertiary text-primary font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap"
                       @mousedown=${(e: Event) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -539,7 +539,7 @@ export class TerminalQuickKeys extends LitElement {
                     <button
                       type="button"
                       tabindex="-1"
-                      class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-tertiary text-primary font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''} ${toggle ? 'toggle-key' : ''} ${toggle && this.showFunctionKeys ? 'active' : ''}"
+                      class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-bg-tertiary text-primary font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''} ${toggle ? 'toggle-key' : ''} ${toggle && this.showFunctionKeys ? 'active' : ''}"
                       @mousedown=${(e: Event) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -578,7 +578,7 @@ export class TerminalQuickKeys extends LitElement {
                 <button
                   type="button"
                   tabindex="-1"
-                  class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-tertiary text-primary font-mono rounded border border-base hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''} ${modifier && key === 'Option' && this.activeModifiers.has('Option') ? 'active' : ''}"
+                  class="quick-key-btn ${this.getButtonFontClass(label)} min-w-0 ${this.getButtonSizeClass(label)} bg-bg-tertiary text-primary font-mono rounded border border-border hover:bg-surface hover:border-primary transition-all whitespace-nowrap ${modifier ? 'modifier-key' : ''} ${combo ? 'combo-key' : ''} ${special ? 'special-key' : ''} ${modifier && key === 'Option' && this.activeModifiers.has('Option') ? 'active' : ''}"
                   @mousedown=${(e: Event) => {
                     e.preventDefault();
                     e.stopPropagation();
diff --git a/web/src/client/components/vibe-terminal-buffer.ts b/web/src/client/components/vibe-terminal-buffer.ts
index 679a629f..4d5e341d 100644
--- a/web/src/client/components/vibe-terminal-buffer.ts
+++ b/web/src/client/components/vibe-terminal-buffer.ts
@@ -244,7 +244,7 @@ export class VibeTerminalBuffer extends LitElement {
           this.error
             ? html`
               <div class="absolute inset-0 flex items-center justify-center">
-                <div class="text-red-500 text-sm">${this.error}</div>
+                <div class="text-status-error text-sm">${this.error}</div>
               </div>
             `
             : html`
diff --git a/web/src/client/styles.css b/web/src/client/styles.css
index 0010ff26..7bd6dfad 100644
--- a/web/src/client/styles.css
+++ b/web/src/client/styles.css
@@ -1,36 +1,141 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+
+/* Define CSS variables first */
+:root {
+  /* Light mode colors (default) */
+  --color-bg: rgb(250 250 250);
+  --color-bg-secondary: rgb(245 245 245);
+  --color-bg-tertiary: rgb(237 237 237);
+  --color-bg-elevated: rgb(255 255 255);
+  --color-surface: rgb(245 245 245);
+  --color-surface-hover: rgb(237 237 237);
+  --color-border: rgb(226 226 226);
+  --color-border-light: rgb(237 237 237);
+  --color-border-focus: rgb(200 200 200);
+  --color-text: rgb(23 23 23);
+  --color-text-bright: rgb(0 0 0);
+  --color-text-muted: rgb(75 75 75);
+  --color-text-dim: rgb(115 115 115);
+  --color-primary: #10B981;
+  --color-primary-hover: #059669;
+  --color-primary-dark: #047857;
+  --color-primary-light: #34D399;
+  --color-primary-muted: #10B98133;
+  --color-primary-glow: #10B98166;
+  --color-status-error: #EF4444;
+  --color-status-warning: #F59E0B;
+  --color-status-success: #10B981;
+  --color-status-info: #3B82F6;
+}
+
+/* Tailwind v4 Theme Configuration */
+@theme {
+  /* Register custom colors using CSS variables */
+  --color-bg: var(--color-bg);
+  --color-bg-secondary: var(--color-bg-secondary);
+  --color-bg-tertiary: var(--color-bg-tertiary);
+  --color-bg-elevated: var(--color-bg-elevated);
+  --color-surface: var(--color-surface);
+  --color-surface-hover: var(--color-surface-hover);
+  --color-border: var(--color-border);
+  --color-border-light: var(--color-border-light);
+  --color-border-focus: var(--color-border-focus);
+  --color-text: var(--color-text);
+  --color-text-bright: var(--color-text-bright);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-dim: var(--color-text-dim);
+  --color-primary: var(--color-primary);
+  --color-primary-hover: var(--color-primary-hover);
+  --color-primary-dark: var(--color-primary-dark);
+  --color-primary-light: var(--color-primary-light);
+  --color-primary-muted: var(--color-primary-muted);
+  --color-primary-glow: var(--color-primary-glow);
+  --color-accent-primary: var(--color-primary);
+  --color-accent-green: var(--color-status-success);
+  --color-accent-red: var(--color-status-error);
+  --color-status-error: var(--color-status-error);
+  --color-status-warning: var(--color-status-warning);
+  --color-status-success: var(--color-status-success);
+  --color-status-info: var(--color-status-info);
+  
+  /* Box Shadows */
+  --shadow-glow: 0 0 20px rgb(16 185 129 / 0.4);
+  --shadow-glow-sm: 0 0 10px rgb(16 185 129 / 0.3);
+  --shadow-glow-lg: 0 0 30px rgb(16 185 129 / 0.5);
+  --shadow-glow-intense: 0 0 40px rgb(16 185 129 / 0.6);
+  --shadow-glow-error: 0 0 20px rgb(239 68 68 / 0.4);
+  --shadow-glow-error-sm: 0 0 10px rgb(239 68 68 / 0.3);
+  --shadow-glow-error-lg: 0 0 30px rgb(239 68 68 / 0.5);
+  --shadow-glow-warning: 0 0 20px rgb(245 158 11 / 0.4);
+  --shadow-glow-warning-sm: 0 0 10px rgb(245 158 11 / 0.3);
+  --shadow-glow-warning-lg: 0 0 30px rgb(245 158 11 / 0.5);
+  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.4);
+  --shadow-card-hover: 0 4px 6px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.4);
+  --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2);
+  
+  /* Animations */
+  --animate-pulse-primary: pulsePrimary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-slide-in-right: slideInRight 0.3s ease-out;
+  --animate-slide-in-bottom: slideInBottom 0.3s ease-out;
+  --animate-fade-in: fadeIn 0.2s ease-out;
+  --animate-scale-in: scaleIn 0.2s ease-out;
+}
+
+/* Keyframes */
+@keyframes pulsePrimary {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .7;
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInBottom {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 
 /* CSS Custom Properties for VibeTunnel constants */
 :root {
-  /* Theme Colors - Light Mode (Default) */
-  --color-bg: 250 250 250; /* #fafafa - Off-white background */
-  --color-bg-secondary: 245 245 245; /* #f5f5f5 - Subtle gray */
-  --color-bg-tertiary: 237 237 237; /* #ededed - Card backgrounds */
-  --color-bg-elevated: 255 255 255; /* #ffffff - Pure white for elevated surfaces */
-  --color-surface: 245 245 245; /* #f5f5f5 */
-  --color-surface-hover: 237 237 237; /* #ededed */
-  --color-border: 226 226 226; /* #e2e2e2 - Subtle gray borders */
-  --color-border-light: 237 237 237; /* #ededed */
-  --color-border-focus: 200 200 200; /* #c8c8c8 */
-  
-  /* Text colors - Light Mode */
-  --color-text: 23 23 23; /* #171717 - Near black for high contrast */
-  --color-text-bright: 0 0 0; /* #000000 - Pure black for emphasis */
-  --color-text-muted: 75 75 75; /* #4b4b4b - Darker muted gray for AAA compliance */
-  --color-text-dim: 115 115 115; /* #737373 - Darker dim gray for AA compliance */
-  
-  /* Primary color (same across themes) */
-  --color-primary: 16 185 129; /* #10B981 - VibeTunnel green */
-  --color-primary-hover: 5 150 105; /* #059669 */
-  --color-primary-dark: 4 120 87; /* #047857 */
-  
-  /* Status colors */
-  --color-status-error: 239 68 68; /* #EF4444 */
-  --color-status-warning: 245 158 11; /* #F59E0B */
-  --color-status-success: 16 185 129; /* #10B981 */
-  --color-status-info: 59 130 246; /* #3B82F6 */
   /* Breakpoints */
   --vt-breakpoint-mobile: 768px;
   --vt-breakpoint-tablet: 1024px;
@@ -60,57 +165,39 @@
 
 /* Dark mode theme colors */
 [data-theme="dark"] {
-  --color-bg: 23 23 23; /* #171717 - Lighter neutral dark */
-  --color-bg-secondary: 32 32 32; /* #202020 - Slightly darker for sidebar */
-  --color-bg-tertiary: 40 40 40; /* #282828 - For buttons and cards */
-  --color-bg-elevated: 48 48 48; /* #303030 - Elevated surfaces */
-  --color-surface: 36 36 36; /* #242424 - Surface color */
-  --color-surface-hover: 52 52 52; /* #343434 - Hover states */
-  --color-border: 64 64 64; /* #404040 - Subtle borders */
-  --color-border-light: 72 72 72; /* #484848 - Light borders */
-  --color-border-focus: 80 80 80; /* #505050 - Focus borders */
-  
-  /* Text colors - Dark Mode */
-  --color-text: 228 228 228; /* #e4e4e4 */
-  --color-text-bright: 255 255 255; /* #ffffff */
-  --color-text-muted: 163 163 163; /* #a3a3a3 */
-  --color-text-dim: 115 115 115; /* #737373 */
-  
-  /* Primary color (same as light mode) */
-  --color-primary: 16 185 129; /* #10B981 */
-  --color-primary-hover: 5 150 105; /* #059669 */
-  --color-primary-dark: 4 120 87; /* #047857 */
-  
-  /* Status colors (same as light mode) */
-  --color-status-error: 239 68 68; /* #EF4444 */
-  --color-status-warning: 245 158 11; /* #F59E0B */
-  --color-status-success: 16 185 129; /* #10B981 */
-  --color-status-info: 59 130 246; /* #3B82F6 */
+  /* Override CSS variables for dark mode */
+  --color-bg: rgb(23 23 23);
+  --color-bg-secondary: rgb(32 32 32);
+  --color-bg-tertiary: rgb(40 40 40);
+  --color-bg-elevated: rgb(48 48 48);
+  --color-surface: rgb(36 36 36);
+  --color-surface-hover: rgb(52 52 52);
+  --color-border: rgb(64 64 64);
+  --color-border-light: rgb(72 72 72);
+  --color-border-focus: rgb(80 80 80);
+  --color-text: rgb(228 228 228);
+  --color-text-bright: rgb(255 255 255);
+  --color-text-muted: rgb(163 163 163);
+  --color-text-dim: rgb(115 115 115);
+  /* Primary and status colors remain the same */
 }
 
 /* System preference detection */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --color-bg: 23 23 23;
-    --color-bg-secondary: 32 32 32;
-    --color-bg-tertiary: 40 40 40;
-    --color-bg-elevated: 48 48 48;
-    --color-surface: 36 36 36;
-    --color-surface-hover: 52 52 52;
-    --color-border: 64 64 64;
-    --color-border-light: 72 72 72;
-    --color-border-focus: 80 80 80;
-    --color-text: 228 228 228;
-    --color-text-bright: 255 255 255;
-    --color-text-muted: 163 163 163;
-    --color-text-dim: 115 115 115;
-    --color-primary: 16 185 129;
-    --color-primary-hover: 5 150 105;
-    --color-primary-dark: 4 120 87;
-    --color-status-error: 239 68 68;
-    --color-status-warning: 245 158 11;
-    --color-status-success: 16 185 129;
-    --color-status-info: 59 130 246;
+    --color-bg: rgb(23 23 23);
+    --color-bg-secondary: rgb(32 32 32);
+    --color-bg-tertiary: rgb(40 40 40);
+    --color-bg-elevated: rgb(48 48 48);
+    --color-surface: rgb(36 36 36);
+    --color-surface-hover: rgb(52 52 52);
+    --color-border: rgb(64 64 64);
+    --color-border-light: rgb(72 72 72);
+    --color-border-focus: rgb(80 80 80);
+    --color-text: rgb(228 228 228);
+    --color-text-bright: rgb(255 255 255);
+    --color-text-muted: rgb(163 163 163);
+    --color-text-dim: rgb(115 115 115);
   }
 }
 
@@ -124,6 +211,126 @@
     @apply bg-bg text-text;
     transition: background-color 0.3s ease, color 0.3s ease;
   }
+  
+  /* Checkbox styling */
+  input[type="checkbox"] {
+    @apply w-4 h-4 rounded border border-border bg-bg cursor-pointer;
+    @apply transition-all duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply checked:bg-primary checked:border-primary;
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+  }
+  
+  input[type="checkbox"]:checked::before {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+  }
+  
+  /* Select element styling */
+  select {
+    @apply w-full rounded border border-border bg-bg cursor-pointer;
+    @apply transition-all duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply hover:border-primary/50;
+    @apply px-3 py-2 pr-8;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+  }
+  
+  /* Dark mode select arrow */
+  [data-theme="dark"] select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  }
+  
+  /* Textarea styling */
+  textarea {
+    @apply w-full rounded border border-border bg-bg;
+    @apply transition-all duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply hover:border-primary/50 focus:border-primary;
+    @apply px-3 py-2;
+    resize: vertical;
+    min-height: 80px;
+  }
+  
+  /* Radio button styling */
+  input[type="radio"] {
+    @apply w-4 h-4 border border-border bg-bg cursor-pointer;
+    @apply transition-all duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    appearance: none;
+    border-radius: 50%;
+    position: relative;
+  }
+  
+  input[type="radio"]:checked {
+    @apply bg-primary border-primary;
+  }
+  
+  input[type="radio"]:checked::before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+  }
+  
+  /* File input styling */
+  input[type="file"] {
+    @apply w-full rounded border border-border bg-bg cursor-pointer;
+    @apply transition-all duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply hover:border-primary/50;
+    @apply px-3 py-2;
+    @apply text-sm text-text;
+  }
+  
+  input[type="file"]::file-selector-button {
+    @apply mr-3 px-3 py-1 rounded bg-primary text-bg;
+    @apply hover:bg-primary-hover;
+    @apply cursor-pointer transition-colors duration-200;
+    border: none;
+    font-weight: 500;
+  }
+  
+  /* Range input styling */
+  input[type="range"] {
+    @apply w-full h-2 bg-bg-tertiary rounded-lg appearance-none cursor-pointer;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+  }
+  
+  input[type="range"]::-webkit-slider-thumb {
+    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer;
+    @apply hover:bg-primary-hover transition-colors duration-200;
+    @apply shadow-sm hover:shadow-md;
+  }
+  
+  input[type="range"]::-moz-range-thumb {
+    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer;
+    @apply hover:bg-primary-hover transition-colors duration-200;
+    @apply shadow-sm hover:shadow-md;
+    border: none;
+  }
+  
+  /* Session toggle checkbox specific styling */
+  .session-toggle-checkbox {
+    @apply w-3 h-3;
+  }
 
   /* Default focus styles */
   :focus {
@@ -174,31 +381,49 @@
   }
   
   .btn-sm {
-    @apply btn px-3 py-1.5 text-sm;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-3 py-1.5 text-sm;
   }
   
   .btn-md {
-    @apply btn px-4 py-2;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-4 py-2;
   }
   
   .btn-lg {
-    @apply btn px-6 py-3 text-lg;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-6 py-3 text-lg;
   }
 
   .btn-primary {
-    @apply btn-md bg-primary text-bg;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-4 py-2 bg-primary text-bg;
     @apply hover:bg-primary-hover hover:shadow-glow;
     @apply active:scale-95;
   }
 
   .btn-secondary {
-    @apply btn-md border border-primary text-primary;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-4 py-2 border border-primary text-primary;
     @apply hover:bg-primary/10 hover:border-primary-hover hover:shadow-glow-sm;
     @apply active:scale-95;
   }
 
   .btn-ghost {
-    @apply btn-md text-text-muted;
+    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply px-4 py-2 text-text-muted;
     @apply hover:text-text hover:bg-bg-tertiary;
   }
 
@@ -249,19 +474,19 @@
   }
   
   .status-badge-success {
-    @apply bg-status-success bg-opacity-20 text-status-success;
+    @apply bg-status-success/20 text-status-success;
   }
   
   .status-badge-warning {
-    @apply bg-status-warning bg-opacity-20 text-status-warning;
+    @apply bg-status-warning/20 text-status-warning;
   }
   
   .status-badge-error {
-    @apply bg-status-error bg-opacity-20 text-status-error;
+    @apply bg-status-error/20 text-status-error;
   }
   
   .status-badge-info {
-    @apply bg-status-info bg-opacity-20 text-status-info;
+    @apply bg-status-info/20 text-status-info;
   }
 
   /* Quick start buttons */
@@ -280,7 +505,7 @@
 
   /* Modal backdrop */
   .modal-backdrop {
-    @apply fixed inset-0 bg-bg bg-opacity-80;
+    @apply fixed inset-0 bg-bg/80;
     z-index: 1000;
     backdrop-filter: blur(4px);
     /* Disable all transitions and animations */
@@ -291,7 +516,7 @@
   /* Modal content */
   .modal-content {
     @apply bg-bg-secondary border border-border rounded-xl;
-    @apply shadow-2xl shadow-black/50;
+    @apply shadow-2xl;
     position: relative;
     z-index: 1001;
     /* Disable all transitions and animations */
@@ -521,7 +746,7 @@
   
   /* Focus within styles */
   .focus-within-glow:focus-within {
-    @apply shadow-glow-sm ring-2 ring-primary ring-opacity-50;
+    @apply shadow-glow-sm ring-2 ring-primary/50;
   }
   
   /* Smooth color transitions */
@@ -1660,7 +1885,6 @@ body.initial-session-load .session-flex-responsive > session-card:nth-child(n +
 
 
 
-
   /* Black hole collapse animation for session removal */
   @keyframes black-hole-collapse {
     0% {
@@ -1935,4 +2159,4 @@ body.initial-session-load .session-flex-responsive > session-card:nth-child(n +
 /* Focus visible for keyboard navigation */
 .session-toggle-checkbox:focus-visible {
   box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.4);
-}
+}
\ No newline at end of file
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
deleted file mode 100644
index 36e08f2a..00000000
--- a/web/tailwind.config.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        "./src/**/*.{html,js,ts,jsx,tsx}",
-        "./public/**/*.html",
-        "!./node_modules/**/*"
-    ],
-    theme: {
-        extend: {
-            colors: {
-                // Theme-aware colors using CSS variables
-                "bg": "rgb(var(--color-bg) / <alpha-value>)",
-                "bg-secondary": "rgb(var(--color-bg-secondary) / <alpha-value>)",
-                "bg-tertiary": "rgb(var(--color-bg-tertiary) / <alpha-value>)",
-                "bg-elevated": "rgb(var(--color-bg-elevated) / <alpha-value>)",
-                "surface": "rgb(var(--color-surface) / <alpha-value>)",
-                "surface-hover": "rgb(var(--color-surface-hover) / <alpha-value>)",
-                "border": "rgb(var(--color-border) / <alpha-value>)",
-                "border-light": "rgb(var(--color-border-light) / <alpha-value>)",
-                "border-focus": "rgb(var(--color-border-focus) / <alpha-value>)",
-                
-                // Text colors
-                "text": "rgb(var(--color-text) / <alpha-value>)",
-                "text-bright": "rgb(var(--color-text-bright) / <alpha-value>)",
-                "text-muted": "rgb(var(--color-text-muted) / <alpha-value>)",
-                "text-dim": "rgb(var(--color-text-dim) / <alpha-value>)",
-                
-                // Unified accent color - Vibrant teal-green (stays the same across themes)
-                "primary": "#10B981",
-                "primary-hover": "#059669",
-                "primary-dark": "#047857",
-                "primary-light": "#34D399",
-                "primary-muted": "#10B98133",
-                "primary-glow": "#10B98166",
-                
-                // Status colors
-                "status-error": "#EF4444",
-                "status-warning": "#F59E0B",
-                "status-success": "#10B981",
-                "status-info": "#3B82F6",
-            },
-            boxShadow: {
-                // Unified glow effects with primary color
-                'glow': '0 0 20px rgba(16, 185, 129, 0.4)',
-                'glow-sm': '0 0 10px rgba(16, 185, 129, 0.3)',
-                'glow-lg': '0 0 30px rgba(16, 185, 129, 0.5)',
-                'glow-intense': '0 0 40px rgba(16, 185, 129, 0.6)',
-                // Status-specific glow effects
-                'glow-error': '0 0 20px rgba(239, 68, 68, 0.4)',
-                'glow-error-sm': '0 0 10px rgba(239, 68, 68, 0.3)',
-                'glow-error-lg': '0 0 30px rgba(239, 68, 68, 0.5)',
-                'glow-warning': '0 0 20px rgba(245, 158, 11, 0.4)',
-                'glow-warning-sm': '0 0 10px rgba(245, 158, 11, 0.3)',
-                'glow-warning-lg': '0 0 30px rgba(245, 158, 11, 0.5)',
-                // Subtle shadows for depth
-                'card': '0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4)',
-                'card-hover': '0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4)',
-                'elevated': '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)',
-            },
-            animation: {
-                'pulse-primary': 'pulsePrimary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                'slide-in-right': 'slideInRight 0.3s ease-out',
-                'slide-in-bottom': 'slideInBottom 0.3s ease-out',
-                'fade-in': 'fadeIn 0.2s ease-out',
-                'scale-in': 'scaleIn 0.2s ease-out',
-            },
-            keyframes: {
-                pulsePrimary: {
-                    '0%, 100%': {
-                        opacity: '1',
-                    },
-                    '50%': {
-                        opacity: '.7',
-                    },
-                },
-                slideInRight: {
-                    '0%': {
-                        transform: 'translateX(100%)',
-                        opacity: '0',
-                    },
-                    '100%': {
-                        transform: 'translateX(0)',
-                        opacity: '1',
-                    },
-                },
-                slideInBottom: {
-                    '0%': {
-                        transform: 'translateY(100%)',
-                        opacity: '0',
-                    },
-                    '100%': {
-                        transform: 'translateY(0)',
-                        opacity: '1',
-                    },
-                },
-                fadeIn: {
-                    '0%': {
-                        opacity: '0',
-                    },
-                    '100%': {
-                        opacity: '1',
-                    },
-                },
-                scaleIn: {
-                    '0%': {
-                        transform: 'scale(0.95)',
-                        opacity: '0',
-                    },
-                    '100%': {
-                        transform: 'scale(1)',
-                        opacity: '1',
-                    },
-                },
-            },
-        },
-    },
-    plugins: [],
-};
\ No newline at end of file