set white font color

components/leaderboard_components.py

@@ -8,7 +8,7 @@ def get_chart_colors():
         "Private": "#1098F7",  # Airglow Blue for Proprietary
         "Open source": "#58BC82",  # Green for Open source
         "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
-        "text": "#F5F6F7",
+        "text": "white",
         "background": "#01091A",
         "grid": (0, 0, 0, 0.1),  # RGBA tuple for grid
     }
@@ -47,7 +47,7 @@ def get_rank_badge(rank):
             align-items: center;
             justify-content: center;
             min-width: 28px;
-            color: #a1a1aa;
+            color: white;
             font-weight: 500;
         ">
             {rank}
@@ -134,7 +134,7 @@ def get_score_bar(score):
             <span style="
                 font-family: 'SF Mono', monospace;
                 font-weight: 600;
-                color: #F5F6F7;
+                color: white;
                 min-width: 60px;
             ">{score:.3f}</span>
         </div>
@@ -323,8 +323,8 @@ def get_faq_section():
     return """
     <div class="dark-container" style="margin-top: 40px; margin-bottom: 40px;">
         <div class="section-header">
-            <span class="section-icon" style="color: var(--accent-primary);">❓</span>
-            <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Geist', sans-serif; font-weight: 700;">
+            <span class="section-icon" style="color: white;">❓</span>
+            <h3 style="margin: 0; color: white; font-size: 1.5rem; font-family: 'Geist', sans-serif; font-weight: 700;">
                 Frequently Asked Questions
             </h3>
         </div>
@@ -332,76 +332,76 @@ def get_faq_section():
         <div style="margin-top: 24px;">
             <!-- FAQ Item 1 -->
             <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
-                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
-                    <span style="color: var(--accent-primary);"></span> Does the methodology favor GPT-4.1 since it uses GPT-4.1 to simulate users and tools, so GPT-4.1 ranks itself highest.
+                <summary style="cursor: pointer; font-weight: 600; color: white; font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: white;"></span> Does the methodology favor GPT-4.1 since it uses GPT-4.1 to simulate users and tools, so GPT-4.1 ranks itself highest.
                 </summary>
-                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
-                    <strong style="color: var(--accent-secondary);"></strong> GPT's top ranking isn't due to simulator bias. Scenarios are pre-generated with Claude and fixed for all models. The user simulator drives goal-based conversations, and the tool simulator provides synthetic responses without influencing outcomes. Evaluation uses Claude as a judge, which should theoretically favor Claude (per sycophancy theory), but GPTs still lead.
+                <div style="margin-top: 12px; padding-left: 28px; color: white; line-height: 1.6;">
+                    <strong style="color: white;"></strong> GPT's top ranking isn't due to simulator bias. Scenarios are pre-generated with Claude and fixed for all models. The user simulator drives goal-based conversations, and the tool simulator provides synthetic responses without influencing outcomes. Evaluation uses Claude as a judge, which should theoretically favor Claude (per sycophancy theory), but GPTs still lead.
                 </div>
             </details>
             
             <!-- FAQ Item 2 -->
             <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
-                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
-                    <span style="color: var(--accent-primary);"></span> Why does a specific model rank lower when our internal results show otherwise?
+                <summary style="cursor: pointer; font-weight: 600; color: white; font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: white;"></span> Why does a specific model rank lower when our internal results show otherwise?
                 </summary>
-                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
-                    <strong style="color: var(--accent-secondary);"></strong> Performance varies by prompt, task, complexity, and domain. Our evaluations kept prompts identical across models for consistency. Different evaluation methodologies and task sets can lead to different rankings.
+                <div style="margin-top: 12px; padding-left: 28px; color: white; line-height: 1.6;">
+                    <strong style="color: white;"></strong> Performance varies by prompt, task, complexity, and domain. Our evaluations kept prompts identical across models for consistency. Different evaluation methodologies and task sets can lead to different rankings.
                 </div>
             </details>
             
             <!-- FAQ Item 3 -->
             <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
-                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
-                    <span style="color: var(--accent-primary);"></span> Why is my favorite model missing?
+                <summary style="cursor: pointer; font-weight: 600; color: white; font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: white;"></span> Why is my favorite model missing?
                 </summary>
-                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
-                    <strong style="color: var(--accent-secondary);"></strong> We were not able to add certain models either because they were not in our initial list or had issues while running the experiments, such as improper tool call output format. We skipped some of the models which performed poorly in our leaderboard v1.
+                <div style="margin-top: 12px; padding-left: 28px; color: white; line-height: 1.6;">
+                    <strong style="color: white;"></strong> We were not able to add certain models either because they were not in our initial list or had issues while running the experiments, such as improper tool call output format. We skipped some of the models which performed poorly in our leaderboard v1.
                 </div>
             </details>
             
             <!-- FAQ Item 4 -->
             <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
-                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
-                    <span style="color: var(--accent-primary);"></span> We were surprised Gemini 2.5 Pro ranked lower. Our internal benchmarks show it's excellent for code research and AI code review tasks.
+                <summary style="cursor: pointer; font-weight: 600; color: white; font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: white;"></span> We were surprised Gemini 2.5 Pro ranked lower. Our internal benchmarks show it's excellent for code research and AI code review tasks.
                 </summary>
-                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
-                    <strong style="color: var(--accent-secondary);"></strong> Results differ because this leaderboard evaluates support agent scenarios only, not coding ones. Different models excel at different types of tasks, and this benchmark focuses specifically on business support agent use cases across banking, healthcare, insurance, investment, and telecom domains.
+                <div style="margin-top: 12px; padding-left: 28px; color: white; line-height: 1.6;">
+                    <strong style="color: white;"></strong> Results differ because this leaderboard evaluates support agent scenarios only, not coding ones. Different models excel at different types of tasks, and this benchmark focuses specifically on business support agent use cases across banking, healthcare, insurance, investment, and telecom domains.
                 </div>
             </details>
             
             <!-- About Metrics -->
             <div style="margin-top: 32px; padding: 20px; background: #ffd21e0d; border-radius: 12px; border: 1px solid var(--border-default);">
-                <h4 style="color: var(--text-primary); margin-top: 0; margin-bottom: 16px; font-size: 1.2rem; font-family: 'Geist', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                <h4 style="color: white; margin-top: 0; margin-bottom: 16px; font-size: 1.2rem; font-family: 'Geist', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 8px;">
                     <span style="font-size: 1.3rem;">📊</span>
                     Understanding the Metrics
                 </h4>
                 
                 <div style="display: grid; gap: 16px;">
                     <div>
-                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Action Completion (AC)</h5>
-                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                        <h5 style="color: white; margin: 0 0 8px 0; font-size: 1rem;">Action Completion (AC)</h5>
+                        <p style="color: white; margin: 0; line-height: 1.5;">
                             A score from 0 to 1 measuring how successfully the agent completes the user's requested tasks. This evaluates whether the agent achieves the intended goals, follows instructions accurately, and provides complete solutions. Higher scores indicate better task completion.
                         </p>
                     </div>
                     
                     <div>
-                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Tool Selection Quality (TSQ)</h5>
-                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                        <h5 style="color: white; margin: 0 0 8px 0; font-size: 1rem;">Tool Selection Quality (TSQ)</h5>
+                        <p style="color: white; margin: 0; line-height: 1.5;">
                             A score from 0 to 1 evaluating how well the agent selects and uses the appropriate tools for each task. This includes choosing the right tool, using correct parameters, and proper sequencing of tool calls. Higher scores indicate better tool utilization.
                         </p>
                     </div>
                     
                     <div>
-                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Domain-Specific Performance</h5>
-                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                        <h5 style="color: white; margin: 0 0 8px 0; font-size: 1rem;">Domain-Specific Performance</h5>
+                        <p style="color: white; margin: 0; line-height: 1.5;">
                             Models are tested across five business domains: Banking, Healthcare, Insurance, Investment, and Telecom. Each domain has specific scenarios and requirements that test the agent's ability to handle industry-specific tasks and terminology.
                         </p>
                     </div>
                     
                     <div>
-                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Efficiency Metrics</h5>
-                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                        <h5 style="color: white; margin: 0 0 8px 0; font-size: 1rem;">Efficiency Metrics</h5>
+                        <p style="color: white; margin: 0; line-height: 1.5;">
                             • <strong>Cost:</strong> Total API cost per session in USD<br>
                             • <strong>Duration:</strong> Time to complete tasks in seconds<br>
                             • <strong>Turns:</strong> Number of exchanges to reach resolution<br>
@@ -411,13 +411,13 @@ def get_faq_section():
                 </div>
                 
                 <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle);">
-                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem; line-height: 1.5;">
+                    <p style="color: white; margin: 0; font-size: 0.9rem; line-height: 1.5;">
                         <strong>Learn More:</strong> For detailed methodology and evaluation criteria, visit the 
-                        <a href="https://galileo.ai/blog/agent-leaderboard-v2" target="_blank" style="color: var(--accent-primary); text-decoration: none;">
+                        <a href="https://galileo.ai/blog/agent-leaderboard-v2" target="_blank" style="color: white; text-decoration: none;">
                             official blog post ↗
                         </a>
                         or explore the 
-                        <a href="https://github.com/rungalileo/agent-leaderboard" target="_blank" style="color: var(--accent-primary); text-decoration: none;">
+                        <a href="https://github.com/rungalileo/agent-leaderboard" target="_blank" style="color: white; text-decoration: none;">
                             GitHub repository ↗
                         </a>
                     </p>
@@ -431,7 +431,7 @@ def get_faq_section():
             }
             
             .faq-item:hover {
-                border-color: var(--accent-primary) !important;
+                border-color: white !important;
                 box-shadow: 0 4px 12px rgba(255, 210, 30, 0.1);
             }
             
@@ -444,7 +444,7 @@ def get_faq_section():
                 display: inline-block;
                 margin-right: 8px;
                 transition: transform 0.3s ease;
-                color: var(--accent-secondary);
+                color: white;
             }
             
             .faq-item[open] summary::before {
@@ -452,7 +452,7 @@ def get_faq_section():
             }
             
             .faq-item summary:hover {
-                color: var(--accent-primary) !important;
+                color: white !important;
             }
         </style>
     </div>

styles/leaderboard_styles.py

@@ -58,18 +58,18 @@ def get_leaderboard_css():
     }
     
     p, span, div {
-        color: var(--text-primary) !important;
+        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
     /* Labels and info text */
     label {
-        color: var(--text-primary) !important;
+        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
     .gr-box label {
-        color: var(--text-primary) !important;
+        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
@@ -154,6 +154,11 @@ def get_leaderboard_css():
         border-color: var(--border-default) !important;
     }
     
+    /* Radio button labels */
+    input[type="radio"] + label {
+        color: white !important;
+    }
+    
     input[type="radio"]:checked {
         background-color: var(--accent-primary) !important;
         border-color: var(--accent-primary) !important;
@@ -164,10 +169,29 @@ def get_leaderboard_css():
     .dropdown {
         border-color: var(--border-default) !important;
         background: var(--bg-card) !important;
-        color: var(--text-primary) !important;
+        color: white !important;
         transition: all 0.2s ease !important;
     }
     
+    /* Dropdown option styling */
+    .dropdown option {
+        background: var(--bg-card) !important;
+        color: white !important;
+    }
+    
+    /* Gradio dropdown specific styling */
+    .gradio-dropdown select,
+    .gradio-dropdown [role="combobox"],
+    .gradio-dropdown input {
+        color: white !important;
+        background: var(--bg-card) !important;
+    }
+    
+    .gradio-dropdown option {
+        color: white !important;
+        background: var(--bg-card) !important;
+    }
+    
     .dropdown:hover {
         border-color: var(--accent-primary) !important;
         box-shadow: 0 0 15px var(--glow-primary) !important;
@@ -184,12 +208,19 @@ def get_leaderboard_css():
         overflow-y: auto !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+        color: white !important;
+    }
+    
+    /* Table cells and headers */
+    .dataframe td,
+    .dataframe th {
+        color: white !important;
     }
     
     /* Button styling */
     button {
         background: var(--bg-card) !important;
-        color: var(--text-primary) !important;
+        color: white !important;
         border: 1px solid var(--border-default) !important;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     }

tabs/leaderboard_v1.py

@@ -201,7 +201,7 @@ def create_leaderboard_v2_tab():
             for idx in range(n)
         )
         label_spans = "\n".join(
-            f'<text x="{point(1.1, idx)[0]:.2f}" y="{point(1.1, idx)[1]:.2f}" text-anchor="middle" dominant-baseline="middle" font-size="9" fill="#F8E4B7">{label}</text>'
+            f'<text x="{point(1.1, idx)[0]:.2f}" y="{point(1.1, idx)[1]:.2f}" text-anchor="middle" dominant-baseline="middle" font-size="9" fill="white">{label}</text>'
             for idx, label in enumerate(labels)
         )
         svg = f"""
