feat: modernize UI with gradient design, glass morphism, and enhanced visual appeal

- Add purple/indigo gradient background throughout app
- Implement glass morphism effects on all cards
- Add gradient buttons with smooth hover animations
- Integrate emoji icons for better visual communication
- Enhance typography with improved font stack
- Add loading spinners and smooth transitions
- Improve color scheme with modern purple/indigo palette
- Add glowing shadows and depth effects
- Maintain responsive design and touch-friendly interactions

frontend/src/App.css

@@ -10,6 +10,25 @@
   touch-action: manipulation;
 }
 
+/* Smooth animations */
+* {
+  transition: all 0.2s ease-in-out;
+}
+
+button, input, select, textarea {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Button hover effects */
+button:not(:disabled):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+button:not(:disabled):active {
+  transform: translateY(0);
+}
+
 /* Custom range slider styling for better mobile support */
 input[type="range"] {
   -webkit-appearance: none;
@@ -17,9 +36,10 @@ input[type="range"] {
   width: 100%;
   height: 8px;
   border-radius: 4px;
-  background: #d1d5db;
+  background: linear-gradient(to right, #667eea, #764ba2);
   outline: none;
   cursor: pointer;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
 
 input[type="range"]::-webkit-slider-thumb {
@@ -28,35 +48,39 @@ input[type="range"]::-webkit-slider-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: #2563eb;
+  background: linear-gradient(135deg, #667eea, #764ba2);
   cursor: pointer;
-  transition: background 0.15s ease-in-out;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  transition: all 0.3s ease;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-  background: #1d4ed8;
+  transform: scale(1.2);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
 }
 
 input[type="range"]::-webkit-slider-thumb:active {
-  background: #1e40af;
+  transform: scale(1.1);
 }
 
 input[type="range"]::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: #2563eb;
+  background: linear-gradient(135deg, #667eea, #764ba2);
   cursor: pointer;
   border: none;
-  transition: background 0.15s ease-in-out;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  transition: all 0.3s ease;
 }
 
 input[type="range"]::-moz-range-thumb:hover {
-  background: #1d4ed8;
+  transform: scale(1.2);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
 }
 
 input[type="range"]::-moz-range-thumb:active {
-  background: #1e40af;
+  transform: scale(1.1);
 }
 
 /* Ensure audio controls are touch-friendly on mobile */

frontend/src/App.tsx

@@ -32,6 +32,7 @@ function App() {
     try {
       // Detect roles in the text
       const response = await detectRoles(text)
+      console.log('Detected roles:', response.roles)
       setRoles(response.roles)
       
       // Initialize voice assignments map (empty initially)
@@ -157,15 +158,24 @@ function App() {
   const allRolesAssigned = roles.length > 0 && roles.every(role => voiceAssignments.has(role.id))
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen">
       <div className="container mx-auto py-4 px-4 sm:py-8 sm:px-6 lg:px-8">
-        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-4 sm:mb-6 md:mb-8">
-          Text to Audiobook
-        </h1>
+        {/* Header with gradient text and icon */}
+        <div className="text-center mb-6 sm:mb-10">
+          <div className="inline-block mb-4">
+            <div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto bg-white rounded-2xl shadow-glow flex items-center justify-center">
+              <span className="text-3xl sm:text-4xl">🎧</span>
+            </div>
+          </div>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 drop-shadow-lg">
+            Text to Audiobook
+          </h1>
+          <p className="text-white/90 text-sm sm:text-base">Transform your stories into immersive audio experiences</p>
+        </div>
         
         {error && (
-          <div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-red-100 border border-red-400 text-red-700 rounded text-sm sm:text-base">
-            {error}
+          <div className="max-w-4xl mx-auto mb-4 p-3 sm:p-4 bg-red-50 border-2 border-red-300 text-red-700 rounded-xl shadow-lg text-sm sm:text-base">
+            <span className="font-semibold">⚠️ Error:</span> {error}
           </div>
         )}
         
@@ -186,6 +196,7 @@ function App() {
                 Generation may take several minutes for very long content.
               </div>
             )}
+            {console.log('Rendering VoiceAssignmentSection with roles:', roles, 'allRolesAssigned:', allRolesAssigned)}
             <VoiceAssignmentSection
               roles={roles}
               voiceAssignments={voiceAssignments}
@@ -228,14 +239,20 @@ function App() {
         )}
 
         {isGenerating && isLongText && (
-          <div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center text-sm sm:text-base">
-            Generation may take several minutes for very long content. Please be patient...
+          <div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 glass-effect border-2 border-blue-300 text-blue-800 rounded-xl shadow-glow text-center text-sm sm:text-base">
+            <div className="flex items-center justify-center gap-3">
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-800"></div>
+              <span>Generation may take several minutes for very long content. Please be patient...</span>
+            </div>
           </div>
         )}
 
         {isGeneratingScript && (
-          <div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center text-sm sm:text-base">
-            Generating script preview... This may take a moment.
+          <div className="max-w-4xl mx-auto mt-4 p-3 sm:p-4 glass-effect border-2 border-blue-300 text-blue-800 rounded-xl shadow-glow text-center text-sm sm:text-base">
+            <div className="flex items-center justify-center gap-3">
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-800"></div>
+              <span>Generating script preview... This may take a moment.</span>
+            </div>
           </div>
         )}
       </div>

frontend/src/components/AudioPlayerSection.tsx

@@ -8,29 +8,63 @@ export default function AudioPlayerSection({
   onDownload
 }: AudioPlayerSectionProps) {
   return (
-    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
-      <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Your Audiobook is Ready!</h2>
+    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
+      {/* Success Header */}
+      <div className="text-center mb-6">
+        <div className="inline-block mb-4">
+          <div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl shadow-lg flex items-center justify-center animate-bounce">
+            <span className="text-3xl sm:text-4xl">🎉</span>
+          </div>
+        </div>
+        <h2 className="text-2xl sm:text-3xl font-bold gradient-text mb-2">
+          Your Audiobook is Ready!
+        </h2>
+        <p className="text-gray-600 text-sm sm:text-base">
+          Listen below or download to enjoy offline
+        </p>
+      </div>
       
-      <div className="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-4 sm:mb-6">
-        <h3 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">Listen to your audiobook</h3>
+      {/* Audio Player Card */}
+      <div className="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl shadow-lg p-5 sm:p-8 mb-6 border-2 border-purple-200">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
+            <span className="text-xl">🎧</span>
+          </div>
+          <h3 className="text-lg sm:text-xl font-bold text-gray-800">Listen Now</h3>
+        </div>
+        
         <audio
           controls
           src={audioUrl}
-          className="w-full min-h-[44px]"
+          className="w-full min-h-[44px] rounded-xl shadow-md"
           preload="metadata"
+          style={{
+            filter: 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))'
+          }}
         >
           Your browser does not support the audio element.
         </audio>
       </div>
 
+      {/* Download Button */}
       <div className="flex justify-center">
         <button
           onClick={onDownload}
-          className="w-full sm:w-auto px-6 py-3 min-h-[44px] bg-green-600 hover:bg-green-700 active:bg-green-800 text-white font-semibold rounded-lg transition-colors cursor-pointer touch-manipulation"
+          className="w-full sm:w-auto px-8 py-4 min-h-[44px] bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-bold rounded-xl transition-all cursor-pointer touch-manipulation shadow-lg text-base sm:text-lg"
         >
-          Download audiobook
+          <span className="flex items-center justify-center gap-3">
+            <span className="text-xl">⬇️</span>
+            Download Audiobook
+          </span>
         </button>
       </div>
+
+      {/* Success Message */}
+      <div className="mt-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 text-green-800 rounded-xl shadow-sm text-center text-sm sm:text-base">
+        <p className="font-semibold">
+          ✅ Your audiobook has been successfully generated!
+        </p>
+      </div>
     </div>
   );
 }

frontend/src/components/ScriptReviewSection.tsx

@@ -22,35 +22,40 @@ export default function ScriptReviewSection({
   };
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
-      <h2 className="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">Review Script</h2>
+    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+          <span className="text-xl">📋</span>
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold gradient-text">Review Script</h2>
+      </div>
       
-      <p className="text-sm sm:text-base text-gray-600 mb-4 sm:mb-6">
+      <p className="text-sm sm:text-base text-gray-700 mb-6 bg-purple-50 p-3 rounded-xl border-2 border-purple-100">
         Review the AI-generated script and adjust speaker assignments as needed.
       </p>
 
       {/* Script Segments */}
-      <div className="space-y-4 sm:space-y-6 mb-6 sm:mb-8">
+      <div className="space-y-4 sm:space-y-5 mb-6 sm:mb-8">
         {segments.map((segment, index) => (
           <div 
             key={segment.id} 
-            className="border-2 border-gray-300 rounded-lg p-3 sm:p-4 bg-white shadow-sm"
+            className="border-2 border-purple-200 rounded-xl p-4 sm:p-5 bg-white shadow-md hover:shadow-lg transition-all"
           >
             {/* Segment Header */}
             <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-3">
-              <span className="text-xs sm:text-sm font-semibold text-gray-500">
-                Segment {index + 1}
+              <span className="inline-flex items-center justify-center w-20 px-2 py-1 text-xs sm:text-sm font-bold text-purple-700 bg-purple-100 rounded-lg">
+                #{index + 1}
               </span>
               
               {/* Speaker Dropdown */}
               <div className="flex items-center gap-2 flex-1">
-                <label className="text-xs sm:text-sm font-medium text-gray-700 whitespace-nowrap">
-                  Speaker:
+                <label className="text-xs sm:text-sm font-semibold text-gray-700 whitespace-nowrap">
+                  🎤 Speaker:
                 </label>
                 <select
                   value={segment.speaker}
                   onChange={(e) => handleSpeakerChange(segment.id, e.target.value)}
-                  className="flex-1 p-2 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
+                  className="flex-1 p-3 min-h-[44px] border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm"
                   disabled={isGenerating}
                 >
                   {roles.map((role) => (
@@ -63,7 +68,7 @@ export default function ScriptReviewSection({
             </div>
 
             {/* Segment Text */}
-            <div className="w-full min-h-[80px] p-3 border-2 border-gray-200 rounded-lg bg-gray-50 text-sm sm:text-base whitespace-pre-wrap">
+            <div className="w-full min-h-[80px] p-4 border-2 border-purple-100 rounded-xl bg-gradient-to-br from-purple-50 to-indigo-50 text-sm sm:text-base whitespace-pre-wrap shadow-inner">
               {segment.text}
             </div>
           </div>
@@ -75,10 +80,10 @@ export default function ScriptReviewSection({
         <button
           onClick={onSkipReview}
           disabled={isGenerating}
-          className={`w-full sm:w-auto px-6 py-3 min-h-[44px] rounded-lg font-semibold transition-colors touch-manipulation ${
+          className={`w-full sm:w-auto px-6 py-4 min-h-[44px] rounded-xl font-semibold transition-all touch-manipulation shadow-lg ${
             isGenerating
-              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
-              : 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700 cursor-pointer'
+              ? 'bg-gray-300 text-gray-500 cursor-not-allowed opacity-60'
+              : 'bg-gradient-to-r from-gray-500 to-gray-600 text-white hover:from-gray-600 hover:to-gray-700 cursor-pointer'
           }`}
         >
           Skip Review
@@ -87,20 +92,31 @@ export default function ScriptReviewSection({
         <button
           onClick={onGenerate}
           disabled={isGenerating}
-          className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
+          className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
             isGenerating
-              ? 'bg-gray-400 cursor-not-allowed'
-              : 'bg-green-600 hover:bg-green-700 active:bg-green-800 cursor-pointer'
+              ? 'bg-gray-400 cursor-not-allowed opacity-60'
+              : 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 cursor-pointer'
           }`}
         >
-          {isGenerating ? 'Generating...' : 'Generate Audiobook'}
+          {isGenerating ? (
+            <span className="flex items-center justify-center gap-2">
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+              Generating...
+            </span>
+          ) : (
+            <span className="flex items-center justify-center gap-2">
+              ✨ Generate Audiobook
+            </span>
+          )}
         </button>
       </div>
 
       {/* Info Message */}
       {!isGenerating && (
-        <div className="mt-4 sm:mt-6 p-3 sm:p-4 bg-blue-50 border border-blue-200 text-blue-800 rounded text-sm sm:text-base">
-          <p className="font-semibold mb-1">💡 Tip:</p>
+        <div className="mt-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 text-blue-800 rounded-xl shadow-sm text-sm sm:text-base">
+          <p className="font-bold mb-2 flex items-center gap-2">
+            <span className="text-lg">💡</span> Pro Tip:
+          </p>
           <p>
             Review the AI-generated speaker assignments and make any necessary corrections before generating the audiobook.
           </p>

frontend/src/components/TextInputSection.tsx

@@ -36,35 +36,50 @@ export default function TextInputSection({
   const isButtonDisabled = disabled || isLoading || text.trim() === '';
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
-      <h2 className="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">Enter Your Text</h2>
+    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+          <span className="text-xl">📝</span>
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold gradient-text">Enter Your Text</h2>
+      </div>
       
       <div className="mb-4">
         <textarea
           value={text}
           onChange={handleTextChange}
           placeholder="Enter your text here. Use patterns like 'Name:' or '[Name]' to mark different speakers..."
-          className="w-full h-64 sm:h-80 md:h-96 p-3 sm:p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-y text-sm sm:text-base touch-manipulation"
+          className="w-full h-64 sm:h-80 md:h-96 p-4 sm:p-5 border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none resize-y text-sm sm:text-base touch-manipulation shadow-sm"
           disabled={disabled || isLoading}
         />
       </div>
 
       {showValidation && text.trim() === '' && (
-        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm sm:text-base">
-          Please enter some text before proceeding.
+        <div className="mb-4 p-3 sm:p-4 bg-red-50 border-2 border-red-300 text-red-700 rounded-xl shadow-sm text-sm sm:text-base">
+          <span className="font-semibold">⚠️</span> Please enter some text before proceeding.
         </div>
       )}
 
       <button
         onClick={handleNext}
         disabled={isButtonDisabled}
-        className={`w-full sm:w-auto px-6 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
+        className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
           isButtonDisabled
-            ? 'bg-gray-400 cursor-not-allowed'
-            : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 cursor-pointer'
+            ? 'bg-gray-400 cursor-not-allowed opacity-60'
+            : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 cursor-pointer'
         }`}
       >
-        {isLoading ? 'Processing...' : 'Next: Assign voices'}
+        {isLoading ? (
+          <span className="flex items-center justify-center gap-2">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+            Processing...
+          </span>
+        ) : (
+          <span className="flex items-center justify-center gap-2">
+            Next: Assign voices
+            <span>→</span>
+          </span>
+        )}
       </button>
     </div>
   );

frontend/src/components/VoiceAssignmentSection.tsx

@@ -159,22 +159,29 @@ export default function VoiceAssignmentSection({
   const isGenerateDisabled = !allRolesAssigned || isGenerating;
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
-      <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Assign voices to roles</h2>
+    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+          <span className="text-xl">🎤</span>
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold gradient-text">Assign Voices to Roles</h2>
+      </div>
 
       {/* Role-to-Voice Mapping Section */}
       <div className="mb-6 sm:mb-8">
-        <h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Voice Assignments</h3>
+        <h3 className="text-lg sm:text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
+          <span>👥</span> Voice Assignments
+        </h3>
         <div className="space-y-3 sm:space-y-4">
           {roles.map((role) => (
-            <div key={role.id} className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-              <label className="font-medium text-gray-700 text-sm sm:text-base sm:w-40">
+            <div key={role.id} className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100 hover:border-purple-300 transition-all">
+              <label className="font-semibold text-gray-700 text-sm sm:text-base sm:w-40">
                 {role.label}:
               </label>
               <select
                 value={voiceAssignments.get(role.id) || ''}
                 onChange={(e) => handleVoiceSelect(role.id, e.target.value)}
-                className="flex-1 p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
+                className="flex-1 p-3 min-h-[44px] border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm"
               >
                 <option value="">Select a voice...</option>
                 {KOKORO_VOICES.map((voice) => (
@@ -189,12 +196,14 @@ export default function VoiceAssignmentSection({
       </div>
 
       {/* Language Selector */}
-      <div className="mb-6">
-        <h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Language</h3>
+      <div className="mb-6 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100">
+        <h3 className="text-lg sm:text-xl font-semibold mb-3 text-gray-800 flex items-center gap-2">
+          <span>🌍</span> Language
+        </h3>
         <select
           value={language}
           onChange={handleLanguageSelect}
-          className="w-full p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
+          className="w-full p-3 min-h-[44px] border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none text-sm sm:text-base touch-manipulation bg-white shadow-sm"
         >
           {LANGUAGES.map((lang) => (
             <option key={lang.code} value={lang.code}>
@@ -205,10 +214,12 @@ export default function VoiceAssignmentSection({
       </div>
 
       {/* Speed Slider */}
-      <div className="mb-6 sm:mb-8">
-        <h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Playback Speed</h3>
-        <div className="flex items-center gap-2 sm:gap-4">
-          <span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">0.5x</span>
+      <div className="mb-6 sm:mb-8 bg-white p-4 rounded-xl shadow-sm border-2 border-purple-100">
+        <h3 className="text-lg sm:text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2">
+          <span>⚡</span> Playback Speed
+        </h3>
+        <div className="flex items-center gap-3 sm:gap-4">
+          <span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12 font-medium">0.5x</span>
           <input
             type="range"
             min="0.5"
@@ -218,10 +229,12 @@ export default function VoiceAssignmentSection({
             onChange={handleSpeedChange}
             className="flex-1 h-8 sm:h-auto touch-manipulation"
           />
-          <span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">1.5x</span>
-          <span className="font-semibold text-gray-800 w-12 sm:w-16 text-center text-sm sm:text-base">
-            {speed.toFixed(1)}x
-          </span>
+          <span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12 font-medium">1.5x</span>
+          <div className="w-16 sm:w-20 text-center">
+            <span className="font-bold text-purple-600 text-base sm:text-lg bg-purple-50 px-3 py-1 rounded-lg">
+              {speed.toFixed(1)}x
+            </span>
+          </div>
         </div>
       </div>
 
@@ -230,34 +243,46 @@ export default function VoiceAssignmentSection({
         <button
           onClick={onGenerate}
           disabled={isGenerateDisabled}
-          className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
+          className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
             isGenerateDisabled
-              ? 'bg-gray-400 cursor-not-allowed'
-              : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 cursor-pointer'
+              ? 'bg-gray-400 cursor-not-allowed opacity-60'
+              : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 cursor-pointer'
           }`}
         >
-          {isGenerating ? 'Generating Script...' : 'Next: Review Script'}
+          {isGenerating ? (
+            <span className="flex items-center justify-center gap-2">
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+              Generating Script...
+            </span>
+          ) : (
+            <span className="flex items-center justify-center gap-2">
+              Next: Review Script
+              <span>→</span>
+            </span>
+          )}
         </button>
         
         {onSkipReview && (
           <button
             onClick={onSkipReview}
             disabled={isGenerateDisabled}
-            className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
+            className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
               isGenerateDisabled
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-green-600 hover:bg-green-700 active:bg-green-800 cursor-pointer'
+                ? 'bg-gray-400 cursor-not-allowed opacity-60'
+                : 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 cursor-pointer'
             }`}
           >
-            Skip Review & Generate
+            <span className="flex items-center justify-center gap-2">
+              ⚡ Skip Review & Generate
+            </span>
           </button>
         )}
       </div>
 
       {/* Validation Message */}
       {!allRolesAssigned && !isGenerating && (
-        <div className="mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-center text-sm sm:text-base">
-          Please assign voices to all roles before generating the audiobook.
+        <div className="mt-4 p-4 bg-yellow-50 border-2 border-yellow-300 text-yellow-800 rounded-xl text-center text-sm sm:text-base shadow-sm">
+          <span className="font-semibold">⚠️</span> Please assign voices to all roles before generating the audiobook.
         </div>
       )}
     </div>

frontend/src/index.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
   font-weight: 400;
 }
 
@@ -12,4 +12,25 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-attachment: fixed;
+}
+
+@layer utilities {
+  .glass-effect {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  
+  .gradient-text {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  .shadow-glow {
+    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
+  }
 }