Upload style.css with huggingface_hub

style.css

@@ -1,5 +1,5 @@
 /* ============================================
-   Text-to-SQL Demo — Dark Mode
+   Text-to-SQL Demo — Dark Mode (Charcoal)
    ============================================ */
 
 .gradio-container {
@@ -18,7 +18,7 @@
     margin: 0;
 }
 .app-header h1 span {
-    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
+    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
@@ -39,15 +39,15 @@
     letter-spacing: 0.02em;
     border: 1px solid;
 }
-.badge-indigo  { background: #312e81; color: #a5b4fc; border-color: #3730a3; }
-.badge-purple  { background: #3b0764; color: #c4b5fd; border-color: #581c87; }
-.badge-emerald { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
-.badge-amber   { background: #451a03; color: #fbbf24; border-color: #78350f; }
+.badge-indigo  { background: #1e3a5f; color: #93c5fd; border-color: #2563eb30; }
+.badge-purple  { background: #2e1065; color: #c4b5fd; border-color: #7c3aed30; }
+.badge-emerald { background: #064e3b; color: #6ee7b7; border-color: #05966930; }
+.badge-amber   { background: #451a03; color: #fbbf24; border-color: #d9770630; }
 
 /* -- Pipeline strip -- */
 .pipeline-strip {
-    background: #1e1b4b;
-    border: 1px solid #312e81;
+    background: #111827;
+    border: 1px solid #1f2937;
     border-radius: 10px;
     padding: 0.6rem 1rem;
     display: flex;
@@ -65,18 +65,18 @@
     font-family: 'Fira Code', monospace;
 }
 .pipeline-strip .step-input  { background: #1e3a5f; color: #7dd3fc; }
-.pipeline-strip .step-model  { background: #312e81; color: #a5b4fc; }
+.pipeline-strip .step-model  { background: #2e1065; color: #c4b5fd; }
 .pipeline-strip .step-struct { background: #422006; color: #fbbf24; }
 .pipeline-strip .step-sql    { background: #14532d; color: #86efac; }
-.pipeline-strip .arrow       { color: #6366f1; font-size: 1rem; }
+.pipeline-strip .arrow       { color: #4b5563; font-size: 1rem; }
 
 /* -- SQL output -- */
 .sql-output textarea {
     font-family: 'Fira Code', 'Cascadia Code', monospace !important;
     font-size: 1.1rem !important;
-    background: #0c0a1d !important;
+    background: #0a0a0f !important;
     color: #e2e8f0 !important;
-    border: 1px solid #312e81 !important;
+    border: 1px solid #1f2937 !important;
     border-radius: 10px !important;
     padding: 1rem !important;
     line-height: 1.5 !important;
@@ -86,38 +86,38 @@
 .decode-box textarea {
     font-family: 'Fira Code', monospace !important;
     font-size: 0.85rem !important;
-    background: #1e1b4b !important;
-    color: #c4b5fd !important;
-    border: 1px solid #312e81 !important;
+    background: #111827 !important;
+    color: #d1d5db !important;
+    border: 1px solid #1f2937 !important;
     border-radius: 8px !important;
 }
 
 /* -- Generate button -- */
 .generate-btn {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
     border: none !important;
     color: #fff !important;
     font-weight: 700 !important;
     font-size: 1rem !important;
     border-radius: 10px !important;
     min-height: 46px !important;
-    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35) !important;
+    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3) !important;
     transition: all 0.2s ease !important;
 }
 .generate-btn:hover {
     transform: translateY(-1px) !important;
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5) !important;
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.45) !important;
 }
 
 /* -- Hint text -- */
 .input-hint {
     font-size: 0.8rem;
-    color: #94a3b8 !important;
+    color: #6b7280 !important;
     margin-top: -0.3rem;
 }
 .input-hint code {
-    background: #312e81;
-    color: #a5b4fc;
+    background: #1f2937;
+    color: #93c5fd;
     padding: 0.1rem 0.35rem;
     border-radius: 3px;
     font-size: 0.78rem;
@@ -125,37 +125,37 @@
 
 /* -- Tab content cards -- */
 .arch-card {
-    background: #1e1b4b;
-    border: 1px solid #312e81;
+    background: #111827;
+    border: 1px solid #1f2937;
     border-radius: 12px;
     padding: 1.25rem;
     margin-bottom: 0.75rem;
 }
 .arch-card h3 {
-    color: #e0e7ff !important;
+    color: #f3f4f6 !important;
     margin: 0 0 0.6rem 0;
     font-size: 1.05rem;
     font-weight: 700;
 }
 .arch-card p,
 .arch-card li {
-    color: #c7d2fe !important;
+    color: #d1d5db !important;
     font-size: 0.92rem;
     line-height: 1.55;
 }
 .arch-card strong {
-    color: #e0e7ff !important;
+    color: #f3f4f6 !important;
 }
 .arch-card code {
-    background: #312e81;
-    color: #a5b4fc !important;
+    background: #1f2937;
+    color: #93c5fd !important;
     padding: 0.1rem 0.4rem;
     border-radius: 4px;
     font-size: 0.82rem;
     font-family: 'Fira Code', monospace;
 }
 .arch-card a {
-    color: #818cf8 !important;
+    color: #60a5fa !important;
 }
 .arch-grid {
     display: grid;
@@ -173,31 +173,31 @@
     border-spacing: 0;
     border-radius: 8px;
     overflow: hidden;
-    border: 1px solid #312e81;
+    border: 1px solid #1f2937;
     font-size: 0.88rem;
 }
 .encoding-table th {
-    background: #0c0a1d;
-    color: #e0e7ff !important;
+    background: #0a0a0f;
+    color: #f3f4f6 !important;
     padding: 0.6rem 0.8rem;
     text-align: left;
     font-weight: 600;
 }
 .encoding-table td {
     padding: 0.5rem 0.8rem;
-    border-bottom: 1px solid #1e1b4b;
-    color: #c7d2fe !important;
-    background: #131136;
+    border-bottom: 1px solid #1f2937;
+    color: #d1d5db !important;
+    background: #0d1117;
 }
 .encoding-table tr:last-child td { border-bottom: none; }
-.encoding-table tr:nth-child(even) td { background: #1e1b4b; }
+.encoding-table tr:nth-child(even) td { background: #111827; }
 .encoding-table .mono {
     font-family: 'Fira Code', monospace;
-    color: #818cf8 !important;
+    color: #60a5fa !important;
     font-weight: 600;
 }
 .encoding-table strong {
-    color: #e0e7ff !important;
+    color: #f3f4f6 !important;
 }
 
 /* -- Stats cards -- */
@@ -211,8 +211,8 @@
     .stats-grid { grid-template-columns: repeat(2, 1fr); }
 }
 .stat-card {
-    background: #1e1b4b;
-    border: 1px solid #312e81;
+    background: #111827;
+    border: 1px solid #1f2937;
     border-radius: 10px;
     padding: 0.9rem;
     text-align: center;
@@ -220,11 +220,11 @@
 .stat-card .stat-value {
     font-size: 1.4rem;
     font-weight: 800;
-    color: #818cf8 !important;
+    color: #60a5fa !important;
 }
 .stat-card .stat-label {
     font-size: 0.72rem;
-    color: #94a3b8 !important;
+    color: #6b7280 !important;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -236,12 +236,12 @@
     text-align: center;
     padding: 1rem;
     margin-top: 0.75rem;
-    border-top: 1px solid #312e81;
+    border-top: 1px solid #1f2937;
     font-size: 0.8rem;
-    color: #64748b !important;
+    color: #4b5563 !important;
 }
 .app-footer a {
-    color: #818cf8 !important;
+    color: #60a5fa !important;
 }
 
 footer { display: none !important; }