@@ -228,32 +228,32 @@ def create_leaderboard_v2_tab():
             "description": "7개의 태스크 전반의 평균 성능을 한눈에 살펴보고 각 레벨 비교를 위한 기준점을 제공합니다."
         },
         "L1": {
-            "title": "L1 · 단일 도구 실행",
-            "description": "단일 도구 실행 능력과 기본적인 명령 수행 정확도를 평가합니다."
+            "title": "<span style='color: white;'>L1 · 단일 도구 실행</span>",
+            "description": "<span style='color: white;'>단일 도구 실행 능력과 기본적인 명령 수행 정확도를 평가합니다.</span>"
         },
         "L2": {
-            "title": "L2 · 도구 선택 능력",
-            "description": "요구 사항에 맞는 도구를 고르고 적절한 파라미터로 호출하는 능력을 측정합니다."
+            "title": "<span style='color: white;'>L2 · 도구 선택 능력</span>",
+            "description": "<span style='color: white;'>요구 사항에 맞는 도구를 고르고 적절한 파라미터로 호출하는 능력을 측정합니다.</span>"
         },
         "L3": {
-            "title": "L3 · 순차적 추론 (Chaining)",
-            "description": "복수 단계의 순차적 reasoning을 통해 문제를 해결하는 과정을 검증합니다."
+            "title": "<span style='color: white;'>L3 · 순차적 추론 (Chaining)</span>",
+            "description": "<span style='color: white;'>복수 단계의 순차적 reasoning을 통해 문제를 해결하는 과정을 검증합니다.</span>"
         },
         "L4": {
-            "title": "L4 · 병렬적 추론 (Aggregation)",
-            "description": "여러 소스의 정보를 병렬적으로 통합하고 요약하는 능력을 평가합니다."
+            "title": "<span style='color: white;'>L4 · 병렬적 추론 (Aggregation)</span>",
+            "description": "<span style='color: white;'>여러 소스의 정보를 병렬적으로 통합하고 요약하는 능력을 평가합니다.</span>"
         },
         "L5": {
-            "title": "L5 · 강건성 (Robustness / Fallback)",
-            "description": "예상치 못한 오류나 실패 상황에 대한 인지와 대응 전략을 확인합니다."
+            "title": "<span style='color: white;'>L5 · 강건성 (Robustness / Fallback)</span>",
+            "description": "<span style='color: white;'>예상치 못한 오류나 실패 상황에 대한 인지와 대응 전략을 확인합니다.</span>"
         },
         "L6": {
-            "title": "L6 · 효율성 (Efficiency)",
-            "description": "최소한의 호출과 비용으로 목표를 달성하는 운영 효율을 살펴봅니다."
+            "title": "<span style='color: white;'>L6 · 효율성 (Efficiency)</span>",
+            "description": "<span style='color: white;'>최소한의 호출과 비용으로 목표를 달성하는 운영 효율을 살펴봅니다.</span>"
         },
         "L7": {
-            "title": "L7 · 장기 컨텍스트 기억 (Contextual Memory)",
-            "description": "장기 대화 맥락을 유지하고 적절히 활용하는 능력을 집중적으로 분석합니다."
+            "title": "<span style='color: white;'>L7 · 장기 컨텍스트 기억 (Contextual Memory)</span>",
+            "description": "<span style='color: white;'>장기 대화 맥락을 유지하고 적절히 활용하는 능력을 집중적으로 분석합니다.</span>"
         }
     }
     default_level = "ALL"
