Upload app.py with huggingface_hub

app.py

@@ -1,339 +1,797 @@
 import gradio as gr
+import os
 
+# ─── Custom CSS ───────────────────────────────────────────────────────────────
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-    --bg:           #0a0a0a;
-    --bg-card:      #111111;
-    --bg-input:     #141414;
-    --bg-hover:     #1a1a1a;
-
-    --border:       rgba(255, 255, 255, 0.07);
-    --border-hover: rgba(255, 255, 255, 0.14);
+    /* Dark theme (default) */
+    --bg-primary: #09090b;
+    --bg-secondary: #111113;
+    --bg-tertiary: #18181b;
+    --bg-card: rgba(255, 255, 255, 0.03);
+    --bg-card-hover: rgba(255, 255, 255, 0.05);
+    --bg-glass: rgba(255, 255, 255, 0.04);
+    --bg-glass-strong: rgba(255, 255, 255, 0.07);
+    --bg-input: rgba(255, 255, 255, 0.04);
+
+    --border-primary: rgba(255, 255, 255, 0.08);
+    --border-secondary: rgba(255, 255, 255, 0.12);
     --border-focus: rgba(255, 255, 255, 0.25);
+    --border-glass: rgba(255, 255, 255, 0.1);
+
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #52525b;
+    --text-inverse: #09090b;
+
+    --accent: #22c55e;
+    --accent-soft: rgba(34, 197, 94, 0.12);
+    --accent-glow: rgba(34, 197, 94, 0.25);
+
+    --purple: #a855f7;
+    --purple-soft: rgba(168, 85, 247, 0.12);
+    --blue: #3b82f6;
+    --blue-soft: rgba(59, 130, 246, 0.12);
+
+    --blur-sm: 8px;
+    --blur-md: 16px;
+    --blur-lg: 24px;
+    --blur-xl: 40px;
+
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 40px rgba(34, 197, 94, 0.15);
+
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-    --text:         #ffffff;
-    --text-muted:   #6b6b6b;
-    --text-dim:     #3d3d3d;
+/* Light theme */
+[data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f4f4f5;
+    --bg-tertiary: #e4e4e7;
+    --bg-card: rgba(0, 0, 0, 0.02);
+    --bg-card-hover: rgba(0, 0, 0, 0.04);
+    --bg-glass: rgba(255, 255, 255, 0.7);
+    --bg-glass-strong: rgba(255, 255, 255, 0.85);
+    --bg-input: rgba(0, 0, 0, 0.03);
+
+    --border-primary: rgba(0, 0, 0, 0.08);
+    --border-secondary: rgba(0, 0, 0, 0.12);
+    --border-focus: rgba(0, 0, 0, 0.25);
+    --border-glass: rgba(255, 255, 255, 0.5);
+
+    --text-primary: #09090b;
+    --text-secondary: #52525b;
+    --text-tertiary: #a1a1aa;
+    --text-inverse: #fafafa;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
 
-    --green:        #22c55e;
-    --green-dim:    rgba(34, 197, 94, 0.15);
+/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 
-    --user-bg:      #1c1c1c;
-    --bot-bg:       #111111;
+html {
+    scroll-behavior: smooth;
+    -webkit-text-size-adjust: 100%;
+}
 
-    --font:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-    --mono:         'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
+body {
+    font-family: var(--font-sans) !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    letter-spacing: -0.01em !important;
+    color: var(--text-primary) !important;
+    background: var(--bg-primary) !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    overflow-x: hidden !important;
+}
 
-    --r-sm:         4px;
-    --r-md:         6px;
-    --r-lg:         8px;
+/* ─── Grain Overlay ────────────────────────────────────────────────────────── */
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+    opacity: 0.015;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 128px 128px;
 }
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* ─── Gradient Orbs (Background Depth) ─────────────────────────────────────── */
+body::after {
+    content: '';
+    position: fixed;
+    top: -20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80vw;
+    height: 80vh;
+    background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0.5;
+}
 
