styles.css

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --mw-bg:      #0d1109;
  --mw-panel:   #141910;
  --mw-panel2:  #1c2216;
  --mw-border:  #2e3a23;
  --mw-text:    #f2ead7;
  --mw-muted:   #96a882;
  --mw-green:   #7fb069;
  --mw-amber:   #d8a657;
  --mw-cap:     #c0405a;
  --mw-line:    #2e3a23;
  --mw-forest:  #3a7c55;
  --mw-ink:     #f2ead7;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(127, 176, 105, 0.03) 0, rgba(127, 176, 105, 0.03) 1px,
      transparent 1px, transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(127, 176, 105, 0.03) 0, rgba(127, 176, 105, 0.03) 1px,
      transparent 1px, transparent 80px
    ),
    linear-gradient(160deg, #0d1109 0%, #0f1510 55%, #0b110a 100%) !important;
  min-height: 100vh;
}

/* ── Gradio container + CSS variable overrides ──────────────────────────── */
/* These CSS variables are consumed by Gradio's own internal components.    */
/* Setting them here overrides the theme for inputs, panels, text colours.  */
.gradio-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-bottom: 24px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Solid dark fill so transparent-row gaps show this colour, not the body grid. */
  background: #0e1410 !important;
  color: var(--mw-text) !important;

  /* Belt-and-suspenders overrides for Gradio CSS variables.           */
  /* Do NOT override --neutral-* here – Gradio uses those for its own  */
  /* color-scale maths; wrong values cascade into table cell text.     */
  /* Use THEME.set() in app.py for colour propagation instead.         */
  --background-fill-primary:    #141910;
  --background-fill-secondary:  #1c2216;
  --input-background-fill:      #1c2216;
  --body-text-color:            #cec6ae;   /* matches THEME.set(body_text_color) */
  --block-label-text-color:     #8a9e7a;
  --block-border-color:         #2e3a23;
  --input-border-color:         #2e3a23;
  --color-accent:               #7fb069;
  --border-color-accent:        #7fb069;
  --table-odd-background-fill:  #141910;
  --table-even-background-fill: #192114;
}

/* ── Broad Gradio component backgrounds ────────────────────────────────── */
/* Avoid .wrap here — that class is also used by dropdowns */
.gradio-container .block,
.gradio-container .form,
.gradio-container .tabitem,
.gradio-container .panel,
.gradio-container .prose {
  background: var(--mw-panel) !important;
  border-color: var(--mw-border) !important;
  color: var(--mw-text) !important;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.mw-hero {
  position: relative;
  overflow: hidden;
  padding: 38px 42px;
  margin: 10px 0 18px;
  border: 1px solid var(--mw-border);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14, 20, 10, 0.98) 0%, rgba(24, 36, 16, 0.97) 100%);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(127, 176, 105, 0.1);
}

.mw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 40%, rgba(127, 176, 105, 0.1), transparent 55%),
    radial-gradient(ellipse at 5% 85%, rgba(216, 166, 87, 0.07), transparent 45%);
  pointer-events: none;
}

.mw-hero::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -55px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 46px solid rgba(127, 176, 105, 0.07);
  pointer-events: none;
}

.mw-kicker {
  position: relative;
  color: var(--mw-amber) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase !important;
}

.mw-hero h1 {
  position: relative;
  margin: 10px 0 12px;
  color: var(--mw-text) !important;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.mw-hero p {
  position: relative;
  max-width: 760px;
  color: #c8d8ba !important;
  font-size: 1.02rem;
  line-height: 1.58;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.mw-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  position: relative;
}

.mw-badge {
  background: rgba(13, 17, 9, 0.78) !important;
  border: 1px solid rgba(216, 166, 87, 0.42) !important;
  color: #f0dfa8 !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  display: inline-block !important;
}

/* ── Metrics grid ────────────────────────────────────────────────────────── */
.mw-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin-top: 22px;
  position: relative;
}

.mw-metrics span {
  display: block;
  padding: 11px 13px;
  border: 1px solid rgba(127, 176, 105, 0.18) !important;
  border-top: 3px solid rgba(127, 176, 105, 0.5) !important;
  border-radius: 8px;
  background: rgba(13, 17, 9, 0.65) !important;
  color: var(--mw-muted) !important;
  font-size: 0.82rem;
}

.mw-metrics strong {
  display: block;
  color: var(--mw-green) !important;
  font-size: 1.22rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ── Safety notice ───────────────────────────────────────────────────────── */
/* .gradio-container .block has specificity (0,2,0). To win, we must match  */
/* that specificity — so we target both the .block and .mw-safety classes.  */
.gradio-container .block.mw-safety {
  background: rgba(22, 4, 8, 0.92) !important;
  border-left: 3px solid #e0506a !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
}

/* Markdown renders text inside .prose > p — target all text children. */
.gradio-container .mw-safety,
.gradio-container .mw-safety .prose,
.gradio-container .mw-safety p,
.gradio-container .mw-safety strong {
  color: #f5bfc9 !important;
  background: transparent !important;
  font-size: 0.87rem !important;
  font-weight: 500 !important;
}

/* ── Panel cards (mw-panel class on gr.Column) ──────────────────────────── */
.mw-panel {
  padding: 14px !important;
  border: 1px solid var(--mw-border) !important;
  border-top: 3px solid var(--mw-green) !important;
  border-radius: 8px !important;
  background: var(--mw-panel) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.mw-section-header {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mw-green);
  margin: 18px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mw-border);
}

/* ── Results area: unified background ───────────────────────────────────── */
/* Wraps the final-ranking row and the tabs so the whole section reads as    */
/* one connected panel rather than floating islands on a transparent gap.    */
.mw-results-row {
  background: rgba(20, 28, 16, 0.75) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: 10px !important;
  padding: 14px 14px 10px !important;
  gap: 12px !important;
}

.mw-results-tabs {
  background: rgba(20, 28, 16, 0.75) !important;
  border: 1px solid var(--mw-border) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  padding: 0 14px 14px !important;
  margin-top: -6px !important;          /* visually merges with the row above */
}

/* ── Primary button ──────────────────────────────────────────────────────── */
button.primary {
  min-height: 42px !important;
  border-radius: 8px !important;
  background: var(--mw-green) !important;
  border: 1px solid rgba(127, 176, 105, 0.45) !important;
  color: #0d1109 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

button.primary:hover {
  filter: brightness(1.12);
}

/* ── Compact form labels ─────────────────────────────────────────────────── */
.gradio-container .block > label > span,
.gradio-container .label-wrap span {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--mw-muted) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* ── Number inputs ───────────────────────────────────────────────────────── */
.gradio-container input[type="number"],
.gradio-container input[type="text"] {
  background: var(--mw-panel2) !important;
  color: var(--mw-text) !important;
  border-color: var(--mw-border) !important;
  border-radius: 7px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 10px !important;
  font-size: 0.875rem !important;
}

/* ── Dropdown component ──────────────────────────────────────────────────── */
/* Gradio renders dropdowns as a svelte custom component with these classes. */
.gradio-container .wrap-inner {
  background: var(--mw-panel2) !important;
  border-color: var(--mw-border) !important;
  color: var(--mw-text) !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
}

/* The text value shown in a closed dropdown */
.gradio-container .wrap-inner input,
.gradio-container .wrap-inner span:not(.icon):not(.mw-badge) {
  color: var(--mw-text) !important;
  background: transparent !important;
  font-size: 0.875rem !important;
}

/* Dropdown chevron icon */
.gradio-container .wrap-inner .icon,
.gradio-container .wrap-inner svg {
  color: var(--mw-muted) !important;
  fill: var(--mw-muted) !important;
}

/* Open dropdown list */
.gradio-container ul.options {
  background: #111710 !important;
  border: 1px solid var(--mw-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  z-index: 50 !important;
}

/* Dropdown list items */
.gradio-container ul.options li,
.gradio-container .options .item {
  color: var(--mw-text) !important;
  background: transparent !important;
  border-radius: 5px !important;
  padding: 6px 10px !important;
  font-size: 0.875rem !important;
  cursor: pointer;
}

.gradio-container ul.options li:hover,
.gradio-container .options .item:hover {
  background: rgba(127, 176, 105, 0.14) !important;
  color: var(--mw-text) !important;
}

.gradio-container ul.options li.selected,
.gradio-container .options .item.selected {
  background: rgba(127, 176, 105, 0.22) !important;
  color: var(--mw-green) !important;
  font-weight: 600 !important;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
textarea {
  border-radius: 8px !important;
  background: var(--mw-panel2) !important;
  color: var(--mw-text) !important;
  border-color: var(--mw-border) !important;
}

.mw-explanation textarea {
  line-height: 1.55 !important;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
input:focus,
.wrap-inner:focus-within,
textarea:focus {
  outline: 2px solid var(--mw-green) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(127, 176, 105, 0.14) !important;
}

/* ── Dataframe / table ───────────────────────────────────────────────────── */
/* Gradio 5/6 renders Dataframes WITHOUT a <tbody> element.                 */
/* Use tr:not(:first-child) to target data rows regardless of tbody.        */
.gradio-container .table-wrap,
.gradio-container [data-testid="dataframe"] {
  background: var(--mw-panel) !important;
  border-color: var(--mw-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.gradio-container .table-wrap table {
  background: var(--mw-panel) !important;
  border-collapse: collapse;
  width: 100%;
}

/* ── Header cells ───── near-black bg, muted green labels */
.gradio-container .table-wrap table th {
  background: #090d07 !important;
  color: #8fba78 !important;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 12px;
  border-bottom: 2px solid #2e3a23 !important;
  white-space: nowrap;
}

/* ── All data cells ─── warm tan, high contrast on dark background */
/* tr:not(:first-child) covers both with-tbody and without-tbody cases.     */
.gradio-container .table-wrap table tr:not(:first-child) td {
  color: #cec6ae !important;
  background: transparent !important;
  font-size: 0.875rem !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(46, 58, 35, 0.4) !important;
}

/* Zebra rows */
.gradio-container .table-wrap table tr:nth-child(even) td {
  background: rgba(25, 33, 20, 0.6) !important;
}

.gradio-container .table-wrap table tr:hover td {
  background: rgba(127, 176, 105, 0.09) !important;
  transition: background 0.12s;
}

/* ── Rank-1 data row ─── slightly brighter + bold as top-result highlight */
.gradio-container .table-wrap table tr:nth-child(2) td {
  color: #e8dfc5 !important;
  font-weight: 600 !important;
}

/* ── Rank number (first td per row) ─── dimmed, doesn't compete */
.gradio-container .table-wrap table tr:not(:first-child) td:first-child {
  color: #7a8f6e !important;
  font-size: 0.8rem !important;
}

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

.tab-nav button {
  border-radius: 8px 8px 0 0 !important;
  color: var(--mw-muted) !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
}

.tab-nav button.selected {
  border-bottom: 2px solid var(--mw-green) !important;
  color: var(--mw-green) !important;
  font-weight: 600 !important;
  background: rgba(127, 176, 105, 0.07) !important;
}

/* ── Accordion ───────────────────────────────────────────────────────────── */
.gradio-container .accordion > .label-wrap,
.gradio-container details > summary {
  background: var(--mw-panel2) !important;
  color: var(--mw-text) !important;
  border-color: var(--mw-border) !important;
  border-radius: 7px !important;
  font-size: 0.875rem !important;
}

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.gradio-container input[type="checkbox"] {
  accent-color: var(--mw-green);
  width: 16px;
  height: 16px;
}

/* ── Gallery hover ───────────────────────────────────────────────────────── */
.gallery-item img {
  transition: transform 0.18s, box-shadow 0.18s;
}

.gallery-item:hover img {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mw-hero {
    padding: 26px 22px;
  }

  .mw-hero h1 {
    font-size: 2rem;
  }

  .mw-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mw-badges {
    gap: 6px;
  }
}