@@ -291,7 +291,7 @@ def create_leaderboard_v2_tab():
                 border-collapse: collapse;
                 font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
                 background: var(--bg-card);
-                color: var(--text-primary);
+                color: white;
             }
             
             .v2-styled-table thead {
@@ -305,7 +305,7 @@ def create_leaderboard_v2_tab():
                 padding: 14px 12px;
                 text-align: left;
                 font-weight: 600;
-                color: var(--text-primary);
+                color: white;
                 border-bottom: 2px solid var(--accent-primary);
                 font-size: 13px;
                 text-transform: uppercase;
@@ -319,7 +319,7 @@ def create_leaderboard_v2_tab():
             .v2-styled-table td {
                 padding: 12px;
                 border-bottom: 1px solid var(--border-subtle);
-                color: var(--text-primary);
+                color: white;
                 transition: all 0.2s ease;
             }
             
@@ -339,13 +339,13 @@ def create_leaderboard_v2_tab():
             
             .model-name {
                 font-weight: 500;
-                color: var(--accent-primary);
+                color: white;
                 transition: color 0.2s ease;
             }
             
             /* Keep model name color consistent on hover to emphasize row highlight */
             .v2-styled-table tr:hover .model-name {
-                color: var(--accent-secondary);
+                color: white;
             }
             
             .numeric-cell {
@@ -356,12 +356,12 @@ def create_leaderboard_v2_tab():
             
             .highlight-header {
                 background: rgba(255, 210, 30, 0.14);
-                color: var(--accent-primary);
+                color: white;
             }
             
             .highlight-cell {
                 background: rgba(255, 210, 30, 0.08);
-                color: var(--accent-primary);
+                color: white;
                 font-weight: 600;
             }
         </style>
@@ -459,8 +459,8 @@ def create_leaderboard_v2_tab():
         return f"""
         <div class="domain-selector-container leaderboard-intro">
             <div class="domain-header">
-                <h2 class="domain-title">Agent Leaderboard · {level_title}</h2>
-                <p class="domain-subtitle">{level_description}</p>
+                <h2 class="domain-title" style="color: white;">Agent Leaderboard · {level_title}</h2>
+                <p class="domain-subtitle" style="color: white;">{level_description}</p>
             </div>
             <div class="dataframe-container">
         """
@@ -1097,14 +1097,14 @@ def create_leaderboard_v2_tab():
     # Links section below title
     gr.HTML("""
     <div class="hero-actions">
-        <a href="http://galileo.ai/blog/agent-leaderboard-v2" target="_blank" rel="noopener noreferrer" class="hero-action-button">
+        <a href="https://hugging-face-krew.github.io/" target="_blank" rel="noopener noreferrer" class="hero-action-button">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/>
                 <line x1="8" y1="12" x2="16" y2="12"/>
             </svg>
             <span>Blog</span>
         </a>
-        <a href="https://github.com/rungalileo/agent-leaderboard" target="_blank" rel="noopener noreferrer" class="hero-action-button">
+        <a href="https://github.com/Hugging-Face-KREW/Ko-AgentBench" target="_blank" rel="noopener noreferrer" class="hero-action-button">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M9 19c-5 1.5-5-2.5-7-3"/>
                 <path d="M20 21v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
@@ -1145,11 +1145,11 @@ def create_leaderboard_v2_tab():
                     <span>80%</span>
                 </div>
                 <ul class="phase-list">
-                    <li>L1: 단일 도구 실행</li>
-                    <li>L2: 도구 선택 능력</li>
-                    <li>L3: 순차적 reasoning (Chaining)</li>
-                    <li>L4: 병렬적 reasoning (Aggregation)</li>
-                    <li>L5: 강건성 (Robustness / Fallback)</li>
+                    <li style="color: white;">L1: 단일 도구 실행</li>
+                    <li style="color: white;">L2: 도구 선택 능력</li>
+                    <li style="color: white;">L3: 순차적 reasoning (Chaining)</li>
+                    <li style="color: white;">L4: 병렬적 reasoning (Aggregation)</li>
+                    <li style="color: white;">L5: 강건성 (Robustness / Fallback)</li>
                 </ul>
             </div>
             <div class="phase-card">
@@ -1158,8 +1158,8 @@ def create_leaderboard_v2_tab():
                     <span>20%</span>
                 </div>
                 <ul class="phase-list">
-                    <li>L6: 효율성 (Efficiency)</li>
-                    <li>L7: 장기 컨텍스트 기억 (Contextual Memory)</li>
+                    <li style="color: white;">L6: 효율성 (Efficiency)</li>
+                    <li style="color: white;">L7: 장기 컨텍스트 기억 (Contextual Memory)</li>
                 </ul>
             </div>
         </div>
@@ -1943,8 +1943,8 @@ def create_leaderboard_v2_tab():
     with gr.Column(elem_classes=["domain-selector-container"], elem_id="task-level-selector"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title">🧠 Select Task Level</h2>
-            <p class="domain-subtitle">Ko-AgentBench의 ALL · L1~L7 단계별 에이전트 성능을 손쉽게 비교하세요.</p>
+            <h2 class="domain-title" style="color: white;">🧠 Select Task Level</h2>
+            <p class="domain-subtitle" style="color: white;">Ko-AgentBench의 ALL · L1~L7 단계별 에이전트 성능을 손쉽게 비교하세요.</p>
         </div>
         """)
         domain_filter = gr.Radio(
@@ -1960,14 +1960,14 @@ def create_leaderboard_v2_tab():
     with gr.Column(elem_classes=["domain-selector-container", "filters-sorting-container"], elem_id="filters-sorting-container"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title">🔍 Filters & Sorting</h2>
-            <p class="domain-subtitle">모델 접근 방식과 정렬 순서를 선택해 맞춤 뷰를 구성하세요.</p>
+            <h2 class="domain-title" style="color: white;">🔍 Filters & Sorting</h2>
+            <p class="domain-subtitle" style="color: white;">모델 접근 방식과 정렬 순서를 선택해 맞춤 뷰를 구성하세요.</p>
         </div>
         """)
         with gr.Row(elem_classes=["filters-sorting-row"]):
             with gr.Column(scale=1, elem_classes=["filter-group"]):
                 with gr.Row(elem_classes=["filter-group-row"]):
-                    gr.HTML("<span class='filter-group-label'>Model Access</span>")
+                    gr.HTML("<span class='filter-group-label' style='color: white;'>Model Access</span>")
                     model_type_filter = gr.Radio(
                         choices=["All", "OSS", "API"],
                         value="All",
@@ -1977,7 +1977,7 @@ def create_leaderboard_v2_tab():
                     )
             with gr.Column(scale=1, elem_classes=["filter-group"]):
                 with gr.Row(elem_classes=["filter-group-row"]):
-                    gr.HTML("<span class='filter-group-label'>Sort Order</span>")
+                    gr.HTML("<span class='filter-group-label' style='color: white;'>Sort Order</span>")
                     sort_order = gr.Radio(
                         choices=["Descending", "Ascending"],
                         value="Descending",
@@ -1999,16 +1999,16 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container">
         <div class="domain-header">
-            <h2 class="domain-title">Core Capability Radar</h2>
-            <p class="domain-subtitle">Track six essential pillars: Success, Execution, Reasoning, Robustness, Efficiency, and Call Validity.</p>
+            <h2 class="domain-title" style="color: white;">Core Capability Radar</h2>
+            <p class="domain-subtitle" style="color: white;">Track six essential pillars: Success, Execution, Reasoning, Robustness, Efficiency, and Call Validity.</p>
         </div>
     """)
     
     with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="radar-model-selector"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title">🎯 Select Models for Comparison</h2>
-            <p class="domain-subtitle">Choose up to 5 models to map on the capability radar.</p>
+            <h2 class="domain-title" style="color: white;">🎯 Select Models for Comparison</h2>
+            <p class="domain-subtitle" style="color: white;">Choose up to 5 models to map on the capability radar.</p>
         </div>
         """)
         model_selector = gr.Dropdown(
@@ -2039,16 +2039,16 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container level-metrics-wrapper">
         <div class="domain-header">
-            <h2 class="domain-title">Level-Specific Metric Spotlight</h2>
-            <p class="domain-subtitle">Dive deeper into each Ko-AgentBench stage and compare model scores across its unique evaluation metrics.</p>
+            <h2 class="domain-title" style="color: white;">Level-Specific Metric Spotlight</h2>
+            <p class="domain-subtitle" style="color: white;">Dive deeper into each Ko-AgentBench stage and compare model scores across its unique evaluation metrics.</p>
         </div>
     """)
     
     with gr.Column(elem_classes=["domain-selector-container", "level-selector-container"], elem_id="level-selector-box"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title">🧭 Select Task Level and Models</h2>
-            <p class="domain-subtitle">Choose a level and up to 5 models to explore their detailed SR-driven metrics.</p>
+            <h2 class="domain-title" style="color: white;">🧭 Select Task Level and Models</h2>
+            <p class="domain-subtitle" style="color: white;">Choose a level and up to 5 models to explore their detailed SR-driven metrics.</p>
         </div>
         """)
         level_metric_selector = gr.Dropdown(
@@ -2085,8 +2085,8 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container heatmap-wrapper">
         <div class="domain-header">
-            <h2 class="domain-title">Comprehensive Performance Heatmap</h2>
-            <p class="domain-subtitle">View Ko-AgentBench SR scores across L1~L7 for each model in a single glance.</p>
+            <h2 class="domain-title" style="color: white;">Comprehensive Performance Heatmap</h2>
+            <p class="domain-subtitle" style="color: white;">View Ko-AgentBench SR scores across L1~L7 for each model in a single glance.</p>
         </div>
         <div class="chart-container heatmap-chart-container">
     """)
@@ -2451,8 +2451,8 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container performance-card-container">
         <div class="domain-header">
-            <h2 class="domain-title">Model Performance Card</h2>
-            <p class="domain-subtitle">Comprehensive performance card for any model - perfect for presentations and reports</p>
+            <h2 class="domain-title" style="color: white;">Model Performance Card</h2>
+            <p class="domain-subtitle" style="color: white;">Comprehensive performance card for any model - perfect for presentations and reports</p>
         </div>
         <div class="performance-card-content">
     """)
@@ -2460,8 +2460,8 @@ def create_leaderboard_v2_tab():
     with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="model-selector-box"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title">🤖 Select Model</h2>
-            <p class="domain-subtitle">비교할 모델을 선택하세요.</p>
+            <h2 class="domain-title" style="color: white;">🤖 Select Model</h2>
+            <p class="domain-subtitle" style="color: white;">비교할 모델을 선택하세요.</p>
         </div>
         """)
         card_model_selector = gr.Dropdown(
@@ -3109,7 +3109,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
                 hoverlabel=dict(
                     bgcolor="rgba(1, 9, 26, 0.95)",
                     bordercolor=colors['line'],
-                    font=dict(color="#F5F6F7", size=12, family="'Geist', sans-serif")
+                    font=dict(color="white", size=12, family="'Geist', sans-serif")
                 )
             )
         )
