Upload style.css

src/assets/style.css

@@ -110,14 +110,15 @@
 
 /* ── Stat Cards ── */
 .stat-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-subtle);
+    background: #1a2235 !important;
+    border: 1px solid rgba(148, 163, 184, 0.08) !important;
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     text-align: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
+    color: #e8ecf4 !important;
 }
 
 .stat-card:hover {
@@ -161,8 +162,8 @@
 
 /* ── Prediction Result Cards ── */
 .pred-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-subtle);
+    background: #1a2235 !important;
+    border: 1px solid rgba(148, 163, 184, 0.08) !important;
     border-radius: var(--radius-md);
     padding: 1.2rem 1.5rem;
     margin-bottom: 0.75rem;
@@ -170,6 +171,7 @@
     display: flex;
     align-items: center;
     gap: 1.2rem;
+    color: #e8ecf4 !important;
 }
 
 .pred-card:hover {
@@ -214,9 +216,17 @@
     margin-top: 2px;
 }
 
-.confidence-high { color: #06d6a0; }
-.confidence-med  { color: #f59e0b; }
-.confidence-low  { color: #f43f5e; }
+.confidence-high {
+    color: #06d6a0;
+}
+
+.confidence-med {
+    color: #f59e0b;
+}
+
+.confidence-low {
+    color: #f43f5e;
+}
 
 /* ── Confidence Bar ── */
 .conf-bar-bg {
@@ -233,9 +243,17 @@
     transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.conf-bar-fill-high { background: linear-gradient(90deg, #06d6a0, #34d399); }
-.conf-bar-fill-med  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
-.conf-bar-fill-low  { background: linear-gradient(90deg, #f43f5e, #fb7185); }
+.conf-bar-fill-high {
+    background: linear-gradient(90deg, #06d6a0, #34d399);
+}
+
+.conf-bar-fill-med {
+    background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.conf-bar-fill-low {
+    background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
 
 /* ── Section Headers ── */
 .section-header {
@@ -257,13 +275,14 @@
 
 /* ── Pipeline Diagram ── */
 .pipeline-step {
-    background: var(--bg-card);
-    border: 1px solid var(--border-subtle);
+    background: #1a2235 !important;
+    border: 1px solid rgba(148, 163, 184, 0.08) !important;
     border-radius: var(--radius-md);
     padding: 1.2rem 1.5rem;
     margin-bottom: 0.5rem;
     position: relative;
     transition: all 0.3s ease;
+    color: #e8ecf4 !important;
 }
 
 .pipeline-step:hover {
@@ -280,11 +299,12 @@
 
 /* ── Model Cards ── */
 .model-card {
-    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
-    border: 1px solid var(--border-subtle);
+    background: linear-gradient(135deg, #1a2235 0%, #243049 100%) !important;
+    border: 1px solid rgba(148, 163, 184, 0.08) !important;
     border-radius: var(--radius-lg);
     padding: 1.8rem;
     transition: all 0.3s ease;
+    color: #e8ecf4 !important;
 }
 
 .model-card:hover {
@@ -346,17 +366,18 @@
 
 /* ── Sample Note Cards ── */
 .sample-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-subtle);
+    background: #1a2235 !important;
+    border: 1px solid rgba(148, 163, 184, 0.08) !important;
     border-radius: var(--radius-md);
     padding: 1rem 1.2rem;
     cursor: pointer;
     transition: all 0.25s ease;
+    color: #e8ecf4 !important;
 }
 
 .sample-card:hover {
-    background: var(--bg-card-hover);
-    border-color: var(--accent-teal);
+    background: #1f2a42 !important;
+    border-color: #06d6a0 !important;
     transform: translateY(-2px);
 }
 
@@ -401,21 +422,29 @@
     box-shadow: 0 0 0 2px var(--accent-teal-dim) !important;
 }
 
-.stSelectbox > div > div {
+.stSelectbox>div>div {
     background: var(--bg-card) !important;
     border-color: var(--border-medium) !important;
     border-radius: var(--radius-md) !important;
 }
 
-.stSlider > div > div > div {
+.stSlider>div>div>div {
     background: var(--accent-teal) !important;
 }
 
 /* ── Animated gradient border for active predictions ── */
 @keyframes borderGlow {
-    0% { border-color: rgba(6, 214, 160, 0.3); }
-    50% { border-color: rgba(76, 201, 240, 0.5); }
-    100% { border-color: rgba(6, 214, 160, 0.3); }
+    0% {
+        border-color: rgba(6, 214, 160, 0.3);
+    }
+
+    50% {
+        border-color: rgba(76, 201, 240, 0.5);
+    }
+
+    100% {
+        border-color: rgba(6, 214, 160, 0.3);
+    }
 }
 
 .result-active {
@@ -424,8 +453,15 @@
 
 /* ── Pulse animation for loading ── */
 @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
 }
 
 .loading-pulse {
@@ -486,7 +522,7 @@
 }
 
 /* ── Batch Progress ── */
-.stProgress > div > div > div > div {
+.stProgress>div>div>div>div {
     background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue)) !important;
 }
 
@@ -500,7 +536,7 @@
 }
 
 /* ── Download Button ── */
-.stDownloadButton > button {
+.stDownloadButton>button {
     background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue)) !important;
     color: #0a0e1a !important;
     font-weight: 600 !important;
@@ -509,7 +545,7 @@
     transition: all 0.3s ease !important;
 }
 
-.stDownloadButton > button:hover {
+.stDownloadButton>button:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 20px rgba(6, 214, 160, 0.25) !important;
 }
@@ -527,109 +563,273 @@
 }
 
 /* ═══════════════════════════════════════════════════════
-   LIGHT MODE OVERRIDES
-   When user switches to light theme via Streamlit settings,
-   ensure all text is dark and backgrounds are light.
+   FORCE DARK MODE ON ALL STREAMLIT ELEMENTS
+   Overrides system light theme so the app is ALWAYS dark.
    ═══════════════════════════════════════════════════════ */
 
-@media (prefers-color-scheme: light) {
-    :root {
-        --bg-primary: #f8fafc;
-        --bg-secondary: #f1f5f9;
-        --bg-card: #ffffff;
-        --bg-card-hover: #f1f5f9;
-        --bg-elevated: #e2e8f0;
-        --text-primary: #0f172a;
-        --text-secondary: #475569;
-        --text-muted: #64748b;
-        --border-subtle: rgba(15, 23, 42, 0.08);
-        --border-medium: rgba(15, 23, 42, 0.15);
-        --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
-        --shadow-glow: 0 0 30px rgba(6, 214, 160, 0.12);
-    }
+/* ── Force dark on root & main container ── */
+html,
+body,
+[data-testid="stAppViewContainer"],
+[data-testid="stApp"],
+.stApp,
+[data-testid="stAppViewBlockContainer"],
+.main,
+.main .block-container,
+[data-testid="stHeader"],
+[data-testid="stToolbar"] {
+    background-color: #0a0e1a !important;
+    color: #e8ecf4 !important;
+}
+
+/* ── Force sidebar dark ── */
+[data-testid="stSidebar"],
+[data-testid="stSidebar"]>div,
+[data-testid="stSidebarContent"],
+section[data-testid="stSidebar"] {
+    background: linear-gradient(180deg, #0d1321 0%, #111827 100%) !important;
+    color: #e8ecf4 !important;
+}
+
+/* ── All text elements ── */
+.stApp p,
+.stApp span,
+.stApp label,
+.stApp div,
+.stApp li,
+.stApp td,
+.stApp th,
+[data-testid="stMarkdownContainer"],
+[data-testid="stMarkdownContainer"] p,
+[data-testid="stMarkdownContainer"] span,
+[data-testid="stMarkdownContainer"] li {
+    color: #e8ecf4 !important;
+}
+
+/* ── Headings ── */
+.stApp h1,
+.stApp h2,
+.stApp h3,
+.stApp h4,
+.stApp h5,
+.stApp h6 {
+    color: #e8ecf4 !important;
+}
+
+/* ── Text inputs & text areas ── */
+.stTextInput input,
+.stTextInput>div>div>input,
+[data-testid="stTextInput"] input {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
+}
+
+.stTextArea textarea,
+[data-testid="stTextArea"] textarea {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
+    font-family: 'JetBrains Mono', monospace !important;
 }
 
-/* Streamlit's data-theme attribute for explicit light mode */
-[data-theme="light"] .stApp,
-.stApp[data-theme="light"] {
-    background: #f8fafc !important;
+.stTextInput input:focus,
+.stTextArea textarea:focus {
+    border-color: #06d6a0 !important;
+    box-shadow: 0 0 0 2px rgba(6, 214, 160, 0.15) !important;
 }
 
-[data-theme="light"] .hero-container {
-    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f4ff 100%) !important;
-    border-color: rgba(15, 23, 42, 0.1) !important;
+/* ── Number inputs ── */
+.stNumberInput input,
+[data-testid="stNumberInput"] input {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
 }
 
-[data-theme="light"] .hero-title {
-    background: linear-gradient(135deg, #059669 0%, #0284c7 50%, #6d28d9 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+/* ── Select boxes / dropdowns ── */
+.stSelectbox>div>div,
+[data-testid="stSelectbox"]>div>div,
+.stMultiSelect>div>div {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
 }
 
-[data-theme="light"] .hero-subtitle {
-    color: #475569 !important;
+[data-testid="stSelectbox"] span,
+.stSelectbox span {
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .stat-card,
-[data-theme="light"] .pipeline-step,
-[data-theme="light"] .pred-card,
-[data-theme="light"] .model-card {
-    background: #ffffff !important;
-    border-color: rgba(15, 23, 42, 0.1) !important;
-    color: #0f172a !important;
+/* ── Radio buttons & checkboxes ── */
+.stRadio label,
+.stCheckbox label,
+[data-testid="stRadio"] label,
+[data-testid="stCheckbox"] label {
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .stat-card:hover,
-[data-theme="light"] .model-card:hover {
-    background: #f8fafc !important;
-    box-shadow: 0 4px 16px rgba(6, 214, 160, 0.12) !important;
+/* ── Sliders ── */
+.stSlider label,
+[data-testid="stSlider"] label {
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .stat-label,
-[data-theme="light"] .model-card-label {
-    color: #64748b !important;
+.stSlider>div>div>div>div {
+    background: #06d6a0 !important;
 }
 
-[data-theme="light"] .section-header {
-    color: #0f172a !important;
+/* ── File uploader ── */
+[data-testid="stFileUploader"],
+[data-testid="stFileUploader"]>div {
+    background: #1a2235 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .pred-desc-en,
-[data-theme="light"] .model-card-title {
-    color: #0f172a !important;
+[data-testid="stFileUploader"] label,
+[data-testid="stFileUploader"] span,
+[data-testid="stFileUploader"] p,
+[data-testid="stFileUploader"] small {
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .pred-desc-zh {
-    color: #475569 !important;
+[data-testid="stFileUploaderDropzone"] {
+    background: #1a2235 !important;
+    border-color: rgba(148, 163, 184, 0.2) !important;
 }
 
-[data-theme="light"] .footer {
-    color: #64748b !important;
-    border-top-color: rgba(15, 23, 42, 0.1) !important;
+/* ── Buttons ── */
+.stButton>button {
+    color: #e8ecf4 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
+}
+
+.stButton>button[kind="primary"],
+.stButton>button[data-testid="stBaseButton-primary"] {
+    background: linear-gradient(135deg, #06d6a0, #4cc9f0) !important;
+    color: #0a0e1a !important;
+    border: none !important;
+}
+
+/* ── Download button ── */
+.stDownloadButton>button {
+    background: linear-gradient(135deg, #06d6a0, #4cc9f0) !important;
+    color: #0a0e1a !important;
+    font-weight: 600 !important;
+    border: none !important;
+    border-radius: 12px !important;
+}
+
+.stDownloadButton>button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(6, 214, 160, 0.25) !important;
+}
+
+/* ── Expander ── */
+[data-testid="stExpander"],
+[data-testid="stExpander"]>div {
+    background: #1a2235 !important;
+    border-color: rgba(148, 163, 184, 0.1) !important;
+    color: #e8ecf4 !important;
+}
+
+[data-testid="stExpander"] summary,
+[data-testid="stExpander"] summary span,
+[data-testid="stExpander"] p {
+    color: #e8ecf4 !important;
+}
+
+/* ── Data frame / tables ── */
+[data-testid="stDataFrame"],
+[data-testid="stDataFrame"]>div,
+.stDataFrame {
+    background: #1a2235 !important;
+    border-radius: 12px !important;
+    overflow: hidden;
+}
+
+[data-testid="stTable"],
+[data-testid="stTable"] table {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] [data-testid="stSidebar"] {
-    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
-    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
+[data-testid="stTable"] th {
+    background: #243049 !important;
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] [data-testid="stSidebar"] .stMarkdown h1,
-[data-theme="light"] [data-testid="stSidebar"] .stMarkdown h2,
-[data-theme="light"] [data-testid="stSidebar"] .stMarkdown h3 {
-    color: #059669 !important;
+[data-testid="stTable"] td {
+    background: #1a2235 !important;
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .stTextArea textarea {
-    background: #ffffff !important;
-    border-color: rgba(15, 23, 42, 0.15) !important;
-    color: #0f172a !important;
+/* ── Alerts / info / warning / error ── */
+[data-testid="stAlert"],
+.stAlert {
+    background: #1a2235 !important;
+    border-color: rgba(148, 163, 184, 0.15) !important;
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .pipeline-arrow {
-    color: #059669 !important;
+.stAlert p,
+.stAlert span {
+    color: #e8ecf4 !important;
 }
 
-[data-theme="light"] .conf-bar-bg {
-    background: rgba(0, 0, 0, 0.06) !important;
+/* ── Spinner ── */
+[data-testid="stSpinner"] {
+    color: #e8ecf4 !important;
 }
+
+/* ── Progress bar ── */
+.stProgress>div>div>div>div {
+    background: linear-gradient(90deg, #06d6a0, #4cc9f0) !important;
+}
+
+/* ── Tabs ── */
+.stTabs [data-baseweb="tab-list"] {
+    background: transparent !important;
+}
+
+.stTabs [data-baseweb="tab"] {
+    color: #94a3b8 !important;
+}
+
+.stTabs [aria-selected="true"] {
+    color: #06d6a0 !important;
+}
+
+/* ── Metric ── */
+[data-testid="stMetric"],
+[data-testid="stMetricValue"],
+[data-testid="stMetricLabel"] {
+    color: #e8ecf4 !important;
+}
+
+/* ── Tooltip / popover ── */
+[data-testid="stTooltipIcon"] {
+    color: #94a3b8 !important;
+}
+
+/* ── Bottom page padding (removes white strip) ── */
+.block-container {
+    padding-bottom: 3rem !important;
+}
+
+footer,
+.reportview-container .main footer {
+    background: #0a0e1a !important;
+    color: #64748b !important;
+}
+
+/* Hide Streamlit's default footer */
+footer {
+    visibility: hidden;
+}
+
+/* ── Plotly chart backgrounds ── */
+.js-plotly-plot .plotly .main-svg {
+    background: transparent !important;
+}