feat(reader): convert reading progress indicator to Tailwind

- Replace CSS classes with Tailwind utilities
- Use gradient backgrounds with conditional colors
- Add shimmer animation to Tailwind config
- Remove 80+ lines of CSS from reader.css
- Maintain z-index layering (1102) above mobile overlays
- Responsive design with utility classes

src/components/ReadingProgressIndicator.tsx

@@ -13,17 +13,27 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
   showPercentage = true,
   className = ''
 }) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress))
+  
   return (
-    <div className={`reading-progress-indicator ${className}`}>
-      <div className="reading-progress-bar">
+    <div className={`fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.95)] backdrop-blur-md border-t border-white/10 px-4 py-2 flex items-center gap-4 transition-all duration-300 shadow-[0_-4px_12px_rgba(0,0,0,0.3)] ${className}`}>
+      <div className="flex-1 h-1 bg-white/10 rounded-sm overflow-hidden relative">
         <div 
-          className={`reading-progress-fill ${isComplete ? 'complete' : ''}`}
-          style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
-        />
+          className={`h-full rounded-sm transition-all duration-300 relative ${
+            isComplete 
+              ? 'bg-gradient-to-r from-green-400 to-green-600' 
+              : 'bg-gradient-to-r from-indigo-500 to-blue-400'
+          }`}
+          style={{ width: `${clampedProgress}%` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-[shimmer_2s_infinite]" />
+        </div>
       </div>
       {showPercentage && (
-        <div className="reading-progress-text">
-          {isComplete ? '✓ Complete' : `${progress}%`}
+        <div className={`text-sm font-medium min-w-[80px] text-right ${
+          isComplete ? 'text-green-400' : 'text-gray-400'
+        }`}>
+          {isComplete ? '✓ Complete' : `${clampedProgress}%`}
         </div>
       )}
     </div>

src/styles/components/reader.css

@@ -103,90 +103,6 @@
   .reader-header-overlay .reader-title { font-size: 1.5rem; line-height: 1.3; }
 }
 
-/* Reading Progress Indicator */
-.reading-progress-indicator {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1102; /* Above mobile sidepanes (1001) and backdrop (999) */
-  background: rgba(26, 26, 26, 0.95);
-  backdrop-filter: blur(8px);
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.5rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: all 0.3s ease;
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.reading-progress-bar {
-  flex: 1;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
-  overflow: hidden;
-  position: relative;
-}
-
-.reading-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #646cff, #8ab4f8);
-  border-radius: 2px;
-  transition: width 0.3s ease;
-  position: relative;
-}
-
-.reading-progress-fill.complete {
-  background: linear-gradient(90deg, #4ade80, #22c55e);
-}
-
-.reading-progress-fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-.reading-progress-text {
-  font-size: 0.875rem;
-  color: #888;
-  font-weight: 500;
-  min-width: 80px;
-  text-align: right;
-}
-
-.reading-progress-text:contains('✓') {
-  color: #4ade80;
-}
-
-/* Hide progress indicator when not needed */
-.reading-progress-indicator.hidden {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-/* Mobile adjustments */
-@media (max-width: 768px) {
-  .reading-progress-indicator {
-    padding: 0.375rem 0.75rem;
-    gap: 0.75rem;
-  }
-  
-  .reading-progress-text {
-    font-size: 0.813rem;
-    min-width: 60px;
-  }
-}
+/* Reading Progress Indicator - now using Tailwind utilities in component */
 
 

tailwind.config.js

@@ -5,7 +5,14 @@ export default {
     './src/**/*.{ts,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+    },
   },
   plugins: [],
 }