-body,
+/* ─── Gradio Container ─────────────────────────────────────────────────────── */
 .gradio-container,
 .gradio-container > .main,
 .gradio-container > .main > .wrap {
-    background: var(--bg) !important;
-    color: var(--text) !important;
-    font-family: var(--font) !important;
-    font-size: 13px !important;
-    line-height: 1.5 !important;
-    letter-spacing: -0.01em !important;
-    -webkit-font-smoothing: antialiased !important;
+    background: transparent !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+}
+
+/* ─── Navbar / Top Bar ─────────────────────────────────────────────────────── */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 24px;
+    background: var(--bg-glass-strong);
+    backdrop-filter: blur(var(--blur-lg));
+    -webkit-backdrop-filter: blur(var(--blur-lg));
+    border-bottom: 1px solid var(--border-primary);
+    transition: background var(--transition-base), border-color var(--transition-base);
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+}
+
+.navbar-logo {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--accent), var(--purple));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 14px;
+    color: var(--text-inverse);
+    box-shadow: var(--shadow-glow);
+}
+
+.navbar-title {
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+}
+
+.navbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.theme-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-full);
+    background: var(--bg-card);
+    border: 1px solid var(--border-primary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.theme-toggle:hover {
+    background: var(--bg-card-hover);
+    border-color: var(--border-secondary);
+    color: var(--text-primary);
+}
+
+.theme-toggle svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* ─── Hero Section ─────────────────────────────────────────────────────────── */
+.hero {
+    padding: 120px 24px 60px;
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-full);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-primary);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 24px;
+    backdrop-filter: blur(var(--blur-sm));
+    -webkit-backdrop-filter: blur(var(--blur-sm));
+}
+
+.hero-badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.2); }
+}
+
+.hero h1 {
+    font-size: clamp(2.5rem, 6vw, 4rem) !important;
+    font-weight: 800 !important;
+    letter-spacing: -0.04em !important;
+    line-height: 1.1 !important;
+    margin-bottom: 16px !important;
+    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero p {
+    font-size: 18px;
+    color: var(--text-secondary);
+    max-width: 560px;
+    margin: 0 auto 32px;
+    line-height: 1.7;
+}
+
+.hero-cta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+    border: none;
+}
+
+.btn-primary {
+    background: var(--text-primary);
+    color: var(--text-inverse);
+}
+
+.btn-primary:hover {
+    opacity: 0.85;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-card-hover);
+    border-color: var(--border-secondary);
+}
+
+/* ─── Features Section ─────────────────────────────────────────────────────── */
+.features {
+    padding: 40px 24px 60px;
+    max-width: 1100px;
+    margin: 0 auto;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+}
+
+.feature-card {
+    padding: 24px;
+    border-radius: var(--radius-lg);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-primary);
+    backdrop-filter: blur(var(--blur-md));
+    -webkit-backdrop-filter: blur(var(--blur-md));
+    transition: all var(--transition-base);
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, transparent 0%, var(--bg-card-hover) 100%);
+    opacity: 0;
+    transition: opacity var(--transition-base);
+}
+
+.feature-card:hover {
+    border-color: var(--border-secondary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+.feature-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    background: var(--bg-card);
+    border: 1px solid var(--border-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+    color: var(--accent);
+}
+
+.feature-card h3 {
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+}
+
+.feature-card p {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+/* ─── Chat Section ─────────────────────────────────────────────────────────── */
+.chat-section {
+    padding: 40px 24px 80px;
+    max-width: 900px;
+    margin: 0 auto;
 }
 
-.sidebar, aside {
-    background: var(--bg) !important;
-    border-right: 1px solid var(--border) !important;
-    padding: 28px 20px !important;
-    min-width: 200px !important;
-    max-width: 220px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 0 !important;
+.chat-container {
+    border-radius: var(--radius-xl);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-primary);
+    backdrop-filter: blur(var(--blur-lg));
+    -webkit-backdrop-filter: blur(var(--blur-lg));
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
 }
 
-.sidebar *, aside * { color: var(--text) !important; }
+.chat-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-primary);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: var(--bg-glass-strong);
+}
+
+.chat-header-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.chat-header h3 {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--text-primary);
+}
+
+.chat-header span {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    margin-left: auto;
+}
+
+/* ─── Gradio Overrides ─────────────────────────────────────────────────────── */
+.gradio-container .sidebar,
+.gradio-container aside {
+    background: var(--bg-glass-strong) !important;
+    backdrop-filter: blur(var(--blur-lg)) !important;
+    -webkit-backdrop-filter: blur(var(--blur-lg)) !important;
+    border-right: 1px solid var(--border-primary) !important;
+    padding: 80px 20px 24px !important;
+    min-width: 220px !important;
+    max-width: 240px !important;
+}
 
 .sidebar h1, aside h1 {
-    font-family: var(--font) !important;
-    font-size: 15px !important;
+    font-family: var(--font-sans) !important;
+    font-size: 16px !important;
     font-weight: 700 !important;
     letter-spacing: -0.03em !important;
-    color: var(--text) !important;
-    line-height: 1.2 !important;
-    margin-bottom: 14px !important;
-}
-
-.sidebar h1::before, aside h1::before {
-    content: '● ' !important;
-    color: var(--green) !important;
-    font-size: 10px !important;
-    letter-spacing: 0 !important;
+    color: var(--text-primary) !important;
+    margin-bottom: 12px !important;
 }
 
 .sidebar p, aside p {
     font-size: 12px !important;
-    line-height: 1.65 !important;
-    color: var(--text-muted) !important;
-    font-weight: 400 !important;
-    letter-spacing: 0 !important;
-    margin-bottom: 0 !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.6 !important;
 }
 
 .sidebar button, aside button {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-    margin-top: 18px !important;
+    margin-top: 16px !important;
     padding: 8px 16px !important;
-    height: 34px !important;
-    background: transparent !important;
-    color: var(--text) !important;
-    border: 1px solid var(--border-hover) !important;
-    border-radius: var(--r-md) !important;
-    font-family: var(--font) !important;
+    height: 36px !important;
+    background: var(--bg-card) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
     font-size: 12px !important;
     font-weight: 500 !important;
-    letter-spacing: -0.01em !important;
     cursor: pointer !important;
-    transition: border-color 0.12s, background 0.12s !important;
+    transition: all var(--transition-fast) !important;
 }
 
 .sidebar button:hover, aside button:hover {
-    background: var(--bg-hover) !important;
-    border-color: var(--border-focus) !important;
-}
-
-.contain, .gap, .wrap,
-div[class*="col"], div[class*="row"],
-.gradio-container .block {
-    background: var(--bg) !important;
-    box-shadow: none !important;
+    background: var(--bg-card-hover) !important;
+    border-color: var(--border-secondary) !important;
 }
 
 .chatbot,
 div[data-testid="chatbot"] {
-    background: var(--bg-card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-lg) !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
     box-shadow: none !important;
-    overflow: hidden !important;
-    height: 420px !important;
-    max-height: 420px !important;
-    min-height: 420px !important;
-    flex-shrink: 0 !important;
-}
-
-.sidebar-collapse-btn,
-button[aria-label="Collapse sidebar"],
-button[aria-label="Hide sidebar"],
-.sidebar-toggle {
-    display: none !important;
-}
-
-.chatbot .label-wrap,
-div[data-testid="chatbot"] .label-wrap {
-    background: var(--bg-card) !important;
-    border-bottom: 1px solid var(--border) !important;
-    padding: 9px 14px !important;
-}
-
-.chatbot .label-wrap span,
-div[data-testid="chatbot"] .label-wrap span {
-    font-family: var(--mono) !important;
-    font-size: 10px !important;
-    font-weight: 500 !important;
-    letter-spacing: 0.1em !important;
-    color: var(--text-muted) !important;
-    text-transform: uppercase !important;
+    height: 480px !important;
+    max-height: 480px !important;
 }
 
 .chatbot .message-wrap,
 div[data-testid="chatbot"] .message-wrap {
-    padding: 14px !important;
-    background: var(--bg-card) !important;
-    max-height: 340px !important;
-    overflow-y: auto !important;
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 8px !important;
+    padding: 16px !important;
+    background: transparent !important;
 }
 
 .message {
-    max-width: 82% !important;
-    padding: 9px 13px !important;
-    border-radius: var(--r-md) !important;
-    font-family: var(--font) !important;
+    max-width: 80% !important;
+    padding: 10px 14px !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
     font-size: 13px !important;
     line-height: 1.6 !important;
-    letter-spacing: 0 !important;
 }
 
 .message.user, .user.message {
-    background: var(--user-bg) !important;
-    color: var(--text) !important;
+    background: var(--bg-glass-strong) !important;
+    color: var(--text-primary) !important;
     align-self: flex-end !important;
-    border: 1px solid var(--border) !important;
-    border-bottom-right-radius: var(--r-sm) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-bottom-right-radius: var(--radius-sm) !important;
+    backdrop-filter: blur(var(--blur-sm)) !important;
+    -webkit-backdrop-filter: blur(var(--blur-sm)) !important;
 }
 
 .message.bot, .bot.message {
-    background: var(--bot-bg) !important;
-    color: rgba(255,255,255,0.85) !important;
+    background: var(--bg-card) !important;
+    color: var(--text-secondary) !important;
     align-self: flex-start !important;
-    border: 1px solid var(--border) !important;
-    border-bottom-left-radius: var(--r-sm) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-bottom-left-radius: var(--radius-sm) !important;
 }
 
 .message code {
-    font-family: var(--mono) !important;
-    font-size: 11px !important;
-    background: #1a1a1a !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-sm) !important;
-    padding: 1px 5px !important;
-    color: var(--green) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 12px !important;
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-sm) !important;
+    padding: 2px 6px !important;
+    color: var(--accent) !important;
 }
 
 .message pre {
-    font-family: var(--mono) !important;
-    font-size: 11px !important;
-    background: #111 !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-md) !important;
-    padding: 10px 12px !important;
-    color: rgba(255,255,255,0.75) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 12px !important;
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 12px !important;
+    color: var(--text-secondary) !important;
     overflow-x: auto !important;
-    margin-top: 6px !important;
+    margin-top: 8px !important;
 }
 
 textarea,
 input[type="text"],
 .scroll-hide {
     background: var(--bg-input) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-md) !important;
-    color: var(--text) !important;
-    font-family: var(--font) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    color: var(--text-primary) !important;
+    font-family: var(--font-sans) !important;
     font-size: 13px !important;
-    line-height: 1.5 !important;
-    padding: 9px 12px !important;
+    padding: 10px 14px !important;
     resize: none !important;
-    transition: border-color 0.12s !important;
-    caret-color: var(--green) !important;
-    letter-spacing: 0 !important;
+    transition: border-color var(--transition-fast) !important;
+    caret-color: var(--accent) !important;
 }
 
 textarea:focus, input[type="text"]:focus {
     border-color: var(--border-focus) !important;
     outline: none !important;
-    box-shadow: none !important;
+    box-shadow: 0 0 0 3px var(--accent-soft) !important;
 }
 
 textarea::placeholder, input[type="text"]::placeholder {
-    color: var(--text-dim) !important;
+    color: var(--text-tertiary) !important;
 }
 
 button[variant="primary"], .submit-btn {
-    background: var(--text) !important;
-    color: var(--bg) !important;
+    background: var(--text-primary) !important;
+    color: var(--text-inverse) !important;
     border: none !important;
-    border-radius: var(--r-md) !important;
-    font-family: var(--font) !important;
-    font-size: 12px !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 13px !important;
     font-weight: 600 !important;
-    height: 34px !important;
-    padding: 0 16px !important;
-    letter-spacing: -0.01em !important;
+    height: 38px !important;
+    padding: 0 18px !important;
     cursor: pointer !important;
-    transition: opacity 0.12s !important;
+    transition: all var(--transition-fast) !important;
 }
 
 button[variant="primary"]:hover, .submit-btn:hover {
-    opacity: 0.88 !important;
+    opacity: 0.85;
+    transform: translateY(-1px);
 }
 
 button[variant="secondary"] {
     background: transparent !important;
-    color: var(--text-muted) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-md) !important;
-    font-family: var(--font) !important;
+    color: var(--text-secondary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-sans) !important;
     font-size: 12px !important;
-    height: 32px !important;
-    padding: 0 12px !important;
-    transition: border-color 0.12s, color 0.12s !important;
+    height: 34px !important;
+    padding: 0 14px !important;
+    transition: all var(--transition-fast) !important;
 }
 
 button[variant="secondary"]:hover {
-    border-color: var(--border-focus) !important;
-    color: var(--text) !important;
+    border-color: var(--border-secondary) !important;
+    color: var(--text-primary) !important;
+    background: var(--bg-card) !important;
 }
 
 label span, .label-wrap span {
-    font-family: var(--mono) !important;
+    font-family: var(--font-mono) !important;
     font-size: 10px !important;
     font-weight: 500 !important;
-    letter-spacing: 0.1em !important;
-    color: var(--text-muted) !important;
+    letter-spacing: 0.08em !important;
+    color: var(--text-tertiary) !important;
     text-transform: uppercase !important;
 }
 
 .block, .gr-block {
-    background: var(--bg) !important;
-    border-color: var(--border) !important;
-    border-radius: var(--r-lg) !important;
+    background: transparent !important;
+    border-color: var(--border-primary) !important;
+    border-radius: var(--radius-lg) !important;
     box-shadow: none !important;
 }
 
-.examples table { border: none !important; }
-
 .examples td {
     background: var(--bg-card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-sm) !important;
-    font-family: var(--font) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-sm) !important;
+    font-family: var(--font-sans) !important;
     font-size: 12px !important;
-    color: var(--text-muted) !important;
-    padding: 7px 11px !important;
+    color: var(--text-secondary) !important;
+    padding: 8px 12px !important;
     cursor: pointer !important;
-    transition: border-color 0.12s, color 0.12s !important;
+    transition: all var(--transition-fast) !important;
 }
 
 .examples td:hover {
-    border-color: var(--border-hover) !important;
-    color: var(--text) !important;
+    border-color: var(--border-secondary) !important;
+    color: var(--text-primary) !important;
+    background: var(--bg-card-hover) !important;
 }
 
-::-webkit-scrollbar { width: 3px; height: 3px; }
+/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 99px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
-* { scrollbar-width: thin !important; scrollbar-color: var(--border-hover) transparent !important; }
+::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
+* { scrollbar-width: thin !important; scrollbar-color: var(--border-secondary) transparent !important; }
+
+/* ─── Footer ───────────────────────────────────────────────────────────────── */
+.footer {
+    padding: 24px;
+    text-align: center;
+    border-top: 1px solid var(--border-primary);
+    color: var(--text-tertiary);
+    font-size: 12px;
+}
+
+.footer a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
 
+.footer a:hover {
+    color: var(--text-primary);
+}
+
+/* ─── Hide Gradio Footer ───────────────────────────────────────────────────── */
 footer, .footer, .built-with { display: none !important; }
 
