styles.css

/* CRCS v10 Hybrid Engine — Dark theme matching crcs_hybrid_engine v4 */

:root {
  --bg: #0a0c10;
  --surface: #0f1218;
  --surface2: #141820;
  --card: #181d28;
  --border: #1c2232;
  --border2: #243040;
  --text: #b8c8e0;
  --text-dim: #485870;
  --text-bright: #e8f0ff;
  --accent: #3d7fff;
  --accent2: #6aa0ff;
  --gold: #c4a040;
  --gold2: #e0c070;
  --green: #38a870;
  --green2: #58d098;
  --red: #d85050;
  --red2: #f07070;
  --amber: #cc8830;
  --amber2: #e8a850;
  --violet: #8060d8;
  --violet2: #a080f0;
  --teal: #30a8b8;
  --teal2: #50c8d8;
  --mono: 'IBM Plex Mono', monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', sans-serif;
}

/* ── Dark mode override ── */
html, body, .gradio-container, .dark, [data-theme="dark"] {
  color-scheme: dark !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.gradio-container {
  max-width: 100% !important;
  background: var(--bg) !important;
}

/* ── Typography ── */
body, .gradio-container, .prose {
  font-family: var(--sans) !important;
  font-size: 13px !important;
}

h1, h2, h3, h4 {
  color: var(--text-bright) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}

label, .label-wrap > span {
  color: var(--text-dim) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ── Inputs ── */
input, select, textarea, .scroll-hide {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  background: var(--surface) !important;
  color: var(--text-bright) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

/* ── Blocks / cards ── */
.block, .panel, .form, .contain {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 6px !important;
}

.gap { background: transparent !important; }

/* ── Buttons ── */
.gr-button, button, .btn {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  border-radius: 4px !important;
  transition: all 0.15s !important;
}

button.primary, .gr-button.primary {
  background: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
  font-weight: 600 !important;
}

button.primary:hover {
  background: var(--accent2) !important;
}

button.secondary, .gr-button.secondary {
  background: transparent !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border2) !important;
}

button.secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
}

/* ── Tabs — match hybrid engine nav buttons ── */
.tab-nav {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}

.tab-nav button {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  color: var(--text-dim) !important;
  background: transparent !important;
  border: 1px solid var(--border2) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 5px 13px !important;
  margin-right: 4px !important;
}

.tab-nav button.selected {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: rgba(61,127,255,0.07) !important;
}

/* ── Sliders ── */
input[type="range"] {
  accent-color: var(--accent) !important;
}

/* ── Dropdowns ── */
.wrap select, .svelte-1gfkn6j select {
  background: var(--surface) !important;
  color: var(--text-bright) !important;
  border: 1px solid var(--border) !important;
}

/* ── Plots ── */
.plot-container {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

/* ── Markdown rendered output ── */
.prose {
  color: var(--text) !important;
  background: var(--surface) !important;
}

.prose h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border2); padding-bottom: 6px; color: var(--accent2) !important; }
.prose h2 { font-size: 1.1rem; color: var(--accent) !important; margin-top: 1.2rem; }
.prose h3 { font-size: 0.95rem; font-weight: 600; margin-top: 1rem; color: var(--text-bright) !important; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th { background: var(--accent) !important; color: white !important; padding: 6px 10px; font-size: 11px; }
.prose td { padding: 6px 10px; border: 1px solid var(--border); color: var(--text) !important; }
.prose tr:nth-child(even) { background: var(--surface2); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 12px; color: var(--text-dim); }
.prose code { font-family: var(--mono); background: var(--surface2); color: var(--accent2); padding: 2px 5px; border-radius: 3px; font-size: 11px; }
.prose pre { background: var(--surface2); padding: 10px; border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
.prose a { color: var(--accent2) !important; }

/* ── File component ── */
.file-preview { background: var(--surface) !important; border: 1px solid var(--border) !important; }

/* ── Examples table ── */
.examples-table { background: var(--surface) !important; }
.examples-table td { color: var(--text) !important; border-color: var(--border) !important; }
.examples-table th { color: var(--text-dim) !important; }

/* ── Status/textbox ── */
.output-class textarea, .input-class textarea {
  background: var(--surface) !important;
  color: var(--text-bright) !important;
  border-color: var(--border) !important;
}

/* ── Accordion ── */
.accordion { border-color: var(--border) !important; }

/* ── Hide footer ── */
footer { display: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Grid background (subtle, like hybrid engine) ── */
.gradio-container::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(61,127,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,127,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ── LinePlot/BarPlot dark mode ── */
.vega-embed {
  background: var(--surface) !important;
}