@@ -3132,7 +3132,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
                 ticktext=tick_text,
                 tickfont=dict(
                     size=11,
-                    color='#94A3B8',
+                    color='white',
                     family="'Geist Mono', monospace"
                 )
             ),
@@ -3144,7 +3144,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
                 tickfont=dict(
                     size=13,
                     family="'Geist', sans-serif",
-                    color='#F5F6F7',
+                    color='white',
                     weight=600
                 ),
                 rotation=90,
@@ -3158,7 +3158,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
             y=-0.15,
             xanchor="center",
             x=0.5,
-            font=dict(size=12, family="'Geist', sans-serif", color='#F5F6F7'),
+            font=dict(size=12, family="'Geist', sans-serif", color='white'),
             bgcolor='rgba(1, 9, 26, 0.8)',
             bordercolor='rgba(245, 246, 247, 0.2)',
             borderwidth=1,
@@ -3172,7 +3172,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
             font=dict(
                 size=22,
                 family="'Geist', sans-serif",
-                color="#F5F6F7",
+                color="white",
                 weight=700
             ),
         ),
@@ -3271,8 +3271,8 @@ def create_performance_heatmap(df, ordered_models=None, max_models=12):
             hovertemplate="<b>%{y}</b><br><span style='color:#FFD21E'>%{x}</span><br>SR · %{z:.3f}<extra></extra>",
             colorbar=dict(
                 title="Success Rate",
-                titlefont=dict(color="#F5F6F7", family="'Geist', sans-serif", size=12),
-                tickfont=dict(color="#94A3B8", family="'Geist', sans-serif", size=10),
+                titlefont=dict(color="white", family="'Geist', sans-serif", size=12),
+                tickfont=dict(color="white", family="'Geist', sans-serif", size=10),
                 thickness=12,
                 len=0.7,
                 outlinecolor="rgba(255, 255, 255, 0.1)",
@@ -3309,17 +3309,17 @@ def create_performance_heatmap(df, ordered_models=None, max_models=12):
         margin=dict(t=80, b=90, l=110, r=160),
         height=520,
         width=1450,
-        font=dict(family="'Geist', sans-serif", color="#F5F6F7"),
+        font=dict(family="'Geist', sans-serif", color="white"),
         xaxis=dict(
             tickangle=-25,
             showgrid=False,
             ticks="",
-            tickfont=dict(size=11, family="'Geist', sans-serif", color="#F5F6F7")
+            tickfont=dict(size=11, family="'Geist', sans-serif", color="white")
         ),
         yaxis=dict(
             showgrid=False,
             ticks="",
-            tickfont=dict(size=12, family="'Geist', sans-serif", color="#F5F6F7")
+            tickfont=dict(size=12, family="'Geist', sans-serif", color="white")
         ),
         annotations=annotations,
         title=dict(
@@ -3329,7 +3329,7 @@ def create_performance_heatmap(df, ordered_models=None, max_models=12):
             font=dict(
                 size=20,
                 family="'Geist', sans-serif",
-                color="#F5F6F7",
+                color="white",
                 weight=700
             ),
         )
@@ -3349,7 +3349,7 @@ def create_empty_heatmap(message):
         xanchor='center', yanchor='middle',
         font=dict(
             size=18,
-            color="#94A3B8",
+            color="white",
             family="'Geist', sans-serif"
         ),
         showarrow=False,
@@ -3372,7 +3372,7 @@ def create_empty_heatmap(message):
             font=dict(
                 size=20,
                 family="'Geist', sans-serif",
-                color="#F5F6F7",
+                color="white",
                 weight=700
             ),
         )
