From 7898a1d461231dbe228f8b719dee3bc2b4b1513d Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Thu, 4 Sep 2025 21:15:44 +0200
Subject: [PATCH] Implement cool & minimal light theme

- Replace warm & cozy theme with cool & minimal aesthetic
- Use clean slate grays (#f8fafc, #f1f5f9, #e2e8f0) for backgrounds
- Apply sophisticated blue accents (#3b82f6, #1d4ed8) for interactive elements
- Maintain high contrast text colors for excellent readability
- Preserve glass-morphism effects with cool-tinted shadows
- Create professional, corporate-friendly color scheme
- Ensure minimal visual noise with subtle borders and clean typography
---
 public/styles/theme.css | 383 ++++++++++++++++------------------------
 1 file changed, 150 insertions(+), 233 deletions(-)

diff --git a/public/styles/theme.css b/public/styles/theme.css
index b628f80..8b75a88 100644
--- a/public/styles/theme.css
+++ b/public/styles/theme.css
@@ -29,32 +29,32 @@
     --backdrop-blur: blur(10px);
 }
 
-/* Nord Frost Light Theme with Glass-Morphism */
+/* Cool & Minimal Light Theme with Glass-Morphism */
 [data-theme="light"] {
-    --bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 50%, #81a1c1 100%);
-    --bg-secondary: rgba(143, 188, 187, 0.15);
-    --bg-tertiary: rgba(143, 188, 187, 0.1);
-    --bg-hover: rgba(143, 188, 187, 0.25);
-    --bg-overlay: rgba(0, 0, 0, 0.4);
+    --bg-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
+    --bg-secondary: rgba(255, 255, 255, 0.1);
+    --bg-tertiary: rgba(255, 255, 255, 0.05);
+    --bg-hover: rgba(255, 255, 255, 0.15);
+    --bg-overlay: rgba(0, 0, 0, 0.3);
     
-    --text-primary: #2e3440;
-    --text-secondary: #3b4252;
-    --text-tertiary: #434c5e;
-    --text-muted: #4c566a;
+    --text-primary: #1e293b;
+    --text-secondary: #475569;
+    --text-tertiary: #64748b;
+    --text-muted: #94a3b8;
     
-    --border-primary: rgba(143, 188, 187, 0.2);
-    --border-secondary: rgba(143, 188, 187, 0.3);
-    --border-hover: rgba(143, 188, 187, 0.4);
+    --border-primary: rgba(148, 163, 184, 0.2);
+    --border-secondary: rgba(148, 163, 184, 0.3);
+    --border-hover: rgba(148, 163, 184, 0.4);
     
-    --accent-primary: #88c0d0;
-    --accent-secondary: #81a1c1;
-    --accent-warning: #d08770;
-    --accent-error: #bf616a;
-    --accent-success: #a3be8c;
+    --accent-primary: #3b82f6;
+    --accent-secondary: #1d4ed8;
+    --accent-warning: #f59e0b;
+    --accent-error: #dc2626;
+    --accent-success: #059669;
     
-    --shadow-primary: 0 8px 32px rgba(143, 188, 187, 0.2);
-    --shadow-secondary: 0 4px 16px rgba(143, 188, 187, 0.1);
-    --shadow-hover: 0 12px 40px rgba(143, 188, 187, 0.3);
+    --shadow-primary: 0 8px 32px rgba(148, 163, 184, 0.1);
+    --shadow-secondary: 0 4px 16px rgba(148, 163, 184, 0.05);
+    --shadow-hover: 0 12px 40px rgba(148, 163, 184, 0.15);
     
     --backdrop-blur: blur(20px);
 }
@@ -147,85 +147,84 @@
     }
 }
 
-/* Nord Frost Glass-Morphism Effects */
+/* Cool & Minimal Glass-Morphism Effects */
 [data-theme="light"] .main-navigation {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(25px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 8px 32px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    box-shadow: 0 8px 32px rgba(148, 163, 184, 0.1);
 }
 
 [data-theme="light"] .nav-tab {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(15px);
-    color: var(--text-primary);
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: none;
+    color: var(--text-secondary);
 }
 
 [data-theme="light"] .nav-tab:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.2);
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid transparent;
     color: var(--text-primary);
 }
 
 [data-theme="light"] .nav-tab.active {
-    background: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.2);
     border: 1px solid var(--accent-secondary);
     color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
 }
 
 [data-theme="light"] .cluster-status {
-    background: linear-gradient(135deg, rgba(163, 190, 140, 0.2) 0%, rgba(163, 190, 140, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
     backdrop-filter: blur(15px);
-    border: 1px solid rgba(163, 190, 140, 0.3);
-    box-shadow: 0 4px 16px rgba(163, 190, 140, 0.2);
-    color: #a3be8c;
+    border: 1px solid rgba(5, 150, 105, 0.25);
+    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.1);
+    color: #059669;
 }
 
 [data-theme="light"] .theme-switcher {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .theme-switcher:hover {
-    background: rgba(255, 255, 255, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-    box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2);
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
 }
 
 [data-theme="light"] .view-content {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 8px 32px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    box-shadow: 0 8px 32px rgba(148, 163, 184, 0.1);
 }
 
 [data-theme="light"] .cluster-section,
 [data-theme="light"] .firmware-section {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(25px);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 0 8px 32px rgba(143, 188, 187, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12);
 }
 
 /* Member Cards - No Hover Effects */
 [data-theme="light"] .member-card {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
     transition: none;
 }
 
 [data-theme="light"] .member-card:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15);
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
     transform: none;
 }
 
