feat: implement Library page with subscription management and synchronization features

frontend/src/components/Header.tsx

@@ -20,7 +20,7 @@ export default function Header({ title, subtitle, user, onLogout }: HeaderProps)
           <div className="inline-block px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-bold text-[var(--accent-primary)] uppercase tracking-widest mb-3">
              {subtitle || "Exploration Audio"}
           </div>
-          <h1 className="text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-balance leading-tight">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-balance leading-tight">
             {title}
           </h1>
         </div>

frontend/src/components/Navigation.tsx

@@ -60,7 +60,7 @@ export default function Navigation() {
       </nav>
 
       {/* Mobile Bottom Nav */}
-      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)]">
+      <nav className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:hidden z-50 h-20 premium-glass flex items-center justify-around px-2 sm:px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)] max-w-lg mx-auto">
         {navItems.map((item) => {
           const MobileIcon = item.icon;
           const active = isActive(item.path);