style(ui): unify tab headers layout, typography, and icons (closes #72)

public/index.html

@@ -170,8 +170,12 @@
 
                 <div class="tab-panel" id="tab-downloads">
                     <div class="downloads-container">
-                        <div class="downloads-header">
-                            <div class="downloads-controls">
+                        <div class="downloads-header tab-header">
+                            <div class="tab-header-title">
+                                <h2><span class="tab-header-icon">📥</span> Active Downloads</h2>
+                                <p class="tab-header-subtitle">Track and manage your active media downloads in real-time</p>
+                            </div>
+                            <div class="downloads-controls tab-header-controls">
                                 <label class="download-client-label" for="download-client-filter">Download client:</label>
                                 <div class="download-client-filter" id="download-client-filter">
                                     <button class="download-client-dropdown-btn" id="download-client-dropdown-btn" type="button" aria-expanded="false">
@@ -200,8 +204,12 @@
 
                 <div class="tab-panel hidden" id="tab-requests">
                     <div class="requests-container">
-                        <div class="requests-header">
-                            <div class="requests-controls">
+                        <div class="requests-header tab-header">
+                            <div class="tab-header-title">
+                                <h2><span class="tab-header-icon">📨</span> Requests</h2>
+                                <p class="tab-header-subtitle">Browse, filter, and track requests synced from Ombi</p>
+                            </div>
+                            <div class="requests-controls tab-header-controls">
                                 <!-- Media Type Filter -->
                                 <div class="request-filter" id="request-type-filter">
                                     <label class="request-filter-label">Type:</label>
@@ -286,8 +294,12 @@
 
                 <div class="tab-panel hidden" id="tab-history">
                     <div class="history-container" id="history-container">
-                        <div class="history-header">
-                            <div class="history-controls">
+                        <div class="history-header tab-header">
+                            <div class="tab-header-title">
+                                <h2><span class="tab-header-icon">📜</span> Recently Completed</h2>
+                                <p class="tab-header-subtitle">Review successful imports and troubleshoot failed upgrade attempts</p>
+                            </div>
+                            <div class="history-controls tab-header-controls">
                                 <label class="history-days-label" for="history-days">Last</label>
                                 <input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
                                 <span class="history-days-label">days</span>

public/style.css

@@ -689,15 +689,61 @@ body {
   padding: 0;
 }
 
-/* Downloads header and controls */
-.downloads-header {
+/* Unified Tab Headers (Issue #72) */
+.tab-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+.tab-header-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tab-header-title h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tab-header-icon {
+  font-size: 1.3rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tab-header-subtitle {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.tab-header-controls {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 12px;
   flex-wrap: wrap;
 }
 
+.tab-header, .tab-header-title h2, .tab-header-subtitle {
+  transition: color 0.3s, border-color 0.3s;
+}
+
+.downloads-header {
+  /* Inherits from .tab-header */
+}
+
 .downloads-controls {
   display: flex;
   align-items: center;
@@ -898,11 +944,7 @@ body {
 /* ===== Request Filters ===== */
 
 .requests-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
+  /* Inherits from .tab-header */
 }
 
 .requests-controls {
@@ -1076,18 +1118,7 @@ body {
 }
 
 .history-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-}
-
-.history-header h2 {
-  margin: 0;
-  font-size: 1.2rem;
-  color: var(--text-primary);
-  flex: 1 1 auto;
+  /* Inherits from .tab-header */
 }
 
 .history-controls {
@@ -1134,7 +1165,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   color: var(--text-secondary);
   cursor: pointer;
   user-select: none;
@@ -2237,17 +2268,7 @@ body {
 }
 
 .requests-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-}
-
-.requests-header h2 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 1.5rem;
+  /* Inherits from .tab-header */
 }
 
 .no-requests {