Redesign UI with modern gradient style

- Subtle gradient background with floating glass-like cards
- Output-focused layout (larger summary panel)
- Purple gradient button with hover lift effect
- Improved shadows and depth throughout
- Better typography with Inter font
- Refined section headers with purple accent
- Polished reasoning and sources sections
- Custom scrollbar styling
- Better mobile responsiveness

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -429,46 +429,34 @@ def summarize(
 
 THEME = gr.themes.Soft(
     primary_hue=gr.themes.Color(
-        c50="#f5f3ff",
-        c100="#ede9fe",
-        c200="#ddd6fe",
-        c300="#c4b5fd",
-        c400="#a78bfa",
-        c500="#8b5cf6",
-        c600="#7c3aed",
-        c700="#220475",
-        c800="#1a0359",
-        c900="#130242",
-        c950="#0a0124",
-    ),
-    secondary_hue=gr.themes.Color(
-        c50="#fdfcfa",
-        c100="#f9f7f2",
-        c200="#f5f0e5",
-        c300="#ebe4d4",
-        c400="#ddd4c0",
-        c500="#c9bda6",
-        c600="#b5a78c",
-        c700="#9a8e73",
-        c800="#7f755f",
-        c900="#665e4d",
-        c950="#4d4639",
+        c50="#faf5ff",
+        c100="#f3e8ff",
+        c200="#e9d5ff",
+        c300="#d8b4fe",
+        c400="#c084fc",
+        c500="#a855f7",
+        c600="#9333ea",
+        c700="#7c3aed",
+        c800="#6b21a8",
+        c900="#581c87",
+        c950="#3b0764",
     ),
+    secondary_hue="slate",
     neutral_hue="slate",
-    font=gr.themes.GoogleFont("General Sans"),
+    font=gr.themes.GoogleFont("Inter"),
 ).set(
-    body_background_fill="#f5f2ea",
-    body_background_fill_dark="#f5f2ea",
-    block_background_fill="#ffffff",
-    block_background_fill_dark="#ffffff",
-    block_radius="0.5rem",
-    block_shadow="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    body_background_fill="linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%)",
+    body_background_fill_dark="linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%)",
+    block_background_fill="rgba(255, 255, 255, 0.8)",
+    block_background_fill_dark="rgba(255, 255, 255, 0.8)",
+    block_radius="1rem",
+    block_shadow="0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
     block_border_width="1px",
-    block_border_color="#e2e8f0",
-    button_primary_background_fill="#220475",
-    button_primary_background_fill_hover="#1a0359",
+    block_border_color="rgba(255, 255, 255, 0.8)",
+    button_primary_background_fill="linear-gradient(135deg, #7c3aed 0%, #9333ea 100%)",
+    button_primary_background_fill_hover="linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%)",
     button_primary_text_color="#ffffff",
-    input_background_fill="#ffffff",
+    input_background_fill="rgba(255, 255, 255, 0.9)",
     input_border_color="#e2e8f0",
     input_border_width="1px",
 )
