Upgrade to Tailwind v4

src/components/CopyableInput.tsx

@@ -16,7 +16,7 @@ export function CopyableInput({
       <InputLabel>{label}</InputLabel>
       <div className="flex w-full">
         <input
-          className="flex-grow px-3 py-2 text-xs border border-r-0 rounded-l text-stone-900 dark:text-stone-100 bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600"
+          className="grow px-3 py-2 text-xs border border-r-0 rounded-l text-stone-900 dark:text-stone-100 bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600"
           value={value}
           readOnly
         />

src/components/DownloadButton.tsx

@@ -8,7 +8,7 @@ export default function DownloadButton({
   return (
     <button
       onClick={onClick}
-      className="h-12 px-4 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="h-12 px-4 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Download
     </button>

src/components/ProgressBar.tsx

@@ -18,8 +18,8 @@ export default function ProgressBar({
       <div
         className={`h-full ${
           isComplete
-            ? 'bg-gradient-to-b from-green-500 to-green-600'
+            ? 'bg-linear-to-b from-green-500 to-green-600'
-            : 'bg-gradient-to-b from-blue-500 to-blue-600'
+            : 'bg-linear-to-b from-blue-500 to-blue-600'
         } transition-all duration-300 ease-in-out`}
         style={{ width: `${percentage}%` }}
       />

src/components/ReportTermsViolationButton.tsx

@@ -128,7 +128,7 @@ export default function ReportTermsViolationButton({
               <button
                 disabled={isReporting}
                 onClick={handleReport}
-                className={`px-4 py-2 bg-gradient-to-b from-red-500 to-red-600 text-white rounded-md border border-red-600 shadow-sm text-shadow disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:from-red-500 enabled:hover:to-red-700 enabled:hover:shadow-md transition-all duration-200`}
+                className={`px-4 py-2 bg-linear-to-b from-red-500 to-red-600 text-white rounded-md border border-red-600 shadow-sm text-shadow disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:from-red-500 enabled:hover:to-red-700 enabled:hover:shadow-md transition-all duration-200`}
                 aria-label="Confirm report"
               >
                 {isReporting ? 'Reporting...' : 'Report'}

src/components/StartButton.tsx

@@ -8,7 +8,7 @@ export default function StartButton({
   return (
     <button
       onClick={onClick}
-      className="px-4 py-2 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="px-4 py-2 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Start
     </button>

src/components/UnlockButton.tsx

@@ -8,7 +8,7 @@ export default function UnlockButton({
   return (
     <button
       onClick={onClick}
-      className="px-4 py-2 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="px-4 py-2 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Unlock
     </button>

src/styles.css

@@ -1,6 +1,4 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
 html {
   height: 100dvh;