feat: create professional, polished UI with perfect spacing

- Add generous padding and spacing throughout (p-10, p-12)
- Constrain content width with max-w-4xl and max-w-5xl
- Increase font sizes for better hierarchy (text-3xl, text-lg)
- Add gradient backgrounds to cards and elements
- Implement smooth transitions and hover states
- Create professional progress stepper with labels
- Add shadow effects with color-matched glows
- Increase button padding and font sizes
- Add gradient borders on hover
- Implement proper visual breathing room
- Create polished, premium aesthetic
- Add smooth cubic-bezier transitions
- Improve form input styling with focus rings
- Create professional card hover effects

frontend/src/components/TextInputSection.tsx

@@ -36,56 +36,58 @@ export default function TextInputSection({
   const isButtonDisabled = disabled || isLoading || text.trim() === '';
 
   return (
-    <div className="card-modern p-8">
-      <div className="mb-6">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">Enter Your Text</h2>
-        <p className="text-gray-600">Paste or type your story below. Use patterns like "Name:" to mark different speakers.</p>
-      </div>
-      
-      <div className="mb-6 relative">
-        <textarea
-          value={text}
-          onChange={handleTextChange}
-          placeholder="Example:
+    <div className="max-w-4xl mx-auto">
+      <div className="card-modern p-10 sm:p-12">
+        <div className="mb-10">
+          <h2 className="text-3xl font-bold text-gray-900 mb-3">Enter Your Text</h2>
+          <p className="text-lg text-gray-600">Paste or type your story below. Use patterns like "Name:" to mark different speakers.</p>
+        </div>
+        
+        <div className="mb-8 relative">
+          <textarea
+            value={text}
+            onChange={handleTextChange}
+            placeholder="Example:
 
 Sarah: Hello! How are you today?
 John: I'm doing great, thanks for asking!
 Sarah: That's wonderful to hear."
-          className="w-full h-80 p-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none resize-y text-base leading-relaxed"
-          disabled={disabled || isLoading}
-        />
-        <div className="absolute bottom-3 right-3 text-xs text-gray-500 bg-white px-2 py-1 rounded-md border border-gray-200">
-          {text.length} characters
-        </div>
-      </div>
-
-      {showValidation && text.trim() === '' && (
-        <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl">
-          <div className="flex items-center gap-2">
-            <span>⚠️</span>
-            <p className="font-medium">Please enter some text before proceeding.</p>
+            className="w-full h-96 p-6 border-2 border-gray-200 rounded-2xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 focus:outline-none resize-y text-base leading-relaxed transition-all duration-200 bg-gray-50 focus:bg-white"
+            disabled={disabled || isLoading}
+          />
+          <div className="absolute bottom-5 right-5 text-sm text-gray-500 bg-white px-4 py-2 rounded-xl border border-gray-200 shadow-sm font-medium">
+            {text.length} characters
           </div>
         </div>
-      )}
 
-      <div className="flex justify-end">
-        <button
-          onClick={handleNext}
-          disabled={isButtonDisabled}
-          className="btn-primary"
-        >
-          {isLoading ? (
-            <span className="flex items-center gap-2">
-              <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
-              Processing...
-            </span>
-          ) : (
-            <span className="flex items-center gap-2">
-              Continue
-              <span>→</span>
-            </span>
-          )}
-        </button>
+        {showValidation && text.trim() === '' && (
+          <div className="mb-8 p-5 bg-red-50 border-2 border-red-200 text-red-700 rounded-2xl">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">⚠️</span>
+              <p className="font-semibold">Please enter some text before proceeding.</p>
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-end">
+          <button
+            onClick={handleNext}
+            disabled={isButtonDisabled}
+            className="btn-primary"
+          >
+            {isLoading ? (
+              <span className="flex items-center gap-3">
+                <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
+                Processing...
+              </span>
+            ) : (
+              <span className="flex items-center gap-3">
+                Continue
+                <span className="text-lg">→</span>
+              </span>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );