Apply pill tab style across all portal pages (team, client, external)

src/pages/external/MyRequests.jsx

@@ -204,26 +204,17 @@ export default function ExternalMyRequests() {
         </div>
       ) : (
         <div>
-          <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-            <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-              {tabList.map((tab, index) => (
-                <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-                  {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-                  <button
-                    type="button"
-                    onClick={() => setActiveTab(tab.id)}
-                    style={{
-                      background: 'none', border: 'none', padding: 0, margin: 0, cursor: 'pointer',
-                      color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                      font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
-                    }}
-                  >
-                    {tab.label}
-                    <span className="request-company-count" style={{ marginLeft: 6 }}>{tab.groups.length}</span>
-                  </button>
-                </span>
-              ))}
-            </div>
+          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {tabList.map(tab => (
+              <button
+                key={tab.id}
+                type="button"
+                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label} ({tab.groups.length})
+              </button>
+            ))}
           </div>
 
           {currentGroups.length === 0 ? (