@@ -238,111 +237,111 @@
 }
 
 [data-theme="light"] .tabs-container {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.06);
 }
 
 [data-theme="light"] .tabs-header {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(148, 163, 184, 0.25);
 }
 
 [data-theme="light"] .tab-content {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.2);
 }
 
 [data-theme="light"] .tab-button {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(148, 163, 184, 0.2);
     color: var(--text-primary);
 }
 
 [data-theme="light"] .tab-button:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.3);
     color: var(--text-primary);
 }
 
 [data-theme="light"] .tab-button.active {
-    background: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.2);
     border: 1px solid var(--accent-secondary);
     color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
 }
 
 [data-theme="light"] .tasks-summary {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
     backdrop-filter: blur(25px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .tasks-summary:hover {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
 }
 
 [data-theme="light"] .summary-stat {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
 }
 
 [data-theme="light"] .summary-stat:hover {
-    background: rgba(255, 255, 255, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-    box-shadow: 0 4px 12px rgba(143, 188, 187, 0.2);
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.1);
 }
 
 [data-theme="light"] .action-group {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .action-group:hover {
-    background: rgba(255, 255, 255, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-    box-shadow: 0 6px 20px rgba(143, 188, 187, 0.2);
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
 }
 
 [data-theme="light"] .progress-item,
 [data-theme="light"] .result-item {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .progress-item:hover,
 [data-theme="light"] .result-item:hover {
-    background: rgba(255, 255, 255, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 8px 32px rgba(143, 188, 187, 0.25);
+    background: rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15);
 }
 
 [data-theme="light"] .capability-item {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .capability-item:hover {
-    background: rgba(255, 255, 255, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 6px 20px rgba(143, 188, 187, 0.25);
+    background: rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
 }
 
-/* Text Color Fixes for Nord Frost Theme */
+/* Text Color Fixes for Cool & Minimal Theme */
 [data-theme="light"] .member-hostname,
 [data-theme="light"] .member-ip,
 [data-theme="light"] .latency-label,
@@ -377,35 +376,35 @@
     color: var(--text-muted) !important;
 }
 
-/* Status Indicators for Nord Frost Theme */
+/* Status Indicators for Cool & Minimal Theme */
 [data-theme="light"] .status-online {
-    background: rgba(163, 190, 140, 0.2);
-    color: #a3be8c;
-    border: 1px solid rgba(163, 190, 140, 0.4);
+    background: rgba(5, 150, 105, 0.15);
+    color: #059669;
+    border: 1px solid rgba(5, 150, 105, 0.3);
 }
 
 [data-theme="light"] .status-offline {
-    background: rgba(191, 97, 106, 0.2);
-    color: #bf616a;
-    border: 1px solid rgba(191, 97, 106, 0.4);
+    background: rgba(220, 38, 38, 0.15);
+    color: #dc2626;
+    border: 1px solid rgba(220, 38, 38, 0.3);
 }
 
 [data-theme="light"] .status-inactive {
-    background: rgba(208, 135, 112, 0.2);
-    color: #d08770;
-    border: 1px solid rgba(208, 135, 112, 0.4);
+    background: rgba(245, 158, 11, 0.15);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.3);
 }
 
-/* Label Chips for Nord Frost Theme */
+/* Label Chips for Cool & Minimal Theme */
 [data-theme="light"] .label-chip {
-    background: rgba(129, 161, 193, 0.2);
-    border: 1px solid rgba(129, 161, 193, 0.4);
-    color: #81a1c1 !important;
+    background: rgba(59, 130, 246, 0.15);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    color: #3b82f6 !important;
 }
 
 [data-theme="light"] .label-chip.removable {
-    background: rgba(129, 161, 193, 0.25);
-    border: 1px solid rgba(129, 161, 193, 0.5);
+    background: rgba(59, 130, 246, 0.2);
+    border: 1px solid rgba(59, 130, 246, 0.4);
 }
 
 [data-theme="light"] .label-chip .chip-remove {
@@ -413,15 +412,15 @@
 }
 
 [data-theme="light"] .label-chip .chip-remove:hover {
-    background: rgba(129, 161, 193, 0.3);
+    background: rgba(59, 130, 246, 0.25);
 }
 
-/* Form Elements for Nord Frost Theme */
+/* Form Elements for Cool & Minimal Theme */
 [data-theme="light"] .param-input,
 [data-theme="light"] .node-select,
 [data-theme="light"] .label-select {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.25);
     color: var(--text-primary);
     backdrop-filter: blur(10px);
 }
@@ -430,8 +429,8 @@
 [data-theme="light"] .node-select:focus,
 [data-theme="light"] .label-select:focus {
     border-color: var(--accent-secondary);
-    background: rgba(255, 255, 255, 0.3);
-    box-shadow: 0 0 0 3px rgba(129, 161, 193, 0.2);
+    background: rgba(255, 255, 255, 0.25);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }
 
 [data-theme="light"] .param-input option,
@@ -441,15 +440,15 @@
     color: var(--text-primary);
 }
 
-/* Buttons for Nord Frost Theme */
+/* Buttons for Cool & Minimal Theme */
 [data-theme="light"] .refresh-btn,
 [data-theme="light"] .upload-btn,
 [data-theme="light"] .upload-btn-compact,
 [data-theme="light"] .deploy-btn,
 [data-theme="light"] .cap-call-btn,
 [data-theme="light"] .clear-btn {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.25);
     color: var(--text-primary);
     backdrop-filter: blur(15px);
 }
@@ -460,22 +459,22 @@
 [data-theme="light"] .deploy-btn:hover,
 [data-theme="light"] .cap-call-btn:hover,
 [data-theme="light"] .clear-btn:hover {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 4px 16px rgba(143, 188, 187, 0.2);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.12);
     color: var(--text-primary);
 }
 
-/* Member Overlay Styling with Nord Frost */
+/* Member Overlay Styling with Cool & Minimal */
 [data-theme="light"] .member-overlay-content {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
     backdrop-filter: blur(24px);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 20px 40px rgba(143, 188, 187, 0.15);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
 }
 
 [data-theme="light"] .member-overlay-header {
-    border-bottom: 1px solid rgba(143, 188, 187, 0.2);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
 }
 
 [data-theme="light"] .member-overlay-header .member-info .member-hostname {
@@ -497,9 +496,9 @@
 }
 
 [data-theme="light"] .member-overlay-header .member-info .member-labels .label-chip {
-    background: rgba(129, 161, 193, 0.2);
-    border: 1px solid rgba(129, 161, 193, 0.4);
-    color: #81a1c1 !important;
+    background: rgba(59, 130, 246, 0.15);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    color: #3b82f6 !important;
 }
 
 [data-theme="light"] .member-overlay-subtitle {
@@ -522,22 +521,22 @@
 }
 
 [data-theme="light"] .member-overlay-body .member-card .member-header {
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(148, 163, 184, 0.25);
     border-radius: 8px;
     padding: 1rem;
     margin-bottom: 1rem;
-    box-shadow: 0 2px 8px rgba(143, 188, 187, 0.1);
+    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.08);
 }
 
 [data-theme="light"] .member-overlay-body .member-card .member-details {
-    background: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border: 1px solid rgba(148, 163, 184, 0.2);
     border-radius: 8px;
     padding: 1rem;
-    box-shadow: 0 2px 8px rgba(143, 188, 187, 0.08);
+    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.06);
 }
 
 [data-theme="light"] .member-overlay-body .detail-section-title {
@@ -562,15 +561,15 @@
 }
 
 [data-theme="light"] .member-overlay-body .resource-chip {
-    background: rgba(129, 161, 193, 0.2);
-    color: #81a1c1 !important;
-    border: 1px solid rgba(129, 161, 193, 0.4);
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6 !important;
+    border: 1px solid rgba(59, 130, 246, 0.3);
 }
 
 [data-theme="light"] .member-overlay-body .api-chip {
-    background: rgba(163, 190, 140, 0.2);
-    color: #a3be8c !important;
-    border: 1px solid rgba(163, 190, 140, 0.4);
+    background: rgba(5, 150, 105, 0.15);
+    color: #059669 !important;
+    border: 1px solid rgba(5, 150, 105, 0.3);
 }
 
 /* Dark theme overlay improvements */
