style: comprehensive CSS overhaul for polished visual design

Major visual improvements:
- Add CSS variables for colors, shadows, and border-radius consistency
- Style Tabs with active states, hover effects, and proper borders
- Add subtle shadows to cards, groups, accordions for depth
- Style secondary buttons (Copy, Download) with hover states
- Improve accordion styling with gradient headers
- Add focus states for accessibility
- Add custom scrollbar styling for output boxes
- Style the footer with CSS class instead of inline styles
- Add responsive breakpoints for mobile
- Better typography with proper font stacks for monospace

The UI now has a cohesive, modern look with proper visual hierarchy.

app.py

@@ -1348,162 +1348,383 @@ def summarize_streaming(
 # Custom CSS for better UI
 custom_css = """
 :root {
-    --primary-color: #3b82f6;
-    --primary-hover: #2563eb;
+    --primary-color: #667eea;
+    --primary-dark: #5a67d8;
+    --primary-light: #a3bffa;
+    --accent-color: #764ba2;
     --bg-color: #f8fafc;
     --card-bg: #ffffff;
     --text-color: #1e293b;
+    --text-muted: #64748b;
     --border-color: #e2e8f0;
+    --border-light: #f1f5f9;
+    --success-bg: #f0fdf4;
+    --success-border: #86efac;
+    --warning-bg: #fef3c7;
+    --warning-border: #fbbf24;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
 }
 
+/* ===== LAYOUT & BASE ===== */
+.gradio-container {
+    max-width: 1400px !important;
+}
+
+/* ===== HEADER ===== */
 .app-header {
     text-align: center;
-    padding: 1.5rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 12px;
-    margin-bottom: 2rem;
+    padding: 2rem 1.5rem;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
+    border-radius: var(--radius-lg);
+    margin-bottom: 1.5rem;
     color: white;
+    box-shadow: var(--shadow-lg);
 }
 
 .app-header h1 {
     margin: 0 0 0.5rem 0;
-    font-size: 2rem;
+    font-size: 2.25rem;
     font-weight: 700;
+    letter-spacing: -0.025em;
 }
 
 .app-header p {
     margin: 0;
     opacity: 0.9;
+    font-size: 1.1rem;
 }
 
 .model-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    background: rgba(255,255,255,0.2);
+    background: rgba(255, 255, 255, 0.2);
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-size: 0.85rem;
     margin-top: 1rem;
+    backdrop-filter: blur(4px);
+}
+
+/* ===== INSTRUCTIONS ===== */
+.instructions {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border-left: 4px solid var(--primary-color);
+    padding: 1rem 1.25rem;
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.instructions ul {
+    margin: 0.5rem 0 0 0;
+    padding-left: 1.25rem;
 }
 
+.instructions li {
+    margin-bottom: 0.35rem;
+    color: var(--text-color);
+}
+
+/* ===== SECTION HEADERS ===== */
 .section-header {
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 0.75rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-light);
 }
 
 .section-icon {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
 }
 
-.instructions {
-    background: #f1f5f9;
-    border-left: 4px solid var(--primary-color);
-    padding: 1rem;
-    border-radius: 0 8px 8px 0;
-    margin-bottom: 1.5rem;
+/* ===== TABS STYLING ===== */
+.gradio-tabs {
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-lg) !important;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    margin-bottom: 1rem;
 }
 
-.instructions ul {
-    margin: 0.5rem 0 0 0;
-    padding-left: 1.5rem;
+.gradio-tabitem {
+    padding: 1rem !important;
+    background: var(--card-bg) !important;
 }
 
-.instructions li {
-    margin-bottom: 0.25rem;
+.tab-nav {
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    padding: 0 !important;
+    gap: 0 !important;
 }
 
-.output-container {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
-    min-height: 200px;
+.tab-nav button {
+    padding: 0.875rem 1.25rem !important;
+    font-weight: 500 !important;
+    color: var(--text-muted) !important;
+    border: none !important;
+    border-bottom: 3px solid transparent !important;
+    background: transparent !important;
+    transition: all 0.2s ease !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
 }
 
-.thinking-box {
-    background: #fef3c7;
-    border: 1px solid #fbbf24;
-    border-radius: 8px;
-    padding: 1rem;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-    white-space: pre-wrap;
+.tab-nav button:hover {
+    color: var(--primary-color) !important;
+    background: rgba(102, 126, 234, 0.05) !important;
 }
 
-.summary-box {
-    background: #f0fdf4;
-    border: 1px solid #86efac;
-    border-radius: 8px;
-    padding: 1rem;
+.tab-nav button.selected {
+    color: var(--primary-color) !important;
+    border-bottom-color: var(--primary-color) !important;
+    background: var(--card-bg) !important;
+    font-weight: 600 !important;
+}
+
+/* ===== GROUPS & CARDS ===== */
+.gradio-group {
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 1rem !important;
+    background: var(--card-bg) !important;
+    box-shadow: var(--shadow-sm) !important;
+    margin-bottom: 1rem !important;
+}
+
+/* ===== ACCORDION STYLING ===== */
+.gradio-accordion {
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-md) !important;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    margin-bottom: 1rem;
+}
+
+.gradio-accordion > .label-wrap {
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
+    padding: 0.875rem 1rem !important;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.gradio-accordion > .label-wrap:hover {
+    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+}
+
+.gradio-accordion > .label-wrap span {
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
+}
+
+.gradio-accordion > div:last-child {
+    padding: 1rem !important;
+    background: var(--card-bg) !important;
 }
 
+/* ===== BUTTONS ===== */
+/* Primary submit button */
 .submit-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
-    padding: 0.75rem 2rem !important;
-    border-radius: 8px !important;
+    padding: 0.875rem 2rem !important;
+    border-radius: var(--radius-md) !important;
     cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s !important;
+    transition: all 0.2s ease !important;
+    box-shadow: var(--shadow-md) !important;
+    width: 100% !important;
+    font-size: 1rem !important;
 }
 
 .submit-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+.submit-btn:active {
+    transform: translateY(0);
 }
 
-.advanced-settings {
-    background: #f8fafc;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
+/* Secondary buttons (Copy, Download, Load) */
+button.secondary, 
+button[size="sm"] {
+    background: var(--card-bg) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-color) !important;
+    font-weight: 500 !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: var(--radius-sm) !important;
+    transition: all 0.2s ease !important;
+    box-shadow: var(--shadow-sm) !important;
 }
 
+button.secondary:hover,
+button[size="sm"]:hover {
+    background: var(--bg-color) !important;
+    border-color: var(--primary-color) !important;
+    color: var(--primary-color) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+/* Small primary buttons (Load Model) */
+button.primary[size="sm"] {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+}
+
+button.primary[size="sm"]:hover {
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
+    color: white !important;
+}
+
+/* ===== INPUT COMPONENTS ===== */
+/* File upload area */
 .file-upload-area {
-    border: 2px dashed #cbd5e1;
-    border-radius: 12px;
-    padding: 2rem;
+    border: 2px dashed var(--border-color) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: 1.5rem !important;
     text-align: center;
-    transition: border-color 0.3s, background 0.3s;
+    transition: all 0.3s ease !important;
+    background: var(--bg-color) !important;
 }
 
 .file-upload-area:hover {
-    border-color: var(--primary-color);
-    background: #f8fafc;
+    border-color: var(--primary-color) !important;
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+
+/* Dropdowns */
+.gradio-dropdown {
+    border-radius: var(--radius-sm) !important;
+}
+
+.gradio-dropdown > div > input {
+    border-radius: var(--radius-sm) !important;
 }
 
+/* Sliders */
+input[type="range"] {
+    accent-color: var(--primary-color);
+}
+
+/* ===== OUTPUT BOXES ===== */
+.thinking-box {
+    background: var(--warning-bg) !important;
+    border: 1px solid var(--warning-border) !important;
+    border-radius: var(--radius-md) !important;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
+    font-size: 0.875rem !important;
+}
+
+.thinking-box textarea {
+    background: transparent !important;
+    border: none !important;
+}
+
+.summary-box {
+    background: var(--success-bg) !important;
+    border: 1px solid var(--success-border) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 1rem !important;
+}
+
+/* ===== MODEL INFO GRID ===== */
 .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
+    font-size: 0.9rem;
 }
 
-.stat-card {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
-    text-align: center;
+.stats-grid table {
+    width: 100%;
+    border-collapse: collapse;
 }
 
-.stat-value {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
+.stats-grid th {
+    text-align: left;
+    padding: 0.5rem;
+    background: var(--bg-color);
+    font-weight: 600;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.stats-grid td {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--border-light);
 }
 
-.stat-label {
+/* ===== FOOTER ===== */
+.footer {
+    text-align: center;
+    margin-top: 2rem;
+    padding: 1.25rem;
+    color: var(--text-muted);
     font-size: 0.85rem;
-    color: #64748b;
-    margin-top: 0.25rem;
+    border-top: 1px solid var(--border-color);
+    background: linear-gradient(180deg, var(--bg-color) 0%, #f1f5f9 100%);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+/* ===== RESPONSIVE ADJUSTMENTS ===== */
+@media (max-width: 768px) {
+    .app-header h1 {
+        font-size: 1.75rem;
+    }
+    
+    .app-header p {
+        font-size: 1rem;
+    }
+    
+    .submit-btn {
+        padding: 0.75rem 1.5rem !important;
+    }
+}
+
+/* ===== FOCUS STATES (Accessibility) ===== */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid var(--primary-color) !important;
+    outline-offset: 2px !important;
+}
+
+/* ===== SCROLLBAR STYLING ===== */
+.thinking-box textarea::-webkit-scrollbar,
+.summary-box::-webkit-scrollbar {
+    width: 8px;
+}
+
+.thinking-box textarea::-webkit-scrollbar-track,
+.summary-box::-webkit-scrollbar-track {
+    background: var(--border-light);
+    border-radius: 4px;
+}
+
+.thinking-box textarea::-webkit-scrollbar-thumb,
+.summary-box::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+.thinking-box textarea::-webkit-scrollbar-thumb:hover,
+.summary-box::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
 }
 """
 
@@ -2056,8 +2277,8 @@ def create_interface():
         
         # Footer
         gr.HTML("""
-        <div style="text-align: center; margin-top: 2rem; padding: 1rem; color: #64748b; font-size: 0.85rem; border-top: 1px solid #e2e8f0;">
-            Bilingual summaries (English & zh-TW) • Powered by <strong>llama-cpp-python</strong> • Running on <strong>HuggingFace Spaces Free Tier</strong><br>
+        <div class="footer">
+            Bilingual summaries (English &amp; zh-TW) • Powered by <strong>llama-cpp-python</strong> • Running on <strong>HuggingFace Spaces Free Tier</strong><br>
             Traditional Chinese conversion via <strong>OpenCC</strong>
         </div>
         """)