Update tab styling to match whyrating-brand

Change from underline-style tabs to rounded-top pill tabs:
- Use bg-slate-100/dark:bg-stone-800 for active state
- Remove border-b-2 underline in favor of rounded-t-lg
- Match px-5 py-3 padding from brand site

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Header.tsx

@@ -70,15 +70,15 @@ export function Header({ activeTab, onTabChange, tabs }: HeaderProps) {
         </div>
 
         {/* Tabs */}
-        <nav className="flex gap-1 -mb-px">
+        <nav className="flex gap-1 mt-2">
           {tabs.map(tab => (
             <button
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-none cursor-pointer rounded-t-lg transition-all whitespace-nowrap ${
                 activeTab === tab.id
-                  ? 'border-slate-900 dark:border-stone-100 text-slate-900 dark:text-stone-100'
-                  : 'border-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300 hover:border-slate-300 dark:hover:border-stone-700'
+                  ? 'bg-slate-100 dark:bg-stone-800 text-slate-900 dark:text-stone-50'
+                  : 'bg-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300'
               }`}
             >
               <Icon name={tab.icon} size={16} />