@@ -478,76 +466,120 @@ CSS = """
 .gradio-container {
     max-width: 1400px !important;
     margin: 0 auto !important;
-    padding: 2rem !important;
+    padding: 2rem 2.5rem !important;
+    min-height: 100vh;
 }
 
 /* Header styling */
 .main-header {
     text-align: center;
-    padding: 2rem 1.5rem;
-    background: #ffffff;
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-    border: 1px solid #e2e8f0;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    padding: 2.5rem 2rem;
+    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
+    backdrop-filter: blur(10px);
+    border-radius: 1.5rem;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.05),
+        0 10px 15px -3px rgba(0, 0, 0, 0.05),
+        0 20px 25px -5px rgba(124, 58, 237, 0.05);
 }
 
 .main-header h1 {
-    font-size: 2rem;
-    font-weight: 600;
-    color: #220475;
+    font-size: 2.25rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
 }
 
 .main-header p {
     color: #64748b;
-    font-size: 1rem;
+    font-size: 1.05rem;
     margin: 0;
+    font-weight: 400;
+}
+
+/* Card styling for columns */
+.input-panel {
+    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 1.25rem !important;
+    border: 1px solid rgba(255, 255, 255, 0.8) !important;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.05),
+        0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
+    padding: 1.5rem !important;
+}
+
+.output-panel {
+    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 1.25rem !important;
+    border: 1px solid rgba(255, 255, 255, 0.9) !important;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.05),
+        0 10px 15px -3px rgba(0, 0, 0, 0.08),
+        0 20px 25px -5px rgba(124, 58, 237, 0.08) !important;
+    padding: 1.75rem !important;
+    min-height: 400px;
 }
 
 /* Section headers */
 .section-title {
-    color: #220475 !important;
-    font-size: 1rem !important;
+    font-size: 0.875rem !important;
     font-weight: 600 !important;
-    margin-bottom: 0.75rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    color: #7c3aed !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 0.5rem !important;
+    border-bottom: 2px solid rgba(124, 58, 237, 0.1) !important;
 }
 
 .section-title h3 {
-    color: #220475 !important;
+    color: #7c3aed !important;
+    font-size: 0.875rem !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
     margin: 0 !important;
 }
 
 /* Summary output */
 .summary-text {
-    font-size: 1rem !important;
-    line-height: 1.75 !important;
-    color: #020817 !important;
+    font-size: 1.05rem !important;
+    line-height: 1.8 !important;
+    color: #1e293b !important;
     background: transparent !important;
 }
 
-/* Thinking section */
+/* Thinking/Reasoning section */
 .thinking-section {
-    background: #f5f0e5;
-    border-left: 3px solid #220475;
-    border-radius: 0 0.5rem 0.5rem 0;
-    padding: 1rem 1.25rem;
+    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
+    border-left: 4px solid #9333ea;
+    border-radius: 0 1rem 1rem 0;
+    padding: 1.25rem 1.5rem;
     margin-bottom: 0;
+    box-shadow: inset 0 2px 4px rgba(147, 51, 234, 0.05);
 }
 
 .thinking-section p {
-    color: #220475 !important;
-    font-size: 0.9rem !important;
-    line-height: 1.6 !important;
+    color: #6b21a8 !important;
+    font-size: 0.95rem !important;
+    line-height: 1.7 !important;
     margin: 0 !important;
-    opacity: 0.85;
 }
 
 /* Summary divider */
 .summary-divider {
-    height: 1px;
-    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
-    margin: 1.25rem 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.2), transparent);
+    margin: 1.5rem 0;
+    border-radius: 1px;
 }
 
 /* Summary section */
@@ -557,21 +589,22 @@ CSS = """
 
 /* Sources panel */
 .sources-panel {
-    background: #f9f7f2 !important;
-    border-radius: 0.5rem !important;
-    padding: 1rem !important;
-    font-size: 0.9rem !important;
-    max-height: 400px !important;
+    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
+    border-radius: 1rem !important;
+    padding: 1.25rem !important;
+    font-size: 0.925rem !important;
+    max-height: 350px !important;
     overflow-y: auto !important;
-    color: #020817 !important;
-    border: 1px solid #e2e8f0 !important;
+    color: #374151 !important;
+    border: 1px solid #e5e7eb !important;
 }
 
 .sources-panel p {
-    color: #020817 !important;
-    margin-bottom: 0.5rem !important;
-    padding: 0.5rem 0 !important;
-    border-bottom: 1px solid #e2e8f0 !important;
+    color: #374151 !important;
+    margin-bottom: 0.75rem !important;
+    padding: 0.75rem 0 !important;
+    border-bottom: 1px solid #e5e7eb !important;
+    line-height: 1.6 !important;
 }
 
 .sources-panel p:last-child {
@@ -580,92 +613,119 @@ CSS = """
 }
 
 .sources-panel strong {
-    color: #220475 !important;
+    color: #7c3aed !important;
+    font-weight: 600 !important;
 }
 
 /* Accordion styling */
 .accordion {
     background: transparent !important;
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 0.5rem !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 1rem !important;
+    overflow: hidden !important;
 }
 
 .accordion > .label-wrap {
-    background: #f9f7f2 !important;
-    border-radius: 0.5rem !important;
-    padding: 0.75rem 1rem !important;
+    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
+    padding: 1rem 1.25rem !important;
+    font-weight: 500 !important;
+    color: #374151 !important;
 }
 
 /* Generate button */
 .generate-btn {
-    background: #220475 !important;
+    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
     border: none !important;
-    font-weight: 500 !important;
+    font-weight: 600 !important;
     font-size: 1rem !important;
-    padding: 0.75rem 1.5rem !important;
-    border-radius: 0.5rem !important;
-    transition: all 0.15s ease !important;
+    padding: 1rem 2rem !important;
+    border-radius: 0.875rem !important;
+    transition: all 0.2s ease !important;
     color: #ffffff !important;
+    box-shadow:
+        0 4px 6px -1px rgba(124, 58, 237, 0.3),
+        0 2px 4px -2px rgba(124, 58, 237, 0.2) !important;
+    width: 100% !important;
+    margin-top: 0.5rem !important;
 }
 
 .generate-btn:hover {
-    background: #1a0359 !important;
-    transform: translateY(-1px) !important;
+    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
+    transform: translateY(-2px) !important;
+    box-shadow:
+        0 8px 12px -2px rgba(124, 58, 237, 0.35),
+        0 4px 6px -2px rgba(124, 58, 237, 0.25) !important;
+}
+
+.generate-btn:active {
+    transform: translateY(0) !important;
 }
 
 .generate-btn:disabled {
-    background: #9ca3af !important;
+    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
+    box-shadow: none !important;
+    transform: none !important;
 }
 
 /* Input fields */
-input, textarea {
-    background: #ffffff !important;
+input, textarea, select {
+    background: rgba(255, 255, 255, 0.9) !important;
     border: 1px solid #e2e8f0 !important;
-    color: #020817 !important;
-    border-radius: 0.5rem !important;
+    color: #1e293b !important;
+    border-radius: 0.75rem !important;
+    transition: all 0.2s ease !important;
 }
 
-input:focus, textarea:focus {
-    border-color: #220475 !important;
-    box-shadow: 0 0 0 2px rgba(34, 4, 117, 0.1) !important;
+input:focus, textarea:focus, select:focus {
+    border-color: #9333ea !important;
+    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1) !important;
     outline: none !important;
 }
 
-/* File upload */
-.upload-button {
-    background: #ffffff !important;
-    border: 2px dashed #d5d6ef !important;
-    border-radius: 0.5rem !important;
-    transition: all 0.15s ease !important;
+/* File upload area */
+.upload-button, [data-testid="file"] {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border: 2px dashed #d8b4fe !important;
+    border-radius: 1rem !important;
+    transition: all 0.2s ease !important;
+    padding: 1.5rem !important;
+}
+
+.upload-button:hover, [data-testid="file"]:hover {
+    border-color: #9333ea !important;
+    background: rgba(250, 245, 255, 0.8) !important;
 }
 
-.upload-button:hover {
-    border-color: #220475 !important;
-    background: #f5f0e5 !important;
+/* Labels */
+label {
+    color: #475569 !important;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
 }
 
 /* Footer */
 .footer {
     text-align: center;
-    padding: 1.5rem;
-    margin-top: 1.5rem;
-    color: #64748b;
+    padding: 2rem;
+    margin-top: 2rem;
+    color: #94a3b8;
     font-size: 0.875rem;
 }
 
 .footer a {
-    color: #220475;
+    color: #7c3aed;
     text-decoration: none;
-    transition: opacity 0.15s;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
 .footer a:hover {
-    opacity: 0.7;
+    color: #9333ea;
 }
 
 .footer-divider {
     color: #cbd5e1;
-    margin: 0 0.5rem;
+    margin: 0 0.75rem;
 }
 
 /* Hide default footer */
@@ -679,19 +739,38 @@ footer {
         padding: 1rem !important;
     }
 
+    .main-header {
+        padding: 1.75rem 1.25rem;
+        border-radius: 1rem;
+    }
+
     .main-header h1 {
-        font-size: 1.5rem;
+        font-size: 1.75rem;
     }
 
-    .main-header {
-        padding: 1.5rem 1rem;
+    .input-panel, .output-panel {
+        border-radius: 1rem !important;
+        padding: 1.25rem !important;
     }
 }
 
-/* Loading state */
-.generating {
-    opacity: 0.7;
-    pointer-events: none;
+/* Smooth scrollbar for sources */
+.sources-panel::-webkit-scrollbar {
+    width: 6px;
+}
+
+.sources-panel::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+}
+
+.sources-panel::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+.sources-panel::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
 }
 """
 
@@ -713,22 +792,22 @@ def create_app() -> gr.Blocks:
         """)
 
         with gr.Row(equal_height=False):
-            # Left column: Inputs
-            with gr.Column(scale=1):
-                gr.Markdown("### Upload Document", elem_classes=["section-title"])
+            # Left column: Inputs (compact)
+            with gr.Column(scale=2, elem_classes=["input-panel"]):
+                gr.Markdown("### Document", elem_classes=["section-title"])
 
                 pdf_input = gr.File(
-                    label="PDF Document",
+                    label="Upload PDF",
                     file_types=[".pdf"],
                     type="filepath",
                 )
 
-                gr.Markdown("### Settings", elem_classes=["section-title"])
+                gr.Markdown("### Options", elem_classes=["section-title"])
 
                 language = gr.Dropdown(
                     choices=list(LANGUAGES.keys()),
                     value="German",
-                    label="Output Language",
+                    label="Language",
                 )
 
                 words = gr.Slider(
@@ -736,13 +815,13 @@ def create_app() -> gr.Blocks:
                     maximum=800,
                     value=250,
                     step=50,
-                    label="Target Word Count",
-                    info="Longer summaries include more citations",
+                    label="Summary Length",
+                    info="Word count target",
                 )
 
                 custom_instruction = gr.Textbox(
-                    label="Custom Instructions (Optional)",
-                    placeholder="e.g., Focus on methodology, Use bullet points",
+                    label="Instructions (Optional)",
+                    placeholder="Focus on key findings...",
                     lines=2,
                 )
 
@@ -753,17 +832,17 @@ def create_app() -> gr.Blocks:
                     elem_classes=["generate-btn"],
                 )
 
-            # Right column: Output
-            with gr.Column(scale=1):
+            # Right column: Output (larger, prominent)
+            with gr.Column(scale=3, elem_classes=["output-panel"]):
                 gr.Markdown("### Summary", elem_classes=["section-title"])
 
                 summary_output = gr.Markdown(
-                    value="*Your summary will appear here...*",
+                    value="*Upload a PDF and click Generate to create a grounded summary with citations.*",
                     elem_classes=["summary-text"],
                 )
 
                 with gr.Accordion(
-                    "Source Citations",
+                    "View Source Citations",
                     open=False,
                     visible=False,
                 ) as sources_accordion: