Update app.py

app.py

@@ -102,231 +102,268 @@ Please provide a full problem analysis and brainstorming session based on this c
 
 # ── Custom CSS ────────────────────────────────────────────────────────────────
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
 
 * {
-    font-family: 'Sora', sans-serif !important;
+    font-family: 'Inter', sans-serif !important;
+    box-sizing: border-box;
 }
 
 body, .gradio-container {
-    background-color: #0d1117 !important;
-    color: #e2e8f0 !important;
+    background-color: #ffffff !important;
+    color: #111827 !important;
 }
 
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1280px !important;
     margin: 0 auto !important;
+    padding: 0 2rem !important;
 }
 
-/* Header */
+/* ── Header ── */
 #app-header {
-    padding: 2.5rem 0 1.5rem;
-    border-bottom: 1px solid #1e2d3d;
+    padding: 2.75rem 0 2rem;
+    border-bottom: 1px solid #e5e7eb;
     margin-bottom: 2rem;
 }
 
 #app-header h1 {
-    font-size: 1.6rem;
+    font-size: 1.5rem;
     font-weight: 600;
-    color: #e2e8f0;
-    letter-spacing: -0.02em;
-    margin: 0 0 0.3rem 0;
+    color: #111827;
+    letter-spacing: -0.025em;
+    margin: 0 0 0.35rem 0;
+    line-height: 1.3;
 }
 
 #app-header p {
     font-size: 0.875rem;
-    color: #64748b;
+    color: #6b7280;
     margin: 0;
-    font-weight: 300;
+    font-weight: 400;
+    line-height: 1.5;
 }
 
-/* Accent bar */
-#accent-bar {
-    width: 2.5rem;
-    height: 2px;
-    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
-    margin-bottom: 0.75rem;
-    border-radius: 2px;
+#header-tag {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #2563eb;
+    background: #eff6ff;
+    border: 1px solid #bfdbfe;
+    border-radius: 4px;
+    padding: 0.2rem 0.6rem;
+    margin-bottom: 0.85rem;
+}
+
+/* ── Panels ── */
+.input-panel, .output-panel {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 10px !important;
+    padding: 1.5rem !important;
 }
 
-/* Section labels */
+/* ── Section label ── */
 .section-label {
     font-size: 0.7rem !important;
-    font-weight: 500 !important;
+    font-weight: 600 !important;
     text-transform: uppercase !important;
-    letter-spacing: 0.12em !important;
-    color: #475569 !important;
-    margin-bottom: 0.75rem !important;
+    letter-spacing: 0.1em !important;
+    color: #9ca3af !important;
+    margin: 0 0 1rem 0 !important;
 }
 
-/* Input panels */
-.input-panel, .output-panel {
-    background: #111827 !important;
-    border: 1px solid #1e2d3d !important;
+/* ── Textarea ── */
+textarea {
+    background: #f9fafb !important;
+    border: 1px solid #e5e7eb !important;
     border-radius: 8px !important;
-    padding: 1.25rem !important;
-}
-
-/* Textbox */
-textarea, .gr-textbox textarea {
-    background: #0d1117 !important;
-    border: 1px solid #1e2d3d !important;
-    border-radius: 6px !important;
-    color: #cbd5e1 !important;
+    color: #111827 !important;
     font-size: 0.875rem !important;
-    line-height: 1.7 !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    padding: 0.875rem !important;
+    line-height: 1.75 !important;
+    padding: 0.875rem 1rem !important;
     resize: vertical !important;
+    transition: border-color 0.15s, box-shadow 0.15s !important;
 }
 
 textarea:focus {
-    border-color: #0ea5e9 !important;
+    border-color: #2563eb !important;
     outline: none !important;
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08) !important;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
+    background: #ffffff !important;
 }
 
 textarea::placeholder {
-    color: #334155 !important;
+    color: #d1d5db !important;
 }
 
-/* File upload */
-.gr-file, .upload-button {
-    background: #0d1117 !important;
-    border: 1px dashed #1e2d3d !important;
-    border-radius: 6px !important;
-    color: #64748b !important;
+/* ── File upload ── */
+.gr-file {
+    background: #f9fafb !important;
+    border: 1px dashed #d1d5db !important;
+    border-radius: 8px !important;
+    color: #6b7280 !important;
 }
 
-/* Tabs */
+/* ── Tabs ── */
 .tab-nav {
-    border-bottom: 1px solid #1e2d3d !important;
+    border-bottom: 1px solid #e5e7eb !important;
     margin-bottom: 1rem !important;
+    background: transparent !important;
 }
 
 .tab-nav button {
     font-size: 0.8rem !important;
     font-weight: 500 !important;
-    color: #475569 !important;
+    color: #9ca3af !important;
     border: none !important;
     background: transparent !important;
-    padding: 0.5rem 1rem !important;
+    padding: 0.5rem 1rem 0.6rem !important;
     border-radius: 0 !important;
-    letter-spacing: 0.02em !important;
+    letter-spacing: 0.01em !important;
+    transition: color 0.15s !important;
+}
+
+.tab-nav button:hover {
+    color: #374151 !important;
 }
 
 .tab-nav button.selected {
-    color: #0ea5e9 !important;
-    border-bottom: 2px solid #0ea5e9 !important;
+    color: #2563eb !important;
+    border-bottom: 2px solid #2563eb !important;
+    font-weight: 600 !important;
 }
 
-/* Run button */
+/* ── Run button ── */
 #run-btn {
-    background: #0ea5e9 !important;
-    color: #0d1117 !important;
+    background: #2563eb !important;
+    color: #ffffff !important;
     border: none !important;
-    border-radius: 6px !important;
+    border-radius: 8px !important;
     font-size: 0.875rem !important;
     font-weight: 600 !important;
-    padding: 0.7rem 1.75rem !important;
+    padding: 0.7rem 1.5rem !important;
     letter-spacing: 0.01em !important;
-    transition: background 0.15s ease !important;
-    margin-top: 0.75rem !important;
+    transition: background 0.15s ease, box-shadow 0.15s ease !important;
+    margin-top: 0.875rem !important;
     width: 100% !important;
+    cursor: pointer !important;
 }
 
 #run-btn:hover {
-    background: #38bdf8 !important;
+    background: #1d4ed8 !important;
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
 }
 
-/* Output markdown */
+/* ── Output area ── */
 #output-area {
-    background: #0d1117 !important;
-    border: 1px solid #1e2d3d !important;
-    border-radius: 6px !important;
-    padding: 1.25rem !important;
-    min-height: 400px !important;
+    background: #f9fafb !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    padding: 1.25rem 1.5rem !important;
+    min-height: 420px !important;
     font-size: 0.875rem !important;
     line-height: 1.8 !important;
-    color: #cbd5e1 !important;
+    color: #374151 !important;
 }
 
 #output-area h1, #output-area h2, #output-area h3 {
-    color: #e2e8f0 !important;
+    color: #111827 !important;
     font-weight: 600 !important;
-    letter-spacing: -0.01em !important;
-    margin-top: 1.25rem !important;
+    letter-spacing: -0.015em !important;
+    margin-top: 1.5rem !important;
+    margin-bottom: 0.5rem !important;
+}
+
+#output-area h2 {
+    font-size: 1rem !important;
+    border-bottom: 1px solid #f3f4f6 !important;
+    padding-bottom: 0.4rem !important;
 }
 
 #output-area strong {
-    color: #0ea5e9 !important;
-    font-weight: 500 !important;
+    color: #111827 !important;
+    font-weight: 600 !important;
 }
 
 #output-area ul, #output-area ol {
     padding-left: 1.25rem !important;
-    color: #94a3b8 !important;
+    color: #4b5563 !important;
+    margin: 0.4rem 0 !important;
+}
+
+#output-area li {
+    margin-bottom: 0.25rem !important;
+}
+
+#output-area p {
+    color: #4b5563 !important;
 }
 
-#output-area code {
-    background: #1e2d3d !important;
-    border-radius: 3px !important;
-    padding: 0.1em 0.35em !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.82em !important;
-    color: #38bdf8 !important;
+#output-area em {
+    color: #9ca3af !important;
 }
 
-/* Accordion */
+/* ── Accordion ── */
 .gr-accordion {
-    background: #111827 !important;
-    border: 1px solid #1e2d3d !important;
-    border-radius: 6px !important;
-    margin-top: 0.75rem !important;
+    background: #f9fafb !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    margin-top: 0.875rem !important;
+}
+
+.gr-accordion .label-wrap span {
+    font-size: 0.8rem !important;
+    color: #6b7280 !important;
+    font-weight: 500 !important;
 }
 
-.gr-accordion .label-wrap {
+/* ── Labels ── */
+label, .gr-label {
+    color: #6b7280 !important;
     font-size: 0.8rem !important;
-    color: #475569 !important;
     font-weight: 500 !important;
 }
 
-/* Examples */
+/* ── Examples ── */
 .gr-examples {
-    margin-top: 1.5rem !important;
+    margin-top: 1rem !important;
 }
 
 .gr-examples table {
-    background: #111827 !important;
-    border: 1px solid #1e2d3d !important;
-    border-radius: 6px !important;
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
 }
 
 .gr-examples td {
-    color: #64748b !important;
+    color: #6b7280 !important;
     font-size: 0.8rem !important;
+    padding: 0.6rem 1rem !important;
+    border-bottom: 1px solid #f3f4f6 !important;
 }
 
-/* Divider */
-.divider {
-    border: none !important;
-    border-top: 1px solid #1e2d3d !important;
-    margin: 1.5rem 0 !important;
+.gr-examples tr:hover td {
+    background: #f9fafb !important;
+    cursor: pointer !important;
 }
 
-/* Labels */
-label, .gr-label {
-    color: #475569 !important;
-    font-size: 0.8rem !important;
-    font-weight: 500 !important;
-    letter-spacing: 0.03em !important;
+/* ── Divider ── */
+.divider {
+    border: none !important;
+    border-top: 1px solid #e5e7eb !important;
+    margin: 2rem 0 1.5rem !important;
 }
 
-/* Scrollbar */
+/* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: #0d1117; }
-::-webkit-scrollbar-thumb { background: #1e2d3d; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }
+::-webkit-scrollbar-track { background: #f9fafb; }
+::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
 """
 
 # ── Gradio UI ─────────────────────────────────────────────────────────────────
@@ -337,7 +374,7 @@ with gr.Blocks(
 
     gr.HTML("""
         <div id="app-header">
-            <div id="accent-bar"></div>
+            <div id="header-tag">Intern Tool</div>
             <h1>Problem Brainstormer</h1>
             <p>Paste a meeting transcript or upload a document to get structured problem analysis and solution ideas.</p>
         </div>
@@ -362,7 +399,7 @@ with gr.Blocks(
                         file_types=[".pdf"],
                         file_count="single",
                     )
-                    gr.HTML('<p style="font-size:0.75rem;color:#334155;margin-top:0.5rem">Text-based PDFs only. Scanned documents are not supported.</p>')
+                    gr.HTML('<p style="font-size:0.75rem;color:#9ca3af;margin-top:0.5rem">Text-based PDFs only. Scanned documents are not supported.</p>')
 
             run_btn = gr.Button(
                 "Analyze and Brainstorm",