@@ -672,101 +671,19 @@
 /* Mobile Responsive Adjustments */
 @media (max-width: 768px) {
     [data-theme="light"] .main-navigation {
-        background: rgba(255, 255, 255, 0.15);
+        background: rgba(255, 255, 255, 0.12);
         backdrop-filter: blur(30px);
     }
     
     [data-theme="light"] .view-content {
-        background: rgba(255, 255, 255, 0.15);
+        background: rgba(255, 255, 255, 0.12);
         backdrop-filter: blur(25px);
     }
 }
 
 @media (max-width: 480px) {
     [data-theme="light"] .main-navigation {
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(35px);
     }
 }
-
-/* Fix navigation - only active tabs should have borders */
-[data-theme="light"] .nav-tab {
-    background: transparent;
-    border: 1px solid transparent;
-    backdrop-filter: blur(15px);
-    color: var(--text-secondary);
-}
-
-[data-theme="light"] .nav-tab:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid transparent;
-    color: var(--text-primary);
-}
-
-[data-theme="light"] .nav-tab.active {
-    background: rgba(255, 255, 255, 0.3);
-    border: 1px solid var(--accent-secondary);
-    color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
-}
-
-[data-theme="dark"] .nav-tab {
-    background: transparent;
-    border: 1px solid transparent;
-    backdrop-filter: blur(15px);
-    color: rgba(255, 255, 255, 0.8);
-}
-
-[data-theme="dark"] .nav-tab:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid transparent;
-    color: rgba(255, 255, 255, 0.95);
-}
-
-[data-theme="dark"] .nav-tab.active {
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid var(--accent-secondary);
-    color: #ffffff;
-    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
-}
-
-/* Fix navigation - only active tabs should have background */
-[data-theme="light"] .nav-tab {
-    background: transparent;
-    border: 1px solid transparent;
-    backdrop-filter: none;
-    color: var(--text-secondary);
-}
-
-[data-theme="light"] .nav-tab:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid transparent;
-    color: var(--text-primary);
-}
-
-[data-theme="light"] .nav-tab.active {
-    background: rgba(255, 255, 255, 0.3);
-    border: 1px solid var(--accent-secondary);
-    color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
-}
-
-[data-theme="dark"] .nav-tab {
-    background: transparent;
-    border: 1px solid transparent;
-    backdrop-filter: none;
-    color: rgba(255, 255, 255, 0.8);
-}
-
-[data-theme="dark"] .nav-tab:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid transparent;
-    color: rgba(255, 255, 255, 0.95);
-}
-
-[data-theme="dark"] .nav-tab.active {
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid var(--accent-secondary);
-    color: #ffffff;
-    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
-}