feat: refactor theme, add tailwind-scrollbar, and improve UI components

- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects

components/layout/AppHeader.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Menu, Search, Bell, ChevronRight, Moon, Sun, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useTheme } from '@/components/providers/ThemeProvider';
 import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
 import Logo from '@/components/Logo';
@@ -23,7 +22,7 @@ export function AppHeader() {
         <nav className="flex items-center text-sm font-medium">
           <Link href="/" className="flex items-center gap-2">
             <Logo size={20} className="lg:hidden" />
-            <span className="font-medium transition-colors text-foreground">
+            <span className="font-medium transition-colors text-muted-foreground">
               Kit
             </span>
           </Link>
@@ -37,7 +36,7 @@ export function AppHeader() {
                 <Link 
                   href={href}
                   className={cn(
-                    "capitalize transition-colors text-foreground",
+                    "capitalize transition-colors text-muted-foreground",
                     isLast ? "font-semibold" : "font-medium"
                   )}
                 >
@@ -50,7 +49,6 @@ export function AppHeader() {
       </div>
 
       <div className="flex items-center gap-2">
-        <ThemeToggleComponent />
         <Button 
           variant="ghost" 
           size="icon" 
@@ -62,24 +60,4 @@ export function AppHeader() {
       </div>
     </header>
   );
-}
-
-function ThemeToggleComponent() {
-  const { resolvedTheme, setTheme } = useTheme();
-  
-  return (
-    <Button 
-      variant="ghost" 
-      size="icon"
-      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
-      className="text-muted-foreground hover:text-foreground hover:bg-accent/50"
-      title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
-    >
-      {resolvedTheme === 'dark' ? (
-        <Sun className="h-5 w-5" />
-      ) : (
-        <Moon className="h-5 w-5" />
-      )}
-    </Button>
-  );
-}
+}

components/layout/AppShell.tsx

@@ -13,12 +13,12 @@ interface AppShellProps {
 export function AppShell({ children }: AppShellProps) {
   return (
     <SidebarProvider>
-      <div className="flex h-screen overflow-hidden bg-background text-foreground relative">
+      <div className="flex h-screen overflow-hidden bg-transparent text-foreground relative">
         <AnimatedBackground />
         <AppSidebar />
         <div className="flex-1 flex flex-col min-w-0 relative z-10">
           <AppHeader />
-          <main className="flex-1 overflow-y-auto">
+          <main className="flex-1 overflow-y-auto scrollbar">
             {children}
           </main>
         </div>

components/layout/AppSidebar.tsx

@@ -5,11 +5,6 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { 
   ChevronRight,
-  MousePointer2, 
-  Palette, 
-  Eye, 
-  Languages, 
-  Layers,
   ChevronLeft,
   X
 } from 'lucide-react';
@@ -73,13 +68,13 @@ export function AppSidebar() {
       {/* Mobile Overlay Backdrop */}
       {isOpen && (
         <div 
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden"
+          className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
           onClick={close}
         />
       )}
 
       <aside className={cn(
-        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
+        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/10 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
         isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
         isCollapsed ? "lg:w-20" : "w-64"
       )}>
@@ -106,7 +101,7 @@ export function AppSidebar() {
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto px-4 py-2 space-y-8 mt-4 scrollbar-hide">
+        <nav className="flex-1 overflow-y-auto px-4 py-2 space-y-8 mt-4 overflow-x-hidden">
           {navigation.map((group) => (
             <div key={group.label} className="space-y-2">
               {!isCollapsed && (