@@ -3500,24 +3500,24 @@ def create_level_metric_chart(df, level, selected_models=None, max_models=5):
             bgcolor='rgba(1, 9, 26, 0.75)',
             bordercolor='rgba(245, 246, 247, 0.2)',
             borderwidth=1,
-            font=dict(size=11, family="'Geist', sans-serif", color='#F5F6F7')
+            font=dict(size=11, family="'Geist', sans-serif", color='white')
         ),
         xaxis=dict(
-            title=dict(text=f"<b>{level} Metric Score</b>", font=dict(size=14, color="#F5F6F7")),
-            tickfont=dict(size=11, color="#94A3B8"),
+            title=dict(text=f"<b>{level} Metric Score</b>", font=dict(size=14, color="white")),
+            tickfont=dict(size=11, color="white"),
             gridcolor='rgba(245, 246, 247, 0.08)',
             zerolinecolor='rgba(245, 246, 247, 0.18)',
             range=x_range
         ),
         yaxis=dict(
-            tickfont=dict(size=13, color="#F5F6F7"),
+            tickfont=dict(size=13, color="white"),
             automargin=True
         ),
         title=dict(
             text=f"<b>{level} Metric Breakdown</b>",
             x=0.5,
             y=0.98,
-            font=dict(size=20, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=20, family="'Geist', sans-serif", color="white", weight=700)
         )
     )
     return fig
@@ -3530,7 +3530,7 @@ def create_empty_level_metric_chart(message):
         xref="paper", yref="paper",
         x=0.5, y=0.5,
         xanchor='center', yanchor='middle',
-        font=dict(size=18, color="#94A3B8", family="'Geist', sans-serif"),
+        font=dict(size=18, color="white", family="'Geist', sans-serif"),
         showarrow=False,
         bgcolor="rgba(245, 246, 247, 0.05)",
         bordercolor="rgba(245, 246, 247, 0.2)",
@@ -3547,7 +3547,7 @@ def create_empty_level_metric_chart(message):
             text="<b>Level Metric Breakdown</b>",
             x=0.5,
             y=0.98,
-            font=dict(size=20, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=20, family="'Geist', sans-serif", color="white", weight=700)
         )
     )
     fig.update_xaxes(visible=False)
@@ -3566,7 +3566,7 @@ def create_empty_radar_chart(message):
         xanchor='center', yanchor='middle',
         font=dict(
             size=18, 
-            color="#94A3B8",
+            color="white",
             family="'Geist', sans-serif"
         ),
         showarrow=False,
@@ -3589,7 +3589,7 @@ def create_empty_radar_chart(message):
             font=dict(
                 size=22, 
                 family="'Geist', sans-serif", 
-                color="#F5F6F7",
+                color="white",
                 weight=700
             ),
         ),
@@ -3647,7 +3647,7 @@ def create_cost_performance_scatter(df, metric="Avg AC"):
             name=legend_name,
             text=df_type['Model'],
             textposition="top center",
-            textfont=dict(size=10, color='#94A3B8'),
+            textfont=dict(size=10, color='white'),
             marker=dict(
                 size=df_type['Avg Turns'] * 3,  # Size based on number of turns
                 color=color_map.get(model_type, '#F5F6F7'),
@@ -3671,7 +3671,7 @@ def create_cost_performance_scatter(df, metric="Avg AC"):
     # Add quadrant labels
     fig.add_annotation(x=0.95, y=0.05, text="💎 High Performance<br>Low Cost", 
                       showarrow=False, xref="paper", yref="paper",
-                      font=dict(size=12, color="#F5F6F7"), bgcolor="rgba(245, 246, 247, 0.1)")
+                      font=dict(size=12, color="white"), bgcolor="rgba(245, 246, 247, 0.1)")
     fig.add_annotation(x=0.05, y=0.95, text="⚠️ Low Performance<br>High Cost", 
                       showarrow=False, xref="paper", yref="paper",
                       font=dict(size=12, color="#ffd21e"), bgcolor="rgba(255, 210, 30, 0.1)")
@@ -3683,23 +3683,23 @@ def create_cost_performance_scatter(df, metric="Avg AC"):
             text=f"<b>Cost-Performance Efficiency: {metric_display}</b>",
             x=0.5,
             y=0.97,
-            font=dict(size=22, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=22, family="'Geist', sans-serif", color="white", weight=700)
         ),
         xaxis=dict(
             title=dict(
                 text=f"<b>{metric_display}</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=12, color="#94A3B8"),
+            tickfont=dict(size=12, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)",
             zerolinecolor="rgba(245, 246, 247, 0.2)"
         ),
         yaxis=dict(
             title=dict(
                 text="<b>Average Session Cost ($)</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=12, color="#94A3B8"),
+            tickfont=dict(size=12, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)",
             zerolinecolor="rgba(245, 246, 247, 0.2)"
         ),
@@ -3714,7 +3714,7 @@ def create_cost_performance_scatter(df, metric="Avg AC"):
             y=1.02,
             xanchor="right",
             x=1,
-            font=dict(size=12, family="'Geist', sans-serif", color='#F5F6F7'),
+            font=dict(size=12, family="'Geist', sans-serif", color='white'),
             bgcolor='rgba(1, 9, 26, 0.8)',
             bordercolor='rgba(245, 246, 247, 0.2)',
             borderwidth=1
@@ -3749,7 +3749,7 @@ def create_speed_accuracy_plot(df, metric="Avg AC"):
         mode='markers+text',
         text=df_filtered['Model'],
         textposition="top center",
-        textfont=dict(size=9, color='#94A3B8'),
+        textfont=dict(size=9, color='white'),
         marker=dict(
             size=12,
             color=df_filtered['Avg Total Cost'],
@@ -3758,9 +3758,9 @@ def create_speed_accuracy_plot(df, metric="Avg AC"):
             colorbar=dict(
                 title=dict(
                     text="Cost ($)",
-                    font=dict(color="#F5F6F7")
+                    font=dict(color="white")
                 ),
-                tickfont=dict(color="#94A3B8"),
+                tickfont=dict(color="white"),
                 bgcolor="rgba(1, 9, 26, 0.8)",
                 bordercolor="rgba(245, 246, 247, 0.2)",
                 borderwidth=1,
@@ -3785,7 +3785,7 @@ def create_speed_accuracy_plot(df, metric="Avg AC"):
     # Add quadrant labels
     fig.add_annotation(x=0.95, y=0.05, text="⚡ Fast & Accurate", 
                       showarrow=False, xref="paper", yref="paper",
-                      font=dict(size=12, color="#F5F6F7", weight=600))
+                      font=dict(size=12, color="white", weight=600))
     fig.add_annotation(x=0.05, y=0.95, text="🐌 Slow & Inaccurate", 
                       showarrow=False, xref="paper", yref="paper",
                       font=dict(size=12, color="#ffd21e", weight=600))
@@ -3797,23 +3797,23 @@ def create_speed_accuracy_plot(df, metric="Avg AC"):
             text=f"<b>Speed vs Accuracy Trade-off: {metric_display}</b>",
             x=0.5,
             y=0.97,
-            font=dict(size=22, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=22, family="'Geist', sans-serif", color="white", weight=700)
         ),
         xaxis=dict(
             title=dict(
                 text=f"<b>{metric_display}</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=12, color="#94A3B8"),
+            tickfont=dict(size=12, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)",
             zerolinecolor="rgba(245, 246, 247, 0.2)"
         ),
         yaxis=dict(
             title=dict(
                 text="<b>Average Session Duration (seconds)</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=12, color="#94A3B8"),
+            tickfont=dict(size=12, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)",
             zerolinecolor="rgba(245, 246, 247, 0.2)"
         ),
@@ -3877,9 +3877,9 @@ def create_domain_specialization_matrix(df, metric_type="AC"):
             colorbar=dict(
                 title=dict(
                     text="Specialization<br>Strength",
-                    font=dict(color="#F5F6F7")
+                    font=dict(color="white")
                 ),
-                tickfont=dict(color="#94A3B8"),
+                tickfont=dict(color="white"),
                 bgcolor="rgba(1, 9, 26, 0.8)",
                 bordercolor="rgba(245, 246, 247, 0.2)",
                 borderwidth=1
@@ -3902,22 +3902,22 @@ def create_domain_specialization_matrix(df, metric_type="AC"):
             text=f"<b>Domain Specialization Matrix: {metric_display}</b>",
             x=0.5,
             y=0.97,
-            font=dict(size=22, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=22, family="'Geist', sans-serif", color="white", weight=700)
         ),
         xaxis=dict(
             title=dict(
                 text="<b>Business Domains</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=13, color="#F5F6F7"),
+            tickfont=dict(size=13, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)"
         ),
         yaxis=dict(
             title=dict(
                 text="<b>Models</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=11, color="#94A3B8"),
+            tickfont=dict(size=11, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)"
         ),
         paper_bgcolor="#01091A",
@@ -4011,7 +4011,7 @@ def create_performance_gap_analysis(df, metric_type="AC"):
             x=[row['Min'], row['Max']],
             y=[row['Domain'], row['Domain']],
             mode='markers',
-            marker=dict(size=8, color='#F5F6F7', line=dict(width=2, color='#01091A')),
+            marker=dict(size=8, color='white', line=dict(width=2, color='#01091A')),
             showlegend=False,
             hoverinfo='skip'
         ))
@@ -4023,23 +4023,23 @@ def create_performance_gap_analysis(df, metric_type="AC"):
             text=f"<b>Performance Gap Analysis by Domain: {metric_display}</b>",
             x=0.5,
             y=0.97,
-            font=dict(size=22, family="'Geist', sans-serif", color="#F5F6F7", weight=700)
+            font=dict(size=22, family="'Geist', sans-serif", color="white", weight=700)
         ),
         xaxis=dict(
             title=dict(
                 text=f"<b>{metric_display} Score</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=12, color="#94A3B8"),
+            tickfont=dict(size=12, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)",
             range=[0, 1] if metric_type in ['AC', 'TSQ'] else None
         ),
         yaxis=dict(
             title=dict(
                 text="<b>Business Domain</b>",
-                font=dict(size=16, color="#F5F6F7")
+                font=dict(size=16, color="white")
             ),
-            tickfont=dict(size=13, color="#F5F6F7"),
+            tickfont=dict(size=13, color="white"),
             gridcolor="rgba(245, 246, 247, 0.1)"
         ),
         paper_bgcolor="#01091A",
@@ -4056,7 +4056,7 @@ def create_performance_gap_analysis(df, metric_type="AC"):
         xref="paper", yref="paper",
         x=0.98, y=0.02,
         xanchor='right', yanchor='bottom',
-        font=dict(size=12, color='#94A3B8'),
+        font=dict(size=12, color='white'),
         showarrow=False
     )
     
@@ -4074,7 +4074,7 @@ def create_empty_chart(message):
         xanchor='center', yanchor='middle',
         font=dict(
             size=18, 
-            color="#94A3B8",
+            color="white",
             family="'Geist', sans-serif"
         ),
         showarrow=False,