Revamp UI styles and component theming

Visual refresh across multiple views: increased max layout widths (1200/1600 → 1920), adjusted typographic scale, and updated component styling for a more modern, cohesive look. Changes include backdrop-blur, softer borders (reduced border opacity), gradients for accents, rounded-xl corners, hover/transition improvements, and refined spacing for Footer, AddMediaView, BrowseView, CastDetailView, CastView, and various shared components. No functional logic changes — purely presentational updates to improve spacing, responsiveness, and visual polish.

src/components/ImporterView.tsx

@@ -341,7 +341,7 @@ export default function ImporterView() {
   };
 
   return (
-    <div className="pt-24 pb-12 px-6 max-w-[1600px] mx-auto">
+    <div className="pt-24 pb-12 px-6 max-w-[1920px] mx-auto">
       {/* Header */}
       <div className="flex items-center justify-between mb-8">
         <div className="flex items-center gap-4">
@@ -349,12 +349,12 @@ export default function ImporterView() {
             variant="ghost"
             size="icon"
             onClick={() => navigate('/')}
-            className="text-muted-foreground hover:text-[#6d28d9]"
+            className="text-muted-foreground hover:text-[#6d28d9] hover:bg-muted/50 rounded-xl transition-all duration-300"
           >
             <ArrowLeft size={20} />
           </Button>
           <div>
-            <h1 className="text-2xl font-black text-foreground">Media Importers</h1>
+            <h1 className="text-4xl font-black text-foreground mb-1">Media Importers</h1>
             <p className="text-sm text-muted-foreground font-medium">Import media from external platforms</p>
           </div>
         </div>
@@ -364,7 +364,7 @@ export default function ImporterView() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
         {/* XBVR Importer Card */}
         {xbvrConfig.url && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
@@ -433,7 +433,7 @@ export default function ImporterView() {
 
         {/* StashAPP Importer Card */}
         {stashappConfig.url && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
@@ -513,7 +513,7 @@ export default function ImporterView() {
 
         {/* StashAPP Actor Updater Card */}
         {stashappConfig.url && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
@@ -571,7 +571,7 @@ export default function ImporterView() {
 
         {/* Playnite Importer Card */}
         {playniteConfig.ip && playniteConfig.apiToken && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
@@ -662,7 +662,7 @@ export default function ImporterView() {
 
         {/* Jellyfin Importer Card */}
         {jellyfinConfig.url && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
@@ -844,7 +844,7 @@ export default function ImporterView() {
 
         {/* Jellyfin Cleanup Card */}
         {jellyfinConfig.url && (
-          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6 hover:border-[#6d28d9]/50 hover:shadow-lg hover:shadow-[#6d28d9]/10 transition-all duration-300">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
@@ -937,20 +937,20 @@ export default function ImporterView() {
 
       {/* Progress Section */}
       {progress.stage !== 'idle' && (
-        <div className="bg-card border border-border rounded-xl p-6">
+        <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               {progress.stage === 'complete' ? (
-                <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
-                  <CheckCircle className="text-green-600" size={20} />
+                <div className="w-10 h-10 bg-green-500/10 rounded-full flex items-center justify-center border border-green-500/30">
+                  <CheckCircle className="text-green-500" size={20} />
                 </div>
               ) : progress.stage === 'error' ? (
-                <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
-                  <XCircle className="text-red-600" size={20} />
+                <div className="w-10 h-10 bg-red-500/10 rounded-full flex items-center justify-center border border-red-500/30">
+                  <XCircle className="text-red-500" size={20} />
                 </div>
               ) : (
-                <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
-                  <Loader2 className="text-muted-foreground animate-spin" size={20} />
+                <div className="w-10 h-10 bg-purple-500/10 rounded-full flex items-center justify-center border border-purple-500/30">
+                  <Loader2 className="text-purple-500 animate-spin" size={20} />
                 </div>
               )}
               <div>
@@ -968,7 +968,7 @@ export default function ImporterView() {
                 variant="outline"
                 size="sm"
                 onClick={resetImport}
-                className="gap-2 font-bold border-border"
+                className="gap-2 font-bold border-border/50 hover:border-[#6d28d9]/50 transition-all duration-300"
               >
                 <RefreshCw size={16} />
                 Reset
@@ -983,7 +983,7 @@ export default function ImporterView() {
                 <div
                   className={cn(
                     "h-full transition-all duration-300 ease-out",
-                    progress.stage === 'error' ? "bg-red-500" : "bg-[#6d28d9]"
+                    progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#8b5cf6]"
                   )}
                   style={{ width: `${getProgressPercentage()}%` }}
                 />
@@ -997,9 +997,9 @@ export default function ImporterView() {
 
           {/* Stats */}
           <div className="grid grid-cols-3 gap-4 mb-6">
-            <div className="bg-muted rounded-lg p-4">
+            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
               <div className="flex items-center gap-2 mb-2">
-                <Film size={16} className="text-muted-foreground" />
+                <Film size={16} className="text-[#6d28d9]" />
                 <span className="text-xs font-bold text-muted-foreground">
                   {(progress as any).gamesImported !== undefined ? 'Games' : 
                    (progress as any).moviesImported !== undefined ? 'Movies' : 
@@ -1014,16 +1014,16 @@ export default function ImporterView() {
                  (progress as any).musicImported !== undefined ? (progress as any).musicImported : progress.videosImported}
               </p>
             </div>
-            <div className="bg-muted rounded-lg p-4">
+            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
               <div className="flex items-center gap-2 mb-2">
-                <Users size={16} className="text-muted-foreground" />
+                <Users size={16} className="text-[#6d28d9]" />
                 <span className="text-xs font-bold text-muted-foreground">{(progress as any).castImported !== undefined ? 'Cast' : 'Actors'}</span>
               </div>
               <p className="text-2xl font-black text-foreground">{(progress as any).castImported !== undefined ? (progress as any).castImported : progress.actorsImported}</p>
             </div>
-            <div className="bg-muted rounded-lg p-4">
+            <div className="bg-muted/50 backdrop-blur-sm rounded-xl p-4 border border-border/50">
               <div className="flex items-center gap-2 mb-2">
-                <AlertCircle size={16} className="text-muted-foreground" />
+                <AlertCircle size={16} className="text-red-500" />
                 <span className="text-xs font-bold text-muted-foreground">Errors</span>
               </div>
               <p className="text-2xl font-black text-foreground">{progress.errors.length}</p>
@@ -1034,7 +1034,7 @@ export default function ImporterView() {
           {importLog.length > 0 && (
             <div
               ref={logContainerRef}
-              className="bg-zinc-900 rounded-lg p-4 max-h-64 overflow-y-auto"
+              className="bg-zinc-900/90 backdrop-blur-sm rounded-xl p-4 max-h-64 overflow-y-auto border border-border/50"
             >
               <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">
                 {importLog.join('\n')}
@@ -1045,10 +1045,10 @@ export default function ImporterView() {
           {/* Errors */}
           {progress.errors.length > 0 && (
             <div className="mt-4">
-              <h4 className="text-sm font-bold text-red-600 mb-2">Errors</h4>
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3 max-h-32 overflow-y-auto">
+              <h4 className="text-sm font-bold text-red-500 mb-2">Errors</h4>
+              <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 max-h-32 overflow-y-auto backdrop-blur-sm">
                 {progress.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-red-700 font-medium mb-1">
+                  <p key={index} className="text-xs text-red-500 font-medium mb-1">
                     • {error}
                   </p>
                 ))}