+/* ─── Animations ───────────────────────────────────────────────────────────── */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.hero { animation: fadeInUp 0.6s ease-out; }
+.features-grid { animation: fadeInUp 0.6s ease-out 0.1s both; }
+.chat-section { animation: fadeInUp 0.6s ease-out 0.2s both; }
+
+/* ─── Responsive ───────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
-    .sidebar, aside {
-        min-width: 100% !important;
-        max-width: 100% !important;
-        border-right: none !important;
-        border-bottom: 1px solid var(--border) !important;
-        padding: 20px 16px !important;
+    .navbar { padding: 10px 16px; }
+    .hero { padding: 100px 16px 40px; }
+    .hero h1 { font-size: 2rem !important; }
+    .hero p { font-size: 15px; }
+    .features { padding: 24px 16px 40px; }
+    .chat-section { padding: 24px 16px 60px; }
+    
+    .gradio-container .sidebar,
+    .gradio-container aside {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        bottom: 0 !important;
+        width: 280px !important;
+        max-width: 80vw !important;
+        z-index: 999 !important;
+        transform: translateX(-100%) !important;
+        transition: transform var(--transition-base) !important;
     }
-    .message { max-width: 92% !important; }
+    
+    .gradio-container .sidebar.open,
+    .gradio-container aside.open {
+        transform: translateX(0) !important;
+    }
+    
+    .message { max-width: 90% !important; }
+}
+
+/* ─── Reduced Motion ───────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+"""
+
+# ─── Custom JS ────────────────────────────────────────────────────────────────
+custom_js = """
+function initTheme() {
+    const stored = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = stored || (prefersDark ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+    updateThemeIcon(theme);
+}
+
+function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    updateThemeIcon(next);
+}
+
+function updateThemeIcon(theme) {
+    const btn = document.querySelector('.theme-toggle');
+    if (!btn) return;
+    const isDark = theme === 'dark';
+    btn.innerHTML = isDark 
+        ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>'
+        : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>';
 }
+
+function setupNavbar() {
+    const navbar = document.createElement('nav');
+    navbar.className = 'navbar';
+    navbar.innerHTML = `
+        <div class="navbar-brand">
+            <div class="navbar-logo">Y</div>
+            <span class="navbar-title">Yuuki-RxG</span>
+        </div>
+        <div class="navbar-actions">
+            <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme"></button>
+        </div>
+    `;
+    document.body.insertBefore(navbar, document.body.firstChild);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    setupNavbar();
+});
 """
 
+# ─── App ──────────────────────────────────────────────────────────────────────
 with gr.Blocks(
     fill_height=True,
     css=custom_css,
+    js=custom_js,
     title="Yuuki-RxG",
     theme=gr.themes.Base(
         primary_hue="zinc",
@@ -343,44 +801,115 @@ with gr.Blocks(
         radius_size=gr.themes.sizes.radius_sm,
         spacing_size=gr.themes.sizes.spacing_sm,
     ).set(
-        body_background_fill="#0a0a0a",
-        body_text_color="#ffffff",
-        background_fill_primary="#0a0a0a",
-        background_fill_secondary="#111111",
-        border_color_primary="rgba(255,255,255,0.07)",
+        body_background_fill="#09090b",
+        body_text_color="#fafafa",
+        background_fill_primary="#09090b",
+        background_fill_secondary="#111113",
+        border_color_primary="rgba(255,255,255,0.08)",
         color_accent="#22c55e",
         color_accent_soft="rgba(34,197,94,0.12)",
-        button_primary_background_fill="#ffffff",
-        button_primary_text_color="#0a0a0a",
-        button_primary_background_fill_hover="#e5e5e5",
+        button_primary_background_fill="#fafafa",
+        button_primary_text_color="#09090b",
+        button_primary_background_fill_hover="#e4e4e7",
         button_secondary_background_fill="transparent",
-        button_secondary_border_color="rgba(255,255,255,0.07)",
-        button_secondary_text_color="#6b6b6b",
-        block_border_color="rgba(255,255,255,0.07)",
-        block_background_fill="#111111",
+        button_secondary_border_color="rgba(255,255,255,0.08)",
+        button_secondary_text_color="#a1a1aa",
+        block_border_color="rgba(255,255,255,0.08)",
+        block_background_fill="transparent",
         block_shadow="none",
-        input_background_fill="#141414",
-        input_border_color="rgba(255,255,255,0.07)",
+        input_background_fill="rgba(255,255,255,0.04)",
+        input_border_color="rgba(255,255,255,0.08)",
         input_border_color_focus="rgba(255,255,255,0.25)",
         input_shadow_focus="none",
         shadow_drop="none",
         shadow_drop_lg="none",
     )
 ) as demo:
-    with gr.Sidebar():
-        gr.Markdown("# Yuuki-RxG")
-        gr.Markdown(
-            "Modelo servido via featherless-ai. "
-            "Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia."
+    # Hero Section
+    gr.HTML("""
+        <section class="hero">
+            <div class="hero-badge">
+                <span class="hero-badge-dot"></span>
+                Powered by Featherless AI
+            </div>
+            <h1>Yuuki-RxG</h1>
+            <p>Modelo de lenguaje de última generación servido vía featherless-ai. Inferencia rápida, segura y con autenticación Hugging Face.</p>
+            <div class="hero-cta">
+                <a href="#chat" class="btn btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
+                    Iniciar chat
+                </a>
+                <a href="https://huggingface.co/OpceanAI/Yuuki-RxG" target="_blank" class="btn btn-secondary">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1-2.5-1.5-5.5-1.5-8 0-2-1-3-1-3-1-.28 1.15-.28 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18H6a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h3"/></svg>
+                    Ver modelo
+                </a>
+            </div>
+        </section>
+    """)
+
+    # Features Section
+    gr.HTML("""
+        <section class="features">
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+                    </div>
+                    <h3>Inferencia Ultra-Rápida</h3>
+                    <p>Respuestas en milisegundos gracias a la infraestructura optimizada de Featherless AI.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                    </div>
+                    <h3>Autenticación Segura</h3>
+                    <p>Acceso protegido con OAuth de Hugging Face. Solo usuarios autorizados pueden interactuar.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
+                    </div>
+                    <h3>Privacidad Primero</h3>
+                    <p>Tus conversaciones no se almacenan. Cada sesión es efímera y completamente privada.</p>
+                </div>
+            </div>
+        </section>
+    """)
+
+    # Chat Section
+    with gr.Group(elem_classes="chat-section"):
+        gr.HTML("""
+            <div class="chat-container" id="chat">
+                <div class="chat-header">
+                    <span class="chat-header-dot"></span>
+                    <h3>Chat con Yuuki-RxG</h3>
+                    <span>Featherless AI</span>
+                </div>
+            </div>
+        """)
+        
+        with gr.Sidebar():
+            gr.Markdown("# Yuuki-RxG")
+            gr.Markdown(
+                "Modelo servido via featherless-ai. "
+                "Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia."
+            )
+            button = gr.LoginButton("Iniciar sesión")
+
+        gr.load(
+            "models/OpceanAI/Yuuki-RxG",
+            accept_token=button,
+            provider="featherless-ai",
         )
-        button = gr.LoginButton("Iniciar sesión")
 
-    gr.load(
-        "models/OpceanAI/Yuuki-RxG",
-        accept_token=button,
-        provider="featherless-ai",
-    )
+    # Footer
+    gr.HTML("""
+        <footer class="footer">
+            <p>Construido con <a href="https://gradio.app" target="_blank">Gradio</a> · 
+            Servido vía <a href="https://featherless.ai" target="_blank">Featherless AI</a> · 
+            <a href="https://huggingface.co/OpceanAI/Yuuki-RxG" target="_blank">Hugging Face</a></p>
+        </footer>
+    """)
 
 if __name__ == "__main__":
     demo.launch()
-