UI improvements for light mode

app.py

@@ -1222,7 +1222,7 @@ class ProgressTracker:
         # Add model information if available and we're not in idle or error state
         model_info = ''
         if self.stage not in ["idle", "error", "starting"] and (self.generator_model or self.judge_model):
-            model_info = f'<div class="model-info" style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.85em; color: #37474f; background-color: #e1f5fe; padding: 5px 10px; border-radius: 4px;">'
+            model_info = f'<div class="progress-model-info">'
             if self.generator_model:
                 model_info += f'<div><span style="font-weight: bold;">Generator:</span> {self.generator_model}</div>'
             if self.judge_model:
@@ -1293,21 +1293,24 @@ def create_interface():
     
     # CSS for styling
     css = """
+    /* Base styles */
     .container {
         max-width: 1000px;
         margin: 0 auto;
     }
+    
+    /* Light theme default styles */
     .title {
         text-align: center;
         margin-bottom: 0.5em;
-        color: #0d47a1;
         font-weight: 600;
+        color: #0d47a1;
     }
     .subtitle {
         text-align: center;
         margin-bottom: 1.5em;
-        color: #37474f;
         font-size: 1.2em;
+        color: #37474f;
     }
     .section-title {
         margin-top: 1em;
@@ -1318,63 +1321,63 @@ def create_interface():
     .info-box {
         padding: 1.2em;
         border-radius: 8px;
-        background-color: var(--background-fill-secondary);
         margin-bottom: 1em;
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        color: var(--body-text-color);
         line-height: 1.5;
-        border-left: 3px solid var(--border-color-accent);
-        border: 1px solid var(--border-color-primary);
+        border: 1px solid #dee2e6;
+        border-left: 3px solid #6c757d;
+        background-color: #f8f9fa;
+        color: #212529;
     }
     .info-box p strong {
-        color: var(--body-text-color);
+        color: #495057;
         font-weight: 600;
     }
     .hallucination-positive {
         padding: 1.2em;
         border-radius: 8px;
-        background-color: #f8e8e8;
-        border-left: 5px solid #c62828;
+        background-color: #ffeaea;
+        border-left: 5px solid #e53e3e;
         margin-bottom: 1em;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        color: #4d0c0c;
+        color: #742a2a;
     }
     .hallucination-positive h3 {
-        color: #c62828;
+        color: #e53e3e;
         margin-top: 0;
         margin-bottom: 0.5em;
     }
     .hallucination-positive p {
-        color: #5d4141;
+        color: #742a2a;
         line-height: 1.5;
     }
     .hallucination-negative {
         padding: 1.2em;
         border-radius: 8px;
-        background-color: #e8f5e9;
-        border-left: 5px solid #2e7d32;
+        background-color: #f0fff4;
+        border-left: 5px solid #38a169;
         margin-bottom: 1em;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        color: #1b5e20;
+        color: #22543d;
     }
     .hallucination-negative h3 {
-        color: #2e7d32;
+        color: #38a169;
         margin-top: 0;
         margin-bottom: 0.5em;
     }
     .hallucination-negative p {
-        color: #3e5e40;
+        color: #22543d;
         line-height: 1.5;
     }
     .response-box {
         padding: 1.2em;
         border-radius: 8px;
-        background-color: #eceff1;
+        background-color: #f7fafc;
         margin-bottom: 0.8em;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        color: #37474f;
+        color: #2d3748;
         line-height: 1.5;
-        border-left: 3px solid #78909c;
+        border-left: 3px solid #a0aec0;
     }
     .example-queries {
         display: flex;
@@ -1383,42 +1386,46 @@ def create_interface():
         margin-bottom: 15px;
     }
     .example-query {
-        background-color: #e1f5fe;
+        background-color: #ebf8ff;
         padding: 8px 15px;
         border-radius: 18px;
         font-size: 0.9em;
         cursor: pointer;
         transition: all 0.2s;
-        border: 1px solid #b3e5fc;
-        color: #01579b;
+        border: 1px solid #bee3f8;
+        color: #2c5282;
     }
     .example-query:hover {
-        background-color: #b3e5fc;
+        background-color: #bee3f8;
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     }
     .stats-section {
         display: flex;
         justify-content: space-between;
-        background-color: #e3f2fd;
+        background-color: #ebf8ff;
         padding: 15px;
-        border-radius: 8px;
+        border-radius: 10px;
         margin-bottom: 20px;
+        margin-top: 5px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        border: 1px solid #bee3f8;
     }
     .stat-item {
         text-align: center;
         padding: 10px;
     }
     .stat-value {
-        font-size: 1.5em;
+        font-size: 2em;
         font-weight: bold;
-        color: #0d47a1;
+        color: #2c5282;
     }
     .stat-label {
         font-size: 0.9em;
-        color: #1976d2;
+        font-weight: bold;
+        color: #3182ce;
     }
     .feedback-section {
-        border-top: 1px solid #e0e0e0;
+        border-top: 1px solid #e2e8f0;
         padding-top: 15px;
         margin-top: 20px;
     }
@@ -1426,20 +1433,20 @@ def create_interface():
         text-align: center;
         padding: 20px;
         margin-top: 30px;
-        color: #607d8b;
+        color: #718096;
         font-size: 0.9em;
     }
     .processing-status {
         padding: 12px;
-        background-color: #e1f5fe;
-        border-left: 4px solid #0288d1;
+        background-color: #ebf8ff;
+        border-left: 4px solid #3182ce;
         margin-bottom: 15px;
         font-weight: 500;
-        color: #01579b;
+        color: #2c5282;
     }
     .debug-panel {
-        background-color: #f5f5f5;
-        border: 1px solid #e0e0e0;
+        background-color: #f7fafc;
+        border: 1px solid #e2e8f0;
         border-radius: 4px;
         padding: 10px;
         margin-top: 15px;
@@ -1448,13 +1455,15 @@ def create_interface():
         white-space: pre-wrap;
         max-height: 200px;
         overflow-y: auto;
+        color: #4a5568;
     }
     .progress-container {
         padding: 15px;
-        background-color: #fff;
+        background-color: #ffffff;
         border-radius: 8px;
         box-shadow: 0 2px 5px rgba(0,0,0,0.05);
         margin-bottom: 15px;
+        border: 1px solid #e2e8f0;
     }
     .progress-status {
         font-weight: 500;
@@ -1463,7 +1472,7 @@ def create_interface():
         font-size: 0.95em;
     }
     .progress-bar-container {
-        background-color: #e0e0e0;
+        background-color: #edf2f7;
         height: 10px;
         border-radius: 5px;
         overflow: hidden;
@@ -1473,16 +1482,595 @@ def create_interface():
     .progress-bar {
         height: 100%;
         transition: width 0.5s ease;
-        background-image: linear-gradient(to right, #2196F3, #3f51b5);
+        background-image: linear-gradient(to right, #3182ce, #2b6cb0);
     }
     .query-display {
         font-style: italic;
-        color: #666;
+        color: #718096;
         margin-bottom: 10px;
-        background-color: #f5f5f5;
+        background-color: #f7fafc;
         padding: 8px;
         border-radius: 4px;
-        border-left: 3px solid #2196F3;
+        border-left: 3px solid #3182ce;
+    }
+
+    /* Dark theme styles */
+    @media (prefers-color-scheme: dark) {
+        .title {
+            color: #63b3ed;
+        }
+        .subtitle {
+            color: #a0aec0;
+        }
+        .section-title {
+            color: #90cdf4;
+        }
+        .info-box {
+            background-color: #2d3748;
+            color: #e2e8f0;
+            border-color: #4a5568;
+            border-left-color: #718096;
+        }
+        .info-box p strong {
+            color: #f7fafc;
+        }
+        .hallucination-positive {
+            background-color: #553c39;
+            color: #fed7d7;
+            border-left-color: #fc8181;
+        }
+        .hallucination-positive h3 {
+            color: #fc8181;
+        }
+        .hallucination-positive p {
+            color: #fed7d7;
+        }
+        .hallucination-negative {
+            background-color: #22543d;
+            color: #c6f6d5;
+            border-left-color: #68d391;
+        }
+        .hallucination-negative h3 {
+            color: #68d391;
+        }
+        .hallucination-negative p {
+            color: #c6f6d5;
+        }
+        .response-box {
+            background-color: #1a202c;
+            color: #e2e8f0;
+            border-left-color: #4a5568;
+        }
+        .example-query {
+            background-color: #2a4365;
+            border-color: #2c5282;
+            color: #bee3f8;
+        }
+        .example-query:hover {
+            background-color: #3182ce;
+        }
+        .stats-section {
+            background-color: #2a4365;
+            border-color: #2c5282;
+        }
+        .stat-value {
+            color: #bee3f8;
+        }
+        .stat-label {
+            color: #90cdf4;
+        }
+        .feedback-section {
+            border-top-color: #4a5568;
+        }
+        .footer {
+            color: #a0aec0;
+        }
+        .processing-status {
+            background-color: #2a4365;
+            border-left-color: #90cdf4;
+            color: #bee3f8;
+        }
+        .debug-panel {
+            background-color: #1a202c;
+            border-color: #4a5568;
+            color: #e2e8f0;
+        }
+        .progress-container {
+            background-color: #2d3748;
+            border-color: #4a5568;
+        }
+        .progress-bar-container {
+            background-color: #4a5568;
+        }
+        .progress-bar {
+            background-image: linear-gradient(to right, #90cdf4, #63b3ed);
+        }
+        .query-display {
+            color: #a0aec0;
+            background-color: #1a202c;
+            border-left-color: #90cdf4;
+        }
+    }
+
+    /* Gradio theme detection fallbacks */
+    html[data-theme="dark"] .title,
+    .dark .title {
+        color: #63b3ed !important;
+    }
+    html[data-theme="dark"] .subtitle,
+    .dark .subtitle {
+        color: #a0aec0 !important;
+    }
+    html[data-theme="dark"] .section-title,
+    .dark .section-title {
+        color: #90cdf4 !important;
+    }
+    html[data-theme="dark"] .info-box,
+    .dark .info-box {
+        background-color: #2d3748 !important;
+        color: #e2e8f0 !important;
+        border-color: #4a5568 !important;
+        border-left-color: #718096 !important;
+    }
+    html[data-theme="dark"] .info-box p strong,
+    .dark .info-box p strong {
+        color: #f7fafc !important;
+    }
+    html[data-theme="dark"] .response-box,
+    .dark .response-box {
+        background-color: #1a202c !important;
+        color: #e2e8f0 !important;
+        border-left-color: #4a5568 !important;
+    }
+    html[data-theme="dark"] .example-query,
+    .dark .example-query {
+        background-color: #2a4365 !important;
+        border-color: #2c5282 !important;
+        color: #bee3f8 !important;
+    }
+    html[data-theme="dark"] .stats-section,
+    .dark .stats-section {
+        background-color: #2a4365 !important;
+        border-color: #2c5282 !important;
+    }
+    html[data-theme="dark"] .stat-value,
+    .dark .stat-value {
+        color: #bee3f8 !important;
+    }
+    html[data-theme="dark"] .stat-label,
+    .dark .stat-label {
+        color: #90cdf4 !important;
+    }
+    html[data-theme="dark"] .processing-status,
+    .dark .processing-status {
+        background-color: #2a4365 !important;
+        border-left-color: #90cdf4 !important;
+        color: #bee3f8 !important;
+    }
+    html[data-theme="dark"] .debug-panel,
+    .dark .debug-panel {
+        background-color: #1a202c !important;
+        border-color: #4a5568 !important;
+        color: #e2e8f0 !important;
+    }
+    html[data-theme="dark"] .progress-container,
+    .dark .progress-container {
+        background-color: #2d3748 !important;
+        border-color: #4a5568 !important;
+    }
+    html[data-theme="dark"] .progress-bar-container,
+    .dark .progress-bar-container {
+        background-color: #4a5568 !important;
+    }
+    html[data-theme="dark"] .query-display,
+    .dark .query-display {
+        color: #a0aec0 !important;
+        background-color: #1a202c !important;
+        border-left-color: #90cdf4 !important;
+    }
+    
+    /* Additional theme-aware classes */
+    .model-info-bar {
+        background-color: #ebf8ff;
+        padding: 10px 15px;
+        border-radius: 8px;
+        margin-bottom: 15px;
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #bee3f8;
+    }
+    .model-info-section {
+        flex: 1;
+        text-align: center;
+        padding-right: 10px;
+        border-right: 1px solid #bee3f8;
+    }
+    .model-info-section:last-child {
+        border-right: none;
+        padding-right: 0;
+        padding-left: 10px;
+    }
+    .model-label {
+        font-weight: bold;
+        color: #2c5282;
+    }
+    .model-name {
+        font-size: 1.2em;
+        color: #2b6cb0;
+    }
+    .app-title {
+        font-size: 2.2em;
+        font-weight: 600;
+        color: #2c5282;
+        margin-bottom: 0.2em;
+    }
+    .app-subtitle {
+        font-size: 1.3em;
+        color: #4a5568;
+        margin-bottom: 0.8em;
+    }
+    .app-description {
+        font-size: 1.1em;
+        color: #718096;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    .section-meta {
+        font-size: 0.8em;
+        color: #718096;
+    }
+    .divider-line {
+        margin-top: 20px;
+        border-top: 1px dashed #e2e8f0;
+        padding-top: 15px;
+        font-size: 0.9em;
+        color: #718096;
+        text-align: center;
+    }
+    .info-message {
+        padding: 20px;
+        background-color: #ebf8ff;
+        border-radius: 8px;
+        text-align: center;
+        margin: 20px 0;
+        border: 1px solid #bee3f8;
+    }
+    .info-message h3 {
+        margin-top: 0;
+        color: #2c5282;
+    }
+    .error-message {
+        padding: 20px;
+        background-color: #ffeaea;
+        border-radius: 8px;
+        text-align: center;
+        margin: 20px 0;
+        border: 1px solid #fc8181;
+    }
+    .error-message h3 {
+        margin-top: 0;
+        color: #e53e3e;
+    }
+    .perf-metric {
+        font-weight: 500;
+    }
+    .perf-generator {
+        color: #38a169;
+    }
+    .perf-judge {
+        color: #3182ce;
+    }
+    .perf-consistency {
+        color: #805ad5;
+    }
+    .perf-distribution {
+        color: #d69e2e;
+    }
+
+    /* Dark theme versions */
+    @media (prefers-color-scheme: dark) {
+        .model-info-bar {
+            background-color: #2a4365;
+            border-color: #2c5282;
+        }
+        .model-info-section {
+            border-right-color: #2c5282;
+        }
+        .model-label {
+            color: #bee3f8;
+        }
+        .model-name {
+            color: #90cdf4;
+        }
+        .app-title {
+            color: #63b3ed;
+        }
+        .app-subtitle {
+            color: #a0aec0;
+        }
+        .app-description {
+            color: #cbd5e0;
+        }
+        .section-meta {
+            color: #a0aec0;
+        }
+        .divider-line {
+            border-top-color: #4a5568;
+            color: #a0aec0;
+        }
+        .info-message {
+            background-color: #2a4365;
+            border-color: #2c5282;
+        }
+        .info-message h3 {
+            color: #bee3f8;
+        }
+        .error-message {
+            background-color: #553c39;
+            border-color: #fc8181;
+        }
+        .error-message h3 {
+            color: #fc8181;
+        }
+        .perf-generator {
+            color: #68d391;
+        }
+        .perf-judge {
+            color: #90cdf4;
+        }
+        .perf-consistency {
+            color: #b794f6;
+        }
+        .perf-distribution {
+            color: #f6e05e;
+        }
+    }
+
+    /* Gradio fallbacks for new classes */
+    html[data-theme="dark"] .model-info-bar,
+    .dark .model-info-bar {
+        background-color: #2a4365 !important;
+        border-color: #2c5282 !important;
+    }
+    html[data-theme="dark"] .model-label,
+    .dark .model-label {
+        color: #bee3f8 !important;
+    }
+    html[data-theme="dark"] .model-name,
+    .dark .model-name {
+        color: #90cdf4 !important;
+    }
+    html[data-theme="dark"] .app-title,
+    .dark .app-title {
+        color: #63b3ed !important;
+    }
+    html[data-theme="dark"] .app-subtitle,
+    .dark .app-subtitle {
+        color: #a0aec0 !important;
+    }
+    html[data-theme="dark"] .app-description,
+    .dark .app-description {
+        color: #cbd5e0 !important;
+    }
+    html[data-theme="dark"] .section-meta,
+    .dark .section-meta {
+        color: #a0aec0 !important;
+    }
+    html[data-theme="dark"] .divider-line,
+    .dark .divider-line {
+        border-top-color: #4a5568 !important;
+        color: #a0aec0 !important;
+    }
+    
+    /* Progress model info styling */
+    .progress-model-info {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 8px;
+        font-size: 0.85em;
+        color: #4a5568;
+        background-color: #ebf8ff;
+        padding: 5px 10px;
+        border-radius: 4px;
+        border: 1px solid #bee3f8;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        .progress-model-info {
+            color: #a0aec0;
+            background-color: #2a4365;
+            border-color: #2c5282;
+        }
+    }
+    
+    html[data-theme="dark"] .progress-model-info,
+    .dark .progress-model-info {
+        color: #a0aec0 !important;
+        background-color: #2a4365 !important;
+        border-color: #2c5282 !important;
+    }
+    
+    /* Metrics explanation box styling */
+    .metrics-explanation {
+        margin-top: 15px;
+        padding: 12px;
+        background-color: #f7fafc;
+        border-radius: 8px;
+        font-size: 0.95em;
+        color: #2d3748;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        border: 1px solid #e2e8f0;
+    }
+    .metrics-explanation p {
+        margin-bottom: 8px;
+        color: #2c5282;
+    }
+    .metrics-explanation ul {
+        margin-top: 5px;
+        padding-left: 20px;
+        line-height: 1.4;
+    }
+    .metrics-explanation strong {
+        color: #2b6cb0;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        .metrics-explanation {
+            background-color: #2d3748;
+            color: #e2e8f0;
+            border-color: #4a5568;
+        }
+        .metrics-explanation p {
+            color: #90cdf4;
+        }
+        .metrics-explanation strong {
+            color: #bee3f8;
+        }
+    }
+    
+    html[data-theme="dark"] .metrics-explanation,
+    .dark .metrics-explanation {
+        background-color: #2d3748 !important;
+        color: #e2e8f0 !important;
+        border-color: #4a5568 !important;
+    }
+    html[data-theme="dark"] .metrics-explanation p,
+    .dark .metrics-explanation p {
+        color: #90cdf4 !important;
+    }
+    html[data-theme="dark"] .metrics-explanation strong,
+    .dark .metrics-explanation strong {
+        color: #bee3f8 !important;
+    }
+    
+    /* Leaderboard table styling */
+    .leaderboard-container {
+        margin: 15px 0;
+        overflow-x: auto;
+    }
+    .leaderboard-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.95em;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e2e8f0;
+    }
+    .leaderboard-table thead {
+        background-color: #3182ce;
+        color: white;
+    }
+    .leaderboard-table th,
+    .leaderboard-table td {
+        padding: 12px 15px;
+        text-align: left;
+        border-bottom: 1px solid #e2e8f0;
+        color: #2d3748;
+    }
+    .leaderboard-table thead th {
+        color: white;
+        border-bottom-color: #2c5282;
+    }
+    .leaderboard-table tbody tr {
+        transition: background-color 0.3s;
+        background-color: #ffffff;
+    }
+    .leaderboard-table tbody tr:nth-child(even) {
+        background-color: #f7fafc;
+    }
+    .leaderboard-table tbody tr:hover {
+        background-color: #ebf8ff;
+    }
+    .leaderboard-table tbody tr.top-rank-1 {
+        background-color: #f0fff4;
+        color: #22543d;
+        font-weight: bold;
+    }
+    .leaderboard-table tbody tr.top-rank-2 {
+        background-color: #fefcbf;
+        color: #744210;
+        font-weight: 500;
+    }
+    .leaderboard-table tbody tr.top-rank-3 {
+        background-color: #fed7cc;
+        color: #7c2d12;
+        font-weight: 500;
+    }
+    
+    /* Dark theme leaderboard */
+    @media (prefers-color-scheme: dark) {
+        .leaderboard-table {
+            border-color: #4a5568;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+        .leaderboard-table thead {
+            background-color: #2c5282;
+        }
+        .leaderboard-table th,
+        .leaderboard-table td {
+            border-bottom-color: #4a5568;
+            color: #e2e8f0;
+        }
+        .leaderboard-table thead th {
+            border-bottom-color: #1a365d;
+        }
+        .leaderboard-table tbody tr {
+            background-color: #2d3748;
+        }
+        .leaderboard-table tbody tr:nth-child(even) {
+            background-color: #1a202c;
+        }
+        .leaderboard-table tbody tr:hover {
+            background-color: #2a4365;
+        }
+        .leaderboard-table tbody tr.top-rank-1 {
+            background-color: #22543d;
+            color: #c6f6d5;
+        }
+        .leaderboard-table tbody tr.top-rank-2 {
+            background-color: #744210;
+            color: #fefcbf;
+        }
+        .leaderboard-table tbody tr.top-rank-3 {
+            background-color: #7c2d12;
+            color: #fed7cc;
+        }
+    }
+    
+    /* Gradio fallbacks for leaderboard */
+    html[data-theme="dark"] .leaderboard-table,
+    .dark .leaderboard-table {
+        border-color: #4a5568 !important;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
+    }
+    html[data-theme="dark"] .leaderboard-table thead,
+    .dark .leaderboard-table thead {
+        background-color: #2c5282 !important;
+    }
+    html[data-theme="dark"] .leaderboard-table th,
+    html[data-theme="dark"] .leaderboard-table td,
+    .dark .leaderboard-table th,
+    .dark .leaderboard-table td {
+        border-bottom-color: #4a5568 !important;
+        color: #e2e8f0 !important;
+    }
+    html[data-theme="dark"] .leaderboard-table thead th,
+    .dark .leaderboard-table thead th {
+        border-bottom-color: #1a365d !important;
+        color: white !important;
+    }
+    html[data-theme="dark"] .leaderboard-table tbody tr,
+    .dark .leaderboard-table tbody tr {
+        background-color: #2d3748 !important;
+    }
+    html[data-theme="dark"] .leaderboard-table tbody tr:nth-child(even),
+    .dark .leaderboard-table tbody tr:nth-child(even) {
+        background-color: #1a202c !important;
+    }
+    html[data-theme="dark"] .leaderboard-table tbody tr:hover,
+    .dark .leaderboard-table tbody tr:hover {
+        background-color: #2a4365 !important;
     }
     """
     
@@ -1749,14 +2337,14 @@ def create_interface():
             <div class="container">
                 <h2 class="title">Hallucination Detection Results</h2>
                 
-                <div class="model-info-bar" style="background-color: #e1f5fe; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; display: flex; justify-content: space-between;">
-                    <div style="flex: 1; text-align: center; border-right: 1px solid #b3e5fc; padding-right: 10px;">
-                        <div style="font-weight: bold; color: #0277bd;">Generator Model</div>
-                        <div style="font-size: 1.2em; color: #01579b;">{generator_model}</div>
+                <div class="model-info-bar">
+                    <div class="model-info-section">
+                        <div class="model-label">Generator Model</div>
+                        <div class="model-name">{generator_model}</div>
                     </div>
-                    <div style="flex: 1; text-align: center; padding-left: 10px;">
-                        <div style="font-weight: bold; color: #0277bd;">Judge Model</div>
-                        <div style="font-size: 1.2em; color: #01579b;">{judge_model}</div>
+                    <div class="model-info-section">
+                        <div class="model-label">Judge Model</div>
+                        <div class="model-name">{judge_model}</div>
                     </div>
                 </div>
                 
@@ -1789,7 +2377,7 @@ def create_interface():
                     {original_query}
                 </div>
                 
-                <div class="section-title">Original Response <span style="font-size: 0.8em; color: #607d8b;">(generated by {generator_model})</span></div>
+                <div class="section-title">Original Response <span class="section-meta">(generated by {generator_model})</span></div>
                 <div class="response-box">
                     {original_response_safe}
                 </div>
@@ -1804,14 +2392,14 @@ def create_interface():
                     {q}
                 </div>
                 
-                <div class="section-title">Response {i} <span style="font-size: 0.8em; color: #607d8b;">(generated by {generator_model})</span></div>
+                <div class="section-title">Response {i} <span class="section-meta">(generated by {generator_model})</span></div>
                 <div class="response-box">
                     {r}
                 </div>
                 """
             
             html_output += f"""
-                <div class="section-title">Detailed Analysis <span style="font-size: 0.8em; color: #607d8b;">(judged by {judge_model})</span></div>
+                <div class="section-title">Detailed Analysis <span class="section-meta">(judged by {judge_model})</span></div>
                 <div class="info-box">
                     <p><strong>Reasoning:</strong></p>
                     <p>{reasoning_safe}</p>
@@ -1820,7 +2408,7 @@ def create_interface():
                     <p>{conflicting_facts_text_safe}</p>
                 </div>
                 
-                <div style="margin-top: 20px; border-top: 1px dashed #ccc; padding-top: 15px; font-size: 0.9em; color: #607d8b; text-align: center;">
+                <div class="divider-line">
                     Models randomly selected for this analysis: <strong>{generator_model}</strong> (Generator) and <strong>{judge_model}</strong> (Judge)
                 </div>
             </div>
@@ -1945,9 +2533,9 @@ def create_interface():
         gr.HTML(
             """
             <div style="text-align: center; margin-bottom: 1.5rem">
-                <h1 style="font-size: 2.2em; font-weight: 600; color: #1a237e; margin-bottom: 0.2em;">PAS2 - Hallucination Detector</h1>
-                <h3 style="font-size: 1.3em; color: #455a64; margin-bottom: 0.8em;">Advanced AI Response Verification Using Model-as-Judge</h3>
-                <p style="font-size: 1.1em; color: #546e7a; max-width: 800px; margin: 0 auto;">
+                <h1 class="app-title">PAS2 - Hallucination Detector</h1>
+                <h3 class="app-subtitle">Advanced AI Response Verification Using Model-as-Judge</h3>
+                <p class="app-description">
                     This tool detects hallucinations in AI responses by comparing answers to semantically equivalent questions and using a specialized judge model.
                 </p>
             </div>
@@ -2075,9 +2663,8 @@ def create_interface():
                         
                         if not pairs:
                             return (
-                                "<div class=\"info-message\" style=\"padding: 20px; background-color: #e1f5fe; "
-                                "border-radius: 8px; text-align: center; margin: 20px 0;\">"
-                                "<h3 style=\"margin-top: 0; color: #0277bd;\">No Data Available Yet</h3>"
+                                "<div class=\"info-message\">"
+                                "<h3>No Data Available Yet</h3>"
                                 "<p>Try the detector with more queries to populate the leaderboard!</p>"
                                 "</div>"
                             )
@@ -2106,9 +2693,9 @@ def create_interface():
                                 f"<td>{pair.get('judge', 'unknown')}</td>"
                                 f"<td>{round(pair.get('elo_score', 0))}</td>"
                                 f"<td>{pair.get('accuracy')}%</td>"
-                                f"<td style='color: #80cbc4; font-weight: 500;'>{generator_perf}</td>"
-                                f"<td style='color: #90caf9; font-weight: 500;'>{judge_perf}</td>"
-                                f"<td style='color: #ce93d8; font-weight: 500;'>{consistency}</td>"
+                                f"<td class='perf-metric perf-generator'>{generator_perf}</td>"
+                                f"<td class='perf-metric perf-judge'>{judge_perf}</td>"
+                                f"<td class='perf-metric perf-consistency'>{consistency}</td>"
                                 f"<td>{pair.get('total_samples', 0)}</td>"
                                 f"</tr>"
                             )
@@ -2135,13 +2722,13 @@ def create_interface():
                             f"</tbody>"
                             f"</table>"
                             f"</div>"
-                            f"<div style='margin-top: 15px; padding: 12px; background-color: #263238; border-radius: 8px; font-size: 0.95em; color: #e0f7fa; box-shadow: 0 2px 5px rgba(0,0,0,0.2);'>"
-                            f"<p style='margin-bottom: 8px; color: #80deea;'><strong>Model Pair Performance Metrics:</strong></p>"
-                            f"<ul style='margin-top: 5px; padding-left: 20px; line-height: 1.4;'>"
-                            f"<li><strong style='color: #b2dfdb;'>Accuracy</strong>: Percentage of correct hallucination judgments based on user feedback</li>"
-                            f"<li><strong style='color: #b2dfdb;'>Generator Performance</strong>: How well the generator model avoids hallucinations</li>"
-                            f"<li><strong style='color: #b2dfdb;'>Judge Performance</strong>: How accurately the judge model identifies hallucinations</li>"
-                            f"<li><strong style='color: #b2dfdb;'>Consistency</strong>: Weighted measure of how well the pair works together</li>"
+                            f"<div class='metrics-explanation'>"
+                            f"<p><strong>Model Pair Performance Metrics:</strong></p>"
+                            f"<ul>"
+                            f"<li><strong>Accuracy</strong>: Percentage of correct hallucination judgments based on user feedback</li>"
+                            f"<li><strong>Generator Performance</strong>: How well the generator model avoids hallucinations</li>"
+                            f"<li><strong>Judge Performance</strong>: How accurately the judge model identifies hallucinations</li>"
+                            f"<li><strong>Consistency</strong>: Weighted measure of how well the pair works together</li>"
                             f"</ul>"
                             f"</div>"
                         )
@@ -2150,9 +2737,8 @@ def create_interface():
                     except Exception as e:
                         logger.error("Error generating leaderboard HTML: %s", str(e), exc_info=True)
                         return (
-                            f"<div class=\"error-message\" style=\"padding: 20px; background-color: #ffebee; "
-                            f"border-radius: 8px; text-align: center; margin: 20px 0;\">"
-                            f"<h3 style=\"margin-top: 0; color: #c62828;\">Error Loading Leaderboard</h3>"
+                            f"<div class=\"error-message\">"
+                            f"<h3>Error Loading Leaderboard</h3>"
                             f"<p>{str(e)}</p>"
                             f"</div>"
                         )
@@ -2192,24 +2778,6 @@ def create_interface():
                         "<li>deepseek-reasoner</li><li>o4-mini</li><li>gemini-2.5-pro</li>" +
                         "</ul></div></div></div></div></div>"
                     )
-                gr.HTML(
-                    "<style>" +
-                    ".leaderboard-container {margin: 15px 0; overflow-x: auto;}" +
-                    ".leaderboard-table {width: 100%; border-collapse: collapse; font-size: 0.95em; " +
-                    "box-shadow: 0 2px 10px rgba(0,0,0,0.2); border-radius: 8px; overflow: hidden;}" +
-                    ".leaderboard-table thead {background-color: #0d47a1; color: white;}" +
-                    ".leaderboard-table th, .leaderboard-table td {padding: 12px 15px; text-align: left; border-bottom: 1px solid #37474f; color: #eceff1;}" +
-                    ".leaderboard-table tbody tr {transition: background-color 0.3s;}" +
-                    ".leaderboard-table tbody tr:nth-child(even) {background-color: #37474f;}" +
-                    ".leaderboard-table tbody tr:nth-child(odd) {background-color: #455a64;}" +
-                    ".leaderboard-table tbody tr:hover {background-color: #263238;}" +
-                    ".leaderboard-table tbody tr.top-rank-1 {background-color: #004d40; color: #e0f2f1; font-weight: bold;}" +
-                    ".leaderboard-table tbody tr.top-rank-2 {background-color: #1b5e20; color: #e8f5e9; font-weight: 500;}" +
-                    ".leaderboard-table tbody tr.top-rank-3 {background-color: #33691e; color: #f1f8e9; font-weight: 500;}" +
-                    ".leaderboard-table td {position: relative;}" +
-                    ".leaderboard-table td::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none;}" +
-                    "</style>"
-                )
                 
             # Tab 3: Individual Models Leaderboard
             with gr.TabItem("Individual Models", elem_id="user-feedback-tab"):
@@ -2224,9 +2792,8 @@ def create_interface():
                         
                         if not models:
                             return (
-                                "<div class=\"info-message\" style=\"padding: 20px; background-color: #e1f5fe; "
-                                "border-radius: 8px; text-align: center; margin: 20px 0;\">"
-                                "<h3 style=\"margin-top: 0; color: #0277bd;\">No Data Available Yet</h3>"
+                                "<div class=\"info-message\">"
+                                "<h3>No Data Available Yet</h3>"
                                 "<p>Try the detector with more queries to populate the model scores!</p>"
                                 "</div>"
                             )
@@ -2263,10 +2830,10 @@ def create_interface():
                                 f"<td>{model.get('model_name', 'unknown')}</td>"
                                 f"<td>{round(model.get('elo_score', 0))}</td>"
                                 f"<td>{model.get('accuracy')}%</td>"
-                                f"<td style='color: #80cbc4; font-weight: 500;'>{generator_acc}</td>"
-                                f"<td style='color: #90caf9; font-weight: 500;'>{judge_acc}</td>"
+                                f"<td class='perf-metric perf-generator'>{generator_acc}</td>"
+                                f"<td class='perf-metric perf-judge'>{judge_acc}</td>"
                                 f"<td>{model.get('total_samples', 0)}</td>"
-                                f"<td style='color: #ffcc80; font-weight: 500;'>{role_distribution}</td>"
+                                f"<td class='perf-metric perf-distribution'>{role_distribution}</td>"
                                 f"</tr>"
                             )
                         
@@ -2297,9 +2864,8 @@ def create_interface():
                     except Exception as e:
                         logger.error("Error generating model leaderboard HTML: %s", str(e), exc_info=True)
                         return (
-                            f"<div class=\"error-message\" style=\"padding: 20px; background-color: #ffebee; "
-                            f"border-radius: 8px; text-align: center; margin: 20px 0;\">"
-                            f"<h3 style=\"margin-top: 0; color: #c62828;\">Error Loading Model Leaderboard</h3>"
+                            f"<div class=\"error-message\">"
+                            f"<h3>Error Loading Model Leaderboard</h3>"
                             f"<p>{str(e)}</p>"
                             f"</div>"
                         )
@@ -2356,17 +2922,17 @@ def create_interface():
                 accuracy_pct = f"{accuracy * 100:.1f}%"
                 
                 stats_html = f"""
-                <div class="stats-section" style="background-color: #e0f7fa; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-top: 5px;">
+                <div class="stats-section">
                     <div class="stat-item">
-                        <div class="stat-value" style="font-size: 2em; color: #00838f;">{total}</div>
-                        <div class="stat-label" style="font-weight: bold; color: #006064;">Total Responses</div>
+                        <div class="stat-value">{total}</div>
+                        <div class="stat-label">Total Responses</div>
                     </div>
                     <div class="stat-item">
-                        <div class="stat-value" style="font-size: 2em; color: #00838f;">{accuracy_pct}</div>
-                        <div class="stat-label" style="font-weight: bold; color: #006064;">Correct Predictions</div>
+                        <div class="stat-value">{accuracy_pct}</div>
+                        <div class="stat-label">Correct Predictions</div>
                     </div>
                 </div>
-                <div style="text-align: center; margin-top: 10px; font-style: italic; color: #37474f;">
+                <div class="section-meta" style="text-align: center; margin-top: 10px; font-style: italic;">
                     Based on user feedback: {correct} correct out of {total} total predictions
                 </div>
                 """