css.py

"""VANTAGE-Bench Leaderboard — complete CSS bundle.

Single source of truth for all visual styling.
Imported by app.py and passed directly to demo.launch(css=CSS).
"""

CSS = """
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ── Force light theme ──────────────────────────────────────────────────
   The leaderboard is designed as a light-themed, paper-like research UI.
   Gradio's default theme inherits browser/system dark mode through CSS
   variables (--body-text-color, --background-fill-primary, --neutral-*,
   etc.) and Hugging Face Spaces applies its own dark theme on top.
   Either path inverts our text to white-on-white. We neutralize both by:
     1. Declaring color-scheme: light on the root so the UA paints form
        controls (scrollbars, native selects, checkboxes) in light style.
     2. Overriding Gradio's CSS custom properties at :root AND inside
        .gradio-container, both unconditionally and inside the
        prefers-color-scheme: dark media query, so dark mode cannot
        re-assign them.
     3. Forcing explicit, dark-on-light color/background on every text-
        bearing leaderboard element below (header, tabs, filters, tables,
        legend, footer, about, side panel). Search for `!important color:`
        in this file — those rules are what survives theme inversion. */
:root,
.gradio-container,
.gradio-container.dark,
.dark .gradio-container,
html.dark,
body.dark {
    color-scheme: light !important;
    /* Gradio core surface tokens (Default theme) */
    --body-background-fill: #ffffff !important;
    --body-text-color: #111827 !important;
    --body-text-color-subdued: #6b7280 !important;
    --background-fill-primary: #ffffff !important;
    --background-fill-secondary: #fafafa !important;
    --block-background-fill: #ffffff !important;
    --block-label-background-fill: #ffffff !important;
    --block-label-text-color: #374151 !important;
    --block-title-text-color: #111827 !important;
    --block-border-color: #e5e7eb !important;
    --block-info-text-color: #6b7280 !important;
    --border-color-primary: #e5e7eb !important;
    --border-color-accent: #e5e7eb !important;
    --color-accent: #2563eb !important;
    --color-accent-soft: #eff6ff !important;
    --link-text-color: #2563eb !important;
    --link-text-color-hover: #1d4ed8 !important;
    --link-text-color-visited: #2563eb !important;
    --link-text-color-active: #1d4ed8 !important;
    /* Inputs */
    --input-background-fill: #ffffff !important;
    --input-background-fill-focus: #ffffff !important;
    --input-border-color: #d1d5db !important;
    --input-border-color-focus: #2563eb !important;
    --input-text-size: 13px !important;
    --input-placeholder-color: #9ca3af !important;
    --checkbox-background-color: #ffffff !important;
    --checkbox-background-color-focus: #ffffff !important;
    --checkbox-background-color-hover: #f9fafb !important;
    --checkbox-background-color-selected: #2563eb !important;
    --checkbox-border-color: #d1d5db !important;
    --checkbox-border-color-focus: #2563eb !important;
    --checkbox-border-color-hover: #9ca3af !important;
    --checkbox-border-color-selected: #2563eb !important;
    --checkbox-label-background-fill: transparent !important;
    --checkbox-label-background-fill-hover: transparent !important;
    --checkbox-label-background-fill-selected: transparent !important;
    --checkbox-label-text-color: #374151 !important;
    --checkbox-label-text-color-selected: #111827 !important;
    /* Tables */
    --table-even-background-fill: #fafafa !important;
    --table-odd-background-fill: #ffffff !important;
    --table-row-focus: #F3EEF9 !important;
    --table-border-color: #e5e7eb !important;
    --table-text-color: #111827 !important;
    /* Buttons (we override the close button explicitly elsewhere) */
    --button-secondary-background-fill: #ffffff !important;
    --button-secondary-background-fill-hover: #f9fafb !important;
    --button-secondary-text-color: #111827 !important;
    --button-secondary-text-color-hover: #111827 !important;
    --button-secondary-border-color: #d1d5db !important;
    /* Neutral ramp — Gradio's dark theme reassigns these to dark surfaces */
    --neutral-50:  #fafafa !important;
    --neutral-100: #f3f4f6 !important;
    --neutral-200: #e5e7eb !important;
    --neutral-300: #d1d5db !important;
    --neutral-400: #9ca3af !important;
    --neutral-500: #6b7280 !important;
    --neutral-600: #4b5563 !important;
    --neutral-700: #374151 !important;
    --neutral-800: #1f2937 !important;
    --neutral-900: #111827 !important;
    --neutral-950: #030712 !important;
}

/* Re-apply the same overrides inside any dark-mode media query so that
   Gradio (and HF Spaces) cannot re-assign the variables when the user's
   system is set to dark. We don't want responsive dark theming here. */
@media (prefers-color-scheme: dark) {
    :root,
    .gradio-container,
    .gradio-container.dark,
    .dark .gradio-container,
    html.dark,
    body.dark {
        color-scheme: light !important;
        --body-background-fill: #ffffff !important;
        --body-text-color: #111827 !important;
        --body-text-color-subdued: #6b7280 !important;
        --background-fill-primary: #ffffff !important;
        --background-fill-secondary: #fafafa !important;
        --block-background-fill: #ffffff !important;
        --block-label-text-color: #374151 !important;
        --block-title-text-color: #111827 !important;
        --block-border-color: #e5e7eb !important;
        --block-info-text-color: #6b7280 !important;
        --border-color-primary: #e5e7eb !important;
        --input-background-fill: #ffffff !important;
        --input-border-color: #d1d5db !important;
        --input-placeholder-color: #9ca3af !important;
        --table-even-background-fill: #fafafa !important;
        --table-odd-background-fill: #ffffff !important;
        --table-border-color: #e5e7eb !important;
        --table-text-color: #111827 !important;
        --neutral-50:  #fafafa !important;
        --neutral-100: #f3f4f6 !important;
        --neutral-200: #e5e7eb !important;
        --neutral-300: #d1d5db !important;
        --neutral-400: #9ca3af !important;
        --neutral-500: #6b7280 !important;
        --neutral-600: #4b5563 !important;
        --neutral-700: #374151 !important;
        --neutral-800: #1f2937 !important;
        --neutral-900: #111827 !important;
        --neutral-950: #030712 !important;
    }
    /* HF Spaces sometimes scopes dark mode under `.dark` rather than the
       media query; force the inner gradio surface to stay light there too. */
    html, body, .gradio-container, .gradio-container .main {
        background: #ffffff !important;
        color: #111827 !important;
    }
}

/* HF Spaces / Gradio also toggle a `.dark` class on <html> / <body> /
   .gradio-container directly. Override those surfaces unconditionally. */
html.dark, body.dark,
.dark, .dark body,
.gradio-container.dark,
.dark .gradio-container,
.dark .gradio-container .main,
.dark .gradio-container .app,
.dark .gradio-container .contain,
.dark .gradio-container .fillable,
.dark .gradio-container .wrap,
.dark .gradio-container .block,
.dark .gradio-container .form {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, .gradio-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
    color: #111827 !important;
    font-size: 13px;
    background: #ffffff !important;
    color-scheme: light !important;
    -webkit-font-smoothing: antialiased;
}

/* Belt-and-suspenders: keep the outer page surfaces explicitly light even
   if Gradio injects a wrapper we don't otherwise touch. */
html, body,
.gradio-container,
.gradio-container .main,
.gradio-container .app,
.gradio-container .contain,
.gradio-container .fillable {
    background: #ffffff !important;
    color: #111827 !important;
}

/* ── Width / layout ───────────────────────────────────────────────────── */
.gradio-container,
.gradio-container .main,
.gradio-container .app,
.gradio-container .contain,
.gradio-container .wrap,
.gradio-container .fillable {
    max-width: min(95vw, 1800px) !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Keep hero text from spanning the full wide-screen width */
.lb-header {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gradio-container { padding: 0 24px 40px !important; }

/* Kill default Gradio cards / shadows */
.gradio-container .block,
.gradio-container .form,
.gradio-container .gap,
.gradio-container .panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.lb-header {
    text-align: center;
    padding: 0 0 12px;
    margin-bottom: 4px;
}

.lb-nav {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    padding: 4px 0 2px;
}

.lb-nav a {
    color: #9ca3af;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 400;
}
.lb-nav a:hover              { color: #6b7280; }
.lb-nav .lb-sep              { color: #d1d5db; }

/* Hero-position nav: prominent, centered links beneath the subtitle.
   Sized to be clearly readable alongside the title; weight 600 for
   visual presence without becoming heavy. */
.lb-nav-hero {
    margin: 16px auto 0;
    font-size: 19px;
    gap: 24px;
    flex-wrap: wrap;
}
.lb-nav-hero a {
    color: #374151;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 120ms ease;
}
.lb-nav-hero a:hover { color: #111827; text-decoration: underline; }
.lb-nav-hero .lb-sep {
    color: #d1d5db;
    font-size: 19px;
    font-weight: 300;
}

/* Footer nav: clearly clickable, blue, with diagonal arrow */
.lb-footer-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.lb-footer-nav a {
    color: #2563eb;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}
.lb-footer-nav a:hover { color: #1d4ed8; text-decoration: underline; }
.lb-footer-nav .lb-nav-arrow { font-size: 10px; opacity: 0.75; margin-left: 1px; }
.lb-footer-nav a:hover .lb-nav-arrow { opacity: 1; }
.lb-footer-nav .lb-sep { color: #d1d5db; }

.lb-hero { padding-top: 4px; text-align: center; }

/* Hero title — large primary anchor. The `.gradio-container` prefix +
   !important is intentional: HF Spaces injects extra Gradio/theme CSS
   that otherwise wins on specificity and shrinks/reflows the wordmark. */
.gradio-container .lb-hero .lb-wordmark,
.gradio-container .lb-wordmark {
    font-size: 68px !important;
    font-weight: 700 !important;
    letter-spacing: -1.6px !important;
    margin: 8px 0 8px !important;
    line-height: 1.04 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Clemson palette: Orange #F66733, Regalia (Purple) #522D80 */
.gradio-container .lb-vantage      { color: #F66733 !important; }
.gradio-container .lb-dash         { color: #000000 !important; }
.gradio-container .lb-bench-label  { color: #522D80 !important; }

.gradio-container .lb-summary {
    font-size: 16px !important;
    color: #111827 !important;
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    display: block !important;
}

.gradio-container .lb-acronym {
    font-size: 17px !important;
    color: #111827 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    max-width: 680px !important;
    letter-spacing: 0.02em !important;
    display: block !important;
    width: auto !important;
}
.gradio-container .lb-acronym b {
    color: #522D80 !important;
    font-weight: 600 !important;
}


/* ── Controls panel ───────────────────────────────────────────────────── */
/* The Column wrapper gets .lb-controls-wrap; override the global .block killer */
.gradio-container .lb-controls-wrap {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 6px 0 4px !important;
    margin-bottom: 4px !important;
    box-shadow: none !important;
    gap: 6px !important;
}

/* Children of the panel: remove any Gradio card styling */
.lb-controls-wrap .block,
.lb-controls-wrap .form {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Dropdown labels */
.lb-filters .label-wrap span,
.lb-filters label span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lb-filters .label-wrap { margin-bottom: 2px !important; }

/* Search box */
.lb-filters input[type="text"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    box-shadow: none !important;
    width: 100% !important;
    outline: none !important;
}
.lb-filters input[type="text"]:focus { border-color: #2563eb !important; }

.gradio-container .lb-filters input[type="text"] { height: 38px !important; }

/* Search input — visually match dropdown filter boxes
   Target both <input> AND <textarea> because Gradio Textbox may render as either. */
.gradio-container .lb-search-box,
.gradio-container .lb-search-box > div,
.gradio-container .lb-search-box .wrap,
.gradio-container .lb-search-box .form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.gradio-container .lb-filters .lb-search-box input,
.gradio-container .lb-filters .lb-search-box input[type="text"],
.gradio-container .lb-filters .lb-search-box textarea,
.gradio-container .lb-search-box input,
.gradio-container .lb-search-box input[type="text"],
.gradio-container .lb-search-box textarea {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100% !important;
    outline: none !important;
    color: #111 !important;
    resize: none !important;
    overflow: hidden !important;
    font-family: inherit !important;
    display: block !important;
}
.gradio-container .lb-search-box input::placeholder,
.gradio-container .lb-search-box textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}
.gradio-container .lb-search-box input:focus,
.gradio-container .lb-search-box textarea:focus,
.gradio-container .lb-search-box input:focus-visible,
.gradio-container .lb-search-box textarea:focus-visible {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px #2563eb !important;
}

/* Dropdown select elements */
.lb-filters select,
.lb-filters .secondary-wrap,
.lb-filters [class*="dropdown"] input,
.lb-filters [class*="Dropdown"] input {
    font-size: 11px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

/* Filter row: single horizontal line, tight label-to-control spacing.
   - flex + align-items: flex-end → every control sits on the same baseline
     even if Gradio wrappers around the Textbox vs Dropdown have different
     intrinsic heights.
   - column-gap controls horizontal spacing between filters; row-gap kicks
     in only when the row wraps on narrow widths.
   - .lb-filter-col internal gap:6px is the only space between label and
     its input (replaces the previous wrapper-driven whitespace stack). */
.gradio-container .lb-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}
/* Each filter column is sized to its content + a small breathing margin,
   instead of expanding via Gradio's `scale=` prop (which sets flex-grow
   inline). Overriding flex-grow:0 stops the columns from absorbing the
   leftover row width, so the filter cluster sits at the row's left edge
   with `column-gap: 10px` between groups; the remaining horizontal space
   on wide viewports is intentionally empty. flex-shrink:1 keeps the
   responsive collapse behaviour on narrow widths. */
.gradio-container .lb-filter-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
}
.gradio-container .lb-filters .lb-filter-col:nth-child(1) { flex-basis: 340px !important; }  /* SEARCH */
.gradio-container .lb-filters .lb-filter-col:nth-child(2) { flex-basis: 170px !important; }  /* SUBMISSION TYPE */
.gradio-container .lb-filters .lb-filter-col:nth-child(3) { flex-basis: 130px !important; }  /* ACCESS */
.gradio-container .lb-filters .lb-filter-col:nth-child(4) { flex-basis: 140px !important; }  /* PARAMETERS */
.gradio-container .lb-filters .lb-filter-col.lb-filter-verified { flex-basis: auto !important; }  /* VERIFIED ONLY */
.gradio-container .lb-filters .lb-search-box input,
.gradio-container .lb-filters .lb-search-box textarea {
    box-sizing: border-box !important;
}
/* Compact filter label sitting directly above its input — no extra
   margin/padding from Gradio's gr.HTML wrapper bleeds through. */
.gradio-container .filter-lbl {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Strip Gradio's default block-level margins from every wrapper inside a
   filter column so the only vertical spacing comes from the .lb-filter-col
   `gap: 6px` above. Targets gr.HTML hosts, gr.Textbox/Dropdown/Checkbox
   blocks, and their inner .wrap / .form / .container divs. */
.gradio-container .lb-filter-col > .block,
.gradio-container .lb-filter-col > .form,
.gradio-container .lb-filter-col > .gr-html,
.gradio-container .lb-filter-col > div,
.gradio-container .lb-filter-col .wrap,
.gradio-container .lb-filter-col .container {
    margin: 0 !important;
}
/* Root-cause fix for Search-vs-Dropdown misalignment:
   gr.Textbox's outer .block has more intrinsic padding-bottom than
   gr.Dropdown's, so even with `align-items: flex-end` on the row the
   columns' computed bottoms differed by a few pixels — the visible
   search input ended up sitting a touch higher than the dropdowns.
   Pin every NON-LABEL direct child of the filter column to exactly the
   visible control height (38px). The label block is excluded via
   :not(:has(.filter-lbl)) so it stays auto-height. */
.gradio-container .lb-filter-col > div:not(:has(.filter-lbl)) {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}
/* Checkbox column: the verified-only block also pins to 38px above, so the
   checkbox + its label sit vertically centered against the inputs' midline. */
.gradio-container .lb-filter-verified > div:not(:has(.filter-lbl)) {
    justify-content: flex-start !important;
}

/* ── Tag / sort pills ─────────────────────────────────────────────────── */
.lb-col-toggle-inline .wrap,
.lb-sort-pills .wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 2px 0 !important;
}

.lb-col-toggle-inline label,
.lb-sort-pills label {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.6;
    user-select: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.lb-col-toggle-inline label:has(input:checked),
.lb-sort-pills label:has(input:checked) {
    background: #fff;
    border-color: #9ca3af;
    color: #111;
    font-weight: 500;
}

/* Hide raw inputs behind pills */
.lb-col-toggle-inline input,
.lb-sort-pills input,
.lb-col-toggle-inline progress,
.lb-sort-pills progress { display: none !important; }

/* ── Tab strip ────────────────────────────────────────────────────────── */
.tabs > .tab-nav,
.gradio-container .tab-nav {
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Remove default padding between tab nav and table */
.gradio-container .tabitem {
    padding: 2px 0 0 0 !important;
}

.tab-nav button,
.gradio-container .tab-nav button {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    margin-bottom: -1px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    transition: color 120ms ease, border-color 120ms ease;
    letter-spacing: 0.01em !important;
}

.tab-nav button:hover { color: #111 !important; }

.tab-nav button.selected,
.gradio-container .tab-nav button.selected {
    color: #111 !important;
    font-weight: 500 !important;
    border-bottom-color: #F66733 !important;
}

/* ── Table container ──────────────────────────────────────────────────── */
.gradio-container .table-wrap,
.gradio-container [class*="dataframe"] {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    width: 100% !important;
    background: transparent !important;
}

/* User-resizable leaderboard table.
   Implemented in JS (see `_RESIZE_JS` in app.py) — browser-native
   CSS `resize: vertical` on .table-wrap was unreliable inside Gradio's
   Svelte wrapper, so a custom handle (.lb-resize-handle) is injected as
   a sibling of .lb-table and the JS writes `.table-wrap.style.height`
   directly on pointer drag.
   The CSS here only ensures:
     - .lb-table outer is natural block flow (no flex shenanigans),
     - .table-wrap is a top-anchored block-layout scroll viewport,
     - the .lb-resize-handle is visible and styled as a clean drag grip. */
.gradio-container .lb-table {
    resize: none !important;
    overflow: visible !important;
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
}
.gradio-container .lb-table > div,
.gradio-container .lb-table > .container,
.gradio-container .lb-table > .wrap {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
}
.gradio-container .lb-table .table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    /* Height is written inline by JS on drag. */
}
.gradio-container .lb-table .table-wrap > table {
    margin: 0 !important;
    vertical-align: top !important;
    width: 100% !important;
}

/* Drag-grip element appended by JS as a sibling immediately after .lb-table. */
.gradio-container .lb-resize-handle {
    height: 14px;
    width: 100%;
    cursor: ns-resize;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    user-select: none;
    -webkit-user-select: none;
    transition: background 120ms ease;
    position: relative;
    z-index: 1;
    touch-action: none;
}
.gradio-container .lb-resize-handle::before {
    content: "";
    width: 36px;
    height: 3px;
    background: #d1d5db;
    border-radius: 2px;
    transition: background 120ms ease;
}
.gradio-container .lb-resize-handle:hover { background: #f3f4f6; }
.gradio-container .lb-resize-handle:hover::before { background: #9ca3af; }
.gradio-container .lb-resize-handle:active::before { background: #6b7280; }

/* Drop the lower corners on the dataframe shell so the handle attaches
   flush — non-mobile only, since the handle is hidden on mobile. */
@media (min-width: 769px) {
    .gradio-container .lb-table .table-wrap,
    .gradio-container .lb-table[class*="dataframe"] {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

@media (max-width: 768px) {
    .gradio-container .lb-resize-handle { display: none !important; }
    .gradio-container .lb-table .table-wrap {
        height: auto !important;
        max-height: none !important;
    }
}

/* ── Table ────────────────────────────────────────────────────────────── */
.gradio-container table,
.gradio-container .table-wrap table,
.gradio-container [class*="dataframe"] table {
    width: 100% !important;
    font-size: 11px !important;
    border-collapse: collapse !important;
    background: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    table-layout: fixed !important;
}

/* Column widths: #, Name are fixed; score cols share remaining space */
.gradio-container .lb-table thead th:nth-child(1) { width: 48px !important; }
.gradio-container .lb-table thead th:nth-child(2) { width: 360px !important; }

/* Hidden bridge Textbox for the Overall-tab row-click → side panel.
   Must remain in the DOM (so the JS in app.py's _RESIZE_JS can write the
   clicked model id into its <input> and fire .change), but takes zero
   visual space. Do NOT use display:none — Gradio's reactive update may
   skip non-rendered components. */
.gradio-container .lb-overall-hidden-input,
.gradio-container #lb-overall-selected-id {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* ── Overall tab: hand-rendered HTML table with grouped pillar headers ──
   Rendered by util.render.build_overall_html_table (gr.HTML, not gr.Dataframe)
   because Gradio's Dataframe does not cleanly support multi-level headers.

   Design intent: a CLEAN rectangular table.
     - Subtle 4px border-radius (not the 12px "card" look of the pillar tabs)
     - Full visible border on all four sides — no overflow:hidden clipping
     - No resize handle (skipped by attach() in _RESIZE_JS in app.py)
     - Readable font sizes (~15px body, 14–15px headers) — overrides the
       legacy 11px Gradio Dataframe defaults defined earlier in this file. */

/* Outer container = the gr.HTML element itself. Clean rectangular block:
   single subtle border on all four sides, small 4px radius (not the 12px
   "card" look of the pillar tabs), horizontal scroll only if the table
   exceeds the viewport, no vertical clipping. */
.gradio-container .lb-table-overall {
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
}
/* Override the @media (min-width:769px) rule earlier in this stylesheet
   that strips the bottom corner radius on .lb-table[class*="dataframe"]:
   Overall has neither a resize handle below nor a Dataframe class, so it
   should keep its full rounded rectangle. */
@media (min-width: 769px) {
    .gradio-container .lb-table-overall {
        border-bottom-left-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
}
/* Strip any Gradio block padding/margin between the wrapper and the table. */
.gradio-container .lb-table-overall > * {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* The table itself.
   min-width is the floor below which the container starts horizontally
   scrolling (via overflow-x: auto on .lb-table-overall). The value is
   tuned so that every pillar super-header — including the long
   "Spatio-Temp" label sitting above a single task column — fits on one
   line without overflowing its cell. */
.gradio-container .lb-table-overall table.lb-overall-table {
    width: 100% !important;
    min-width: 1380px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    color: #111827 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Column widths via <colgroup> (avoid nth-child collisions across the two
   header rows). All cells are border-box so padding doesn't bloat columns
   beyond their declared widths.

   IMPORTANT — border reset: Gradio's bundled CSS (Tailwind preflight in
   the HF Spaces build) sets `border-style: solid` + `border-width: 1px` on
   every element with a dark default color. With border-collapse:collapse
   that produces a fragmented near-black grid over every cell. We zero out
   top/left/right borders here; the specific rules below (with higher
   specificity from `tr.lb-task-row th`, `th.lb-group`, etc.) re-add only
   the intentional borders we want to see (row separators, header-bottom
   underlines, pillar-group dividers). */
.gradio-container .lb-table-overall thead th,
.gradio-container .lb-table-overall tbody td {
    box-sizing: border-box !important;
    border-top:    0 none transparent !important;
    border-left:   0 none transparent !important;
    border-right:  1px solid rgba(82, 45, 128, 0.12) !important;
}
/* Strip the right-edge gridline from the last cell of each row so the
   container's outer border stands alone (no doubled line at the edge). */
.gradio-container .lb-table-overall thead tr > th:last-child,
.gradio-container .lb-table-overall tbody tr > td:last-child {
    border-right: 0 none transparent !important;
}
.gradio-container .lb-table-overall colgroup col.col-rank     { width: 64px;  }
.gradio-container .lb-table-overall colgroup col.col-name     { width: 270px; }
/* Overall: standalone (non-grouped) column between Name and the pillar
   task groups. Slightly wider than a task column to give the OVERALL
   header room to breathe. */
.gradio-container .lb-table-overall colgroup col.col-overall  { width: 110px; }
.gradio-container .lb-table-overall colgroup col.col-score    { width: 110px; }
/* Spatio-Temporal column: wider so the "Spatio-Temp" super-header fits
   on one line (its colspan=1, so no neighbor to share the width with). */
.gradio-container .lb-table-overall colgroup col.col-score-st { width: 150px; }
.gradio-container .lb-table-overall thead th { width: auto !important; }

/* Row 1 — Pillar super-headers (Spatial / Spatio-Temp / Temporal / Semantic).
   Clemson-inspired light purple background with the deeper Clemson purple
   for the uppercase label text. Border colors are mid-purples that read as
   a subtle accent line, not a saturated rule. */
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-group {
    background: #E8E1F3 !important;        /* Light Clemson purple */
    color: #522D80 !important;             /* Clemson purple */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #C9B8E0 !important;
    text-align: center !important;
    cursor: default !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Row 1 — # / Name / Overall corner cells (rowspan=2, plain background) */
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner {
    background: #f9fafb !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: left !important;
    cursor: default !important;
    vertical-align: middle !important;
}
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner:first-child {
    text-align: center !important;
}
/* Overall corner header: same gray "corner" look as # and Name, centered
   above its centered numeric body cells. */
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner-num {
    text-align: center !important;
}

/* OVERALL column: continuous outer outline — no background fill, so the
   column inherits the neutral / zebra-striped background of the rest of
   the table. The four rails are assembled from per-cell borders that
   border-collapse:collapse merges into single continuous lines:
     - top   = `border-top` on the rowspan=2 header cell
     - left  = `border-left` on header + every body cell (merge vertically)
     - right = `border-right` on header + every body cell (merge vertically)
     - bottom = `border-bottom` on the LAST body row's OVERALL cell only
   Internal row separators (the 1px `#f3f4f6` between body rows from the
   shared tbody td rule) are left intact, so the box still shows row lines
   inside. No hover override — the OVERALL cell now joins the row-wide
   `#F3EEF9` hover wash like every other cell.

   Specificity notes:
     - header (5,3) wins over the `.lb-corner` background rule at (4,3).
     - body   (3,3) ties the zebra `tr:nth-child(even) td` rule (3,3) and
       wins on source order; we no longer set background, so the cell
       falls through to the existing per-row #ffffff / #fafafa stripe.
     - last-row body bottom (4,3) beats the `tr:last-child td` border-none
       reset (3,3). */
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner.lb-corner-num {
    border-top:   2px solid #522D80 !important;
    border-left:  2px solid #522D80 !important;
    border-right: 2px solid #522D80 !important;
}
.gradio-container .lb-table-overall tbody tr td.lb-overall {
    border-left:  2px solid #522D80 !important;
    border-right: 2px solid #522D80 !important;
}
.gradio-container .lb-table-overall tbody tr:last-child td.lb-overall {
    border-bottom: 2px solid #522D80 !important;
}

/* Row 2 — Task subheaders */
.gradio-container .lb-table-overall thead tr.lb-task-row th {
    background: #f9fafb !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: center !important;
    cursor: default !important;
    white-space: nowrap !important;
}

/* Body cells */
.gradio-container .lb-table-overall tbody td {
    padding: 10px 10px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #111827 !important;
    background: #ffffff !important;
}
.gradio-container .lb-table-overall tbody tr:nth-child(even) td {
    background: #fafafa !important;
}
.gradio-container .lb-table-overall tbody tr:last-child td {
    border-bottom: none !important;
}
.gradio-container .lb-table-overall tbody td.lb-rank {
    text-align: center !important;
    color: #6b7280 !important;
    font-variant-numeric: tabular-nums;
    font-size: 14px !important;
}
.gradio-container .lb-table-overall tbody td.lb-name {
    text-align: left !important;
    font-size: 15px !important;
    vertical-align: top !important;
    padding-top: 12px !important;
}
.gradio-container .lb-table-overall tbody td.lb-score {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    font-size: 15px !important;
}
.gradio-container .lb-table-overall tbody td.lb-score.lb-max {
    font-weight: 700 !important;
    color: #111827 !important;
}
.gradio-container .lb-table-overall tbody td.lb-empty-row {
    text-align: center !important;
    padding: 28px 12px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}
.gradio-container .lb-table-overall tbody tr:hover td {
    background: #F3EEF9 !important;        /* Very light Clemson purple */
}

/* Bump readability of the model-name cell so it fills row whitespace.
   Sizes scale together (name → org → badges) so the visual hierarchy is
   preserved: name dominant, org subtly secondary, badges still lightweight. */
.gradio-container .lb-table-overall tbody td.lb-name .mc-name-row { font-size: 17px !important; }
.gradio-container .lb-table-overall tbody td.lb-name .mc-org      { font-size: 13px !important; }
.gradio-container .lb-table-overall tbody td.lb-name .mc-badges .b {
    font-size: 12px !important;
    padding: 2px 7px !important;
}
.gradio-container .lb-table-overall tbody td.lb-name .mc-name-row .b-verified {
    font-size: 11px !important;
    padding: 2px 6px !important;
}

/* Header row */
.gradio-container thead th,
.gradio-container .table-wrap thead th {
    background: #f9fafb !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
    white-space: nowrap !important;
    text-align: left !important;
    cursor: pointer;
    user-select: none;
}
.gradio-container thead th:not(:first-child):not(:nth-child(2)) {
    text-align: right !important;
}

/* Data rows */
.gradio-container tbody tr             { border-bottom: 1px solid #e5e7eb; }
.gradio-container tbody tr:last-child  { border-bottom: none; }
.gradio-container tbody tr:nth-child(even) td { background: #fafafa !important; }
.gradio-container tbody tr:nth-child(odd)  td { background: #ffffff !important; }
.gradio-container tbody tr:hover       td { background: #F3EEF9 !important; }  /* Clemson light purple hover */

/* Cells */
.gradio-container tbody td,
.gradio-container .table-wrap tbody td {
    padding: 5px 10px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: right;
}
.gradio-container tbody td:first-child {
    text-align: center !important;
    font-size: 11px !important;
    color: #6b7280;
}
.gradio-container tbody td:nth-child(2) { text-align: left !important; }



/* ── Model cell (html datatype) ──────────────────────────────────────── */
/* Vertical stack: model name → organization → badges, all left-anchored
   to the same column edge. align-items: flex-start collapses each child
   to its content width so nothing stretches and visually drifts. */
.gradio-container .mc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.3;
    padding: 0;
}
.gradio-container .mc-org {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 1px;
}
.gradio-container .mc-link {
    color: inherit;
    text-decoration: none;
    /* Hard-anchor the link to the same x=0 as the org line and badge row.
       Base styles from Gradio / HF Spaces can otherwise inject a few pixels
       of padding or shift the inline-link box, causing the name to drift
       right of the org/badge stack underneath. */
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-indent: 0 !important;
    vertical-align: baseline;
}
.gradio-container .mc-link b {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-indent: 0 !important;
    font-weight: 700;
}
.gradio-container .mc-link:hover {
    text-decoration: underline;
    color: #2563eb;
}
/* Defensive: every direct child of the model cell anchors at x=0. */
.gradio-container .mc > .mc-name-row,
.gradio-container .mc > .mc-org,
.gradio-container .mc > .mc-badges {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}
.gradio-container .mc-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    margin-top: 4px;
}
.gradio-container .mc-badges .b {
    font-size: 9px !important;
    padding: 1px 4px !important;
    margin-left: 0 !important;
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.b, .lb-badge {
    display: inline-block;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    padding: 1px 5px;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid transparent;
    margin-left: 4px;
    line-height: 1.5;
}

.b-verified,  .lb-badge-verified    { background: #dcfce7; color: #15803d; border-color: #86efac; }
.b-ensemble,  .lb-badge-ensemble    { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.b-single,    .lb-badge-single      { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.b-open,      .lb-badge-open        { background: #ccfbf1; color: #0f766e; border-color: #5eead4; }
.b-prop,      .lb-badge-prop,
.lb-badge-proprietary               { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.b-new,       .lb-badge-new         { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

/* ── Badge legend (below table) ──────────────────────────────────────── */
.lb-badge-legend {
    border-top: 1px solid #f3f4f6;
    margin-top: 8px;
    padding: 10px 0 6px;
    font-size: 11px;
}
.lb-badge-legend .legend-title {
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    margin-bottom: 6px;
}
.lb-badge-legend .legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: 32px;
    row-gap: 6px;
    max-width: 100%;
}
.lb-badge-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
.lb-badge-legend .legend-desc {
    color: #9ca3af;
    font-size: 11px;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .lb-badge-legend .legend-grid { grid-template-columns: 1fr; }
    .lb-badge-legend .legend-item,
    .lb-badge-legend .legend-desc { white-space: normal; }
}

/* ── Status / legend / footer ─────────────────────────────────────────── */
.lb-status, p.lb-status {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 7px;
    min-height: 1em;
    display: flex;
    justify-content: space-between;
}

.lb-legend, p.lb-legend {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
    margin: 8px 0 0;
}

.lb-footer {
    font-size: 11px;
    color: #6b7280;
    margin-top: 8px;
    font-style: italic;
    text-align: center;
}

/* ── About / Submit tab ───────────────────────────────────────────────── */
.lb-about {
    max-width: min(75%, 1280px);
    margin-left: 0 !important;
    margin-right: auto !important;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.7;
    padding-bottom: 32px;
}

.lb-about h3 {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    margin: 14px 0 5px;
}
.lb-about p   { margin-bottom: 8px; }
.lb-about a   { color: #2563eb; text-decoration: none; }

.lb-about pre,
.lb-about code {
    font-size: 11px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    display: block;
    line-height: 1.6;
    font-family: "SF Mono", Monaco, ui-monospace, monospace;
}

/* About-tab tables — crisp outlined grid (no rounded-card look).
   Uses border-collapse: collapse with explicit cell borders so the bottom
   row's edge is part of every cell, not relying on the row's :last-child
   border which the global rule strips. Specificity beats the global table
   rules thanks to the .lb-about prefix. */
.gradio-container .lb-about table {
    border: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 14px 0 20px !important;
    font-size: 12px !important;
    background: #ffffff !important;
    table-layout: auto !important;
}
.gradio-container .lb-about table th,
.gradio-container .lb-about table td {
    border: 1px solid #e5e7eb !important;
    padding: 8px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
    line-height: 1.55 !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    white-space: normal !important;
}
.gradio-container .lb-about table thead th {
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #d1d5db !important;
    cursor: default !important;
}
/* Override the global `thead th:not(:first-child):not(:nth-child(2)) {
   text-align: right }` rule (intended for leaderboard score columns) so
   that 3rd+ headers in About tables ("Tasks", "Primary Metric") hug the
   left edge like the other headers. Specificity wins via the extra
   `.lb-about` class qualifier. */
.gradio-container .lb-about table thead th:not(:first-child):not(:nth-child(2)) {
    text-align: left !important;
}
/* Override global `tbody tr:last-child { border-bottom: none }` so the
   bottom row keeps a visible edge. */
.gradio-container .lb-about table tbody tr:last-child td {
    border-bottom: 1px solid #e5e7eb !important;
}
/* Subtle row striping for scannability — but background must yield to
   the border color, so no transparent tricks. */
.gradio-container .lb-about table tbody tr:nth-child(even) td {
    background: #fafafa !important;
}
.gradio-container .lb-about table tbody tr:hover td {
    background: #f9fafb !important;
}

/* About-page links — clear blue affordance, default underline so they
   read as links at a glance, with a subtle ↗ on external URLs. */
.gradio-container .lb-about a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.gradio-container .lb-about a:hover {
    color: #1e40af;
    text-decoration-thickness: 2px;
}
/* No external-link arrow on About-page links — kept clean and minimal. */
.gradio-container .lb-about a::after,
.gradio-container .lb-about a[href^="http"]::after {
    content: none !important;
}

/* Citation BibTeX block — research-grade, copy/paste friendly.
   Selectable text, monospaced, soft outline, horizontal scroll for long
   lines so the page width is preserved. */
.gradio-container .lb-about pre {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #111827 !important;
    overflow-x: auto !important;
    white-space: pre !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
    margin: 8px 0 16px !important;
    font-family: "SF Mono", Monaco, ui-monospace, Consolas, monospace !important;
}
.gradio-container .lb-about pre code,
.gradio-container .lb-about pre code * {
    user-select: text !important;
    -webkit-user-select: text !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}
/* Make sure the Gradio-rendered copy button on code blocks is visible. */
.gradio-container .lb-about pre + button,
.gradio-container .lb-about .code_wrap button,
.gradio-container .lb-about [class*="copy"] button {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gradio-container { padding: 16px !important; }
    .lb-nav           { justify-content: center; padding: 8px 0 0; }
    .lb-nav-hero      { font-size: 16px; gap: 16px; }
    .lb-nav-hero .lb-sep { font-size: 16px; }
    .gradio-container .lb-wordmark,
    .gradio-container .lb-hero .lb-wordmark {
        font-size: 42px !important;
        letter-spacing: -0.8px !important;
    }
    .lb-summary, .lb-acronym { max-width: 100% !important; padding: 0 8px; }
    .lb-about, .lb-tab-desc { max-width: 100% !important; }
}
@media (max-width: 480px) {
    .gradio-container .lb-wordmark,
    .gradio-container .lb-hero .lb-wordmark {
        font-size: 34px !important;
        letter-spacing: -0.4px !important;
    }
}
/* ── Side panel layout ───────────────────────────────────────────────────── */
.lb-table-row {
    gap: 12px !important;
    align-items: flex-start !important;
}

/* Strip block decoration from Columns inside the table row */
.lb-table-row > div > .block {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.lb-side-panel {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* ── Panel card ─────────────────────────────────────────────────────────── */
.sp-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    overflow: hidden;
    line-height: 1.4;
}

.sp-hdr {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
}

.sp-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 2px;
}

.sp-org { font-size: 11px; color: #6b7280; }

/* ── Side-panel Gradio close button ─────────────────────────────────────── */
.gradio-container .lb-side-panel .sp-close-btn {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.gradio-container .lb-side-panel .sp-close-btn button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    min-width: 0 !important;
    width: auto !important;
}
.gradio-container .lb-side-panel .sp-close-btn button:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.sp-body { padding: 12px 14px 14px; }

.sp-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sp-section { margin-bottom: 14px; }

.sp-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 6px;
}

.sp-radar { text-align: center; }

.sp-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 8px;
}
.sp-k { color: #6b7280; font-size: 11px; }
.sp-v {
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: #111827;
}

.sp-dom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sp-dom-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 7px 6px;
    text-align: center;
}
.sp-dn {
    font-size: 9px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.sp-dv { font-size: 14px; font-weight: 600; color: #111827; }

.sp-date {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

/* ── Layout order: tabs above filter controls ─────────────────────────── */
.gradio-container .fillable {
    display: flex !important;
    flex-direction: column !important;
}
.gradio-container .lb-top-tabs     { order: 1 !important; }
.gradio-container .lb-status-wrap  { order: 3 !important; }

/* ── Model cell – name row (name + verified badge inline) ────────────── */
.gradio-container .mc-name-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    line-height: 1.2;
    flex-wrap: wrap;
}
.gradio-container .mc-name-row .b-verified {
    font-size: 9px !important;
    padding: 1px 5px !important;
    margin-left: 0 !important;
}

/* ── Search box label override (non-uppercase, darker) ───────────────── */
.lb-search-box .label-wrap span,
.lb-search-box label span {
    text-transform: none !important;
    color: #374151 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

/* ── Side panel additions ─────────────────────────────────────────────── */
.sp-card-link {
    font-size: 11px;
    color: #2563eb;
    text-decoration: none;
    margin-left: 6px;
    font-weight: 400;
}
.sp-card-link:hover { text-decoration: underline; }

.sp-info-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 8px;
}

.sp-panel-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ── Tab description blocks ────────────────────────────────────────────── */
.lb-tab-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    padding: 0;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: min(75%, 1280px);
}
.lb-tab-desc b, .lb-tab-desc strong {
    font-weight: 500;
    color: #374151;
}

/* Kill Gradio wrapper margins around HTML blocks inside tabs */
.gradio-container .gr-html { margin-top: 0 !important; margin-bottom: 0 !important; }
.gradio-container .tabitem > .block { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.lb-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: 16px;
    color: #111827;
}
.lb-stats b { color: #111827; font-weight: 600; }
.lb-stat-sep {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* ── Filter section header ─────────────────────────────────────────────── */
.lb-filter-header {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* ── Pillar intro (above filters on pillar tabs) ───────────────────────── */
.gradio-container .lb-pillar-desc-wrap,
.gradio-container .lb-pillar-desc-wrap > .block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lb-pillar-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    padding: 10px 0 12px;
    margin: 0;
}

/* ── Below-table descriptions (between dataframe and legend) ──────────── */
.gradio-container .lb-desc-wrap,
.gradio-container .lb-desc-wrap > .block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lb-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    padding: 12px 2px 4px;
    margin-top: 6px;
}
.lb-desc-overall p {
    margin: 0;
}
.lb-desc-tasks dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin: 0;
}
.lb-desc-tasks dt {
    font-weight: 600;
    color: #374151;
    font-size: 12px;
    margin: 0;
}
.lb-desc-tasks dd {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}
@media (max-width: 720px) {
    .lb-desc-tasks dl { grid-template-columns: 1fr; row-gap: 2px; }
    .lb-desc-tasks dd { padding-bottom: 4px; }
}

/* ── Task detail description below table ───────────────────────────────── */
.lb-detail-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.65;
    padding: 12px 0 0;
    border-top: 1px solid #f3f4f6;
    margin-top: 10px;
}
.lb-detail-desc b { font-weight: 500; color: #374151; }
.gradio-container .lb-detail-wrap,
.gradio-container .lb-detail-wrap > .block {
    padding: 0 !important; background: transparent !important;
    border: none !important; box-shadow: none !important;
}

/* ── Table footer (version + date) ─────────────────────────────────────── */
.lb-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 2px 0;
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
}
.lb-version {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
    letter-spacing: 0;
}
.lb-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lb-footer-left .lb-sep { color: #d1d5db; }
.gradio-container .lb-footer-wrap,
.gradio-container .lb-footer-wrap > .block {
    padding: 0 !important; background: transparent !important;
    border: none !important; box-shadow: none !important;
}

/* ── Two-column desc + filter row ─────────────────────────────────────── */
.gradio-container .lb-desc-filter-row {
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 6px !important;
    margin-top: 6px !important;
    padding: 0 !important;
}
.gradio-container .lb-desc-filter-row > .block { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.gradio-container .lb-tab-desc-col > .block { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }

/* Tighten gap between desc/filter row and table */
.gradio-container .lb-table-row { margin-top: 0 !important; padding-top: 0 !important; }
.gradio-container .lb-table-row > div > .block { padding-top: 0 !important; }

/* ── Hide status bar ───────────────────────────────────────────────── */
.gradio-container .lb-status-wrap { display: none !important; }

/* ── Hide dataframe toolbar (copy / fullscreen buttons) ────────────────── */
.gradio-container .table-wrap .table-menu,
.gradio-container .table-wrap .icon-button-wrapper,
.gradio-container [class*="dataframe"] .table-menu,
.gradio-container [class*="dataframe"] .icon-button-wrapper,
.icon-button-wrapper,
[data-testid="block-info"],
.gradio-container .copy-text,
.gradio-container button.download {
    display: none !important;
}

/* ── Kill gap between desc/filter row and table ────────────────────── */
.gradio-container .gradio-dataframe { margin-top: 0 !important; padding-top: 0 !important; }
.gradio-container .lb-controls-wrap .block { gap: 6px !important; }

/* ─────────────────────────────────────────────────────────────────────
   ── Dark-mode hard overrides (must come last) ─────────────────────────
   These rules ensure every text-bearing leaderboard element has an
   EXPLICIT dark color even when Gradio/HF Spaces re-themes its CSS
   variables. They re-state foregrounds and backgrounds with !important
   so that inherited `color: var(--body-text-color)` from Gradio cannot
   turn the UI white-on-white in dark browsers or HF dark theme.

   Pairs with the :root/--neutral-* overrides at the top of this file:
   the top block disarms the inversion at the variable layer; this block
   restates colors on each component as a defense-in-depth fallback.
   ───────────────────────────────────────────────────────────────────── */

/* Header / hero text */
.gradio-container .lb-header,
.gradio-container .lb-header * {
    color: inherit;
}
.gradio-container .lb-header { color: #111827 !important; }
.gradio-container .lb-header .lb-summary { color: #111827 !important; }
.gradio-container .lb-header .lb-acronym { color: #111827 !important; }
.gradio-container .lb-header .lb-acronym b { color: #522D80 !important; }
.gradio-container .lb-header .lb-stats { color: #111827 !important; }
.gradio-container .lb-header .lb-stats b { color: #111827 !important; }
.gradio-container .lb-header .lb-stat-sep { color: #111827 !important; }

/* Header nav links */
.gradio-container .lb-nav-hero a { color: #374151 !important; }
.gradio-container .lb-nav-hero a:hover { color: #111827 !important; }
.gradio-container .lb-nav-hero .lb-sep { color: #d1d5db !important; }

/* Tabs */
.gradio-container .tab-nav,
.gradio-container .tabs > .tab-nav {
    background: transparent !important;
    border-bottom-color: #e5e7eb !important;
}
.gradio-container .tab-nav button { color: #6b7280 !important; background: transparent !important; }
.gradio-container .tab-nav button:hover { color: #111827 !important; }
.gradio-container .tab-nav button.selected { color: #111827 !important; }

/* Tab panel surface */
.gradio-container .tabitem,
.gradio-container .tabitem > div,
.gradio-container .tab-container,
.gradio-container [role="tabpanel"] {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Filter labels and controls */
.gradio-container .lb-filters,
.gradio-container .lb-filters * { color: inherit; }
.gradio-container .filter-lbl { color: #374151 !important; }
.gradio-container .lb-filters label,
.gradio-container .lb-filters label span,
.gradio-container .lb-filters .label-wrap span {
    color: #374151 !important;
    background: transparent !important;
}

/* Search box: input + textarea, in any state */
.gradio-container .lb-search-box input,
.gradio-container .lb-search-box textarea,
.gradio-container .lb-filters input[type="text"],
.gradio-container .lb-filters textarea {
    color: #111827 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
}
.gradio-container .lb-search-box input::placeholder,
.gradio-container .lb-search-box textarea::placeholder,
.gradio-container .lb-filters input::placeholder,
.gradio-container .lb-filters textarea::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    opacity: 1 !important;
}

/* Dropdown selected-value text + open menu */
.gradio-container .lb-filters [class*="dropdown"] input,
.gradio-container .lb-filters [class*="Dropdown"] input,
.gradio-container .lb-filters [class*="dropdown"] [data-testid="dropdown-value"],
.gradio-container .lb-filters [class*="Dropdown"] [data-testid="dropdown-value"],
.gradio-container .lb-filters select,
.gradio-container .lb-filters select option {
    color: #111827 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
}
.gradio-container .lb-filters [class*="dropdown"] ul,
.gradio-container .lb-filters [class*="Dropdown"] ul,
.gradio-container ul[role="listbox"],
.gradio-container [role="listbox"] {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}
.gradio-container ul[role="listbox"] li,
.gradio-container [role="listbox"] li,
.gradio-container [role="option"] {
    background: #ffffff !important;
    color: #111827 !important;
}
.gradio-container [role="option"]:hover,
.gradio-container [role="option"][aria-selected="true"] {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* Verified-only checkbox label */
.gradio-container .lb-filter-verified label,
.gradio-container .lb-filter-verified label span,
.gradio-container .lb-verified-cb label,
.gradio-container .lb-verified-cb label span {
    color: #374151 !important;
    background: transparent !important;
}

/* Pillar intro / tab description / status / below-table desc */
.gradio-container .lb-pillar-desc { color: #6b7280 !important; }
.gradio-container .lb-tab-desc { color: #6b7280 !important; }
.gradio-container .lb-tab-desc b,
.gradio-container .lb-tab-desc strong { color: #374151 !important; }
.gradio-container .lb-status,
.gradio-container p.lb-status { color: #6b7280 !important; }
.gradio-container .lb-desc { color: #6b7280 !important; }
.gradio-container .lb-desc-tasks dt { color: #374151 !important; }
.gradio-container .lb-desc-tasks dd { color: #6b7280 !important; }
.gradio-container .lb-detail-desc { color: #6b7280 !important; }
.gradio-container .lb-detail-desc b { color: #374151 !important; }

/* Generic table cells — keep dark text on white/striped rows in EVERY
   Gradio Dataframe under our app, regardless of theme. */
.gradio-container table,
.gradio-container .table-wrap table,
.gradio-container [class*="dataframe"] table {
    color: #111827 !important;
    background: #ffffff !important;
}
.gradio-container thead th,
.gradio-container .table-wrap thead th,
.gradio-container [class*="dataframe"] thead th {
    color: #374151 !important;
    background: #f9fafb !important;
}
.gradio-container tbody tr,
.gradio-container tbody td,
.gradio-container .table-wrap tbody td,
.gradio-container [class*="dataframe"] tbody td {
    color: #111827 !important;
}
.gradio-container tbody tr:nth-child(odd)  td { background: #ffffff !important; color: #111827 !important; }
.gradio-container tbody tr:nth-child(even) td { background: #fafafa !important; color: #111827 !important; }
.gradio-container tbody tr:hover td        { background: #F3EEF9 !important; color: #111827 !important; }
.gradio-container tbody td:first-child { color: #6b7280 !important; }
.gradio-container tbody td a { color: #2563eb !important; }
.gradio-container tbody td a:hover { color: #1d4ed8 !important; }

/* Overall HTML table — restate every cell color explicitly */
.gradio-container .lb-table-overall { background: #ffffff !important; color: #111827 !important; }
.gradio-container .lb-table-overall table.lb-overall-table { color: #111827 !important; background: #ffffff !important; }
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-group { color: #522D80 !important; background: #E8E1F3 !important; }
.gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner { color: #374151 !important; background: #f9fafb !important; }
.gradio-container .lb-table-overall thead tr.lb-task-row th { color: #4b5563 !important; background: #f9fafb !important; }
.gradio-container .lb-table-overall tbody td { color: #111827 !important; background: #ffffff !important; }
.gradio-container .lb-table-overall tbody tr:nth-child(even) td { background: #fafafa !important; color: #111827 !important; }
.gradio-container .lb-table-overall tbody tr:hover td { background: #F3EEF9 !important; color: #111827 !important; }
.gradio-container .lb-table-overall tbody td.lb-rank { color: #6b7280 !important; }
.gradio-container .lb-table-overall tbody td.lb-score.lb-max { color: #111827 !important; }
.gradio-container .lb-table-overall tbody td.lb-empty-row { color: #6b7280 !important; }
.gradio-container .lb-table-overall .mc-org { color: #9ca3af !important; }
.gradio-container .lb-table-overall .mc-link { color: #111827 !important; }
.gradio-container .lb-table-overall .mc-link:hover { color: #2563eb !important; }

/* Model cell badges keep their colored pill backgrounds in either theme */
.gradio-container .b-verified, .gradio-container .lb-badge-verified { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
.gradio-container .b-ensemble, .gradio-container .lb-badge-ensemble { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #93c5fd !important; }
.gradio-container .b-single,   .gradio-container .lb-badge-single   { background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; }
.gradio-container .b-open,     .gradio-container .lb-badge-open     { background: #ccfbf1 !important; color: #0f766e !important; border-color: #5eead4 !important; }
.gradio-container .b-prop,     .gradio-container .lb-badge-prop,
.gradio-container .lb-badge-proprietary                              { background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; }
.gradio-container .b-new,      .gradio-container .lb-badge-new       { background: #ede9fe !important; color: #5b21b6 !important; border-color: #c4b5fd !important; }

/* Legend */
.gradio-container .lb-badge-legend { color: #6b7280 !important; background: transparent !important; }
.gradio-container .lb-badge-legend .legend-title { color: #6b7280 !important; }
.gradio-container .lb-badge-legend .legend-desc  { color: #9ca3af !important; }

/* Footer */
.gradio-container .lb-table-footer { color: #9ca3af !important; }
.gradio-container .lb-footer-nav a { color: #2563eb !important; }
.gradio-container .lb-footer-nav a:hover { color: #1d4ed8 !important; }
.gradio-container .lb-footer-nav .lb-sep,
.gradio-container .lb-footer-left .lb-sep { color: #d1d5db !important; }
.gradio-container .lb-updated,
.gradio-container .lb-version { color: #9ca3af !important; }

/* About */
.gradio-container .lb-about { color: #374151 !important; background: transparent !important; }
.gradio-container .lb-about p { color: #374151 !important; }
.gradio-container .lb-about li { color: #374151 !important; }
.gradio-container .lb-about h1,
.gradio-container .lb-about h2,
.gradio-container .lb-about h3,
.gradio-container .lb-about h4 { color: #111827 !important; }
.gradio-container .lb-about a { color: #1d4ed8 !important; }
.gradio-container .lb-about pre,
.gradio-container .lb-about code { color: #111827 !important; background: #f9fafb !important; }
.gradio-container .lb-about table { background: #ffffff !important; color: #374151 !important; }
.gradio-container .lb-about table thead th { color: #111827 !important; background: #f3f4f6 !important; }
.gradio-container .lb-about table tbody td { color: #374151 !important; background: #ffffff !important; }
.gradio-container .lb-about table tbody tr:nth-child(even) td { background: #fafafa !important; }

/* Side panel */
.gradio-container .lb-side-panel { background: transparent !important; }
.gradio-container .sp-wrap { background: #ffffff !important; color: #111827 !important; border-color: #e5e7eb !important; }
.gradio-container .sp-name { color: #111827 !important; }
.gradio-container .sp-org  { color: #6b7280 !important; }
.gradio-container .sp-section-label { color: #9ca3af !important; }
.gradio-container .sp-k { color: #6b7280 !important; }
.gradio-container .sp-v { color: #111827 !important; }
.gradio-container .sp-dn { color: #9ca3af !important; }
.gradio-container .sp-dv { color: #111827 !important; }
.gradio-container .sp-date { color: #9ca3af !important; }
.gradio-container .sp-card-link { color: #2563eb !important; }
.gradio-container .sp-dom-card { background: #ffffff !important; border-color: #e5e7eb !important; }
.gradio-container .lb-side-panel .sp-close-btn button { color: #9ca3af !important; background: transparent !important; }
.gradio-container .lb-side-panel .sp-close-btn button:hover { color: #374151 !important; background: #f3f4f6 !important; }

/* Resize handle */
.gradio-container .lb-resize-handle { background: #f9fafb !important; border-color: #e5e7eb !important; }
.gradio-container .lb-resize-handle:hover { background: #f3f4f6 !important; }

/* Pillar toggle pills */
.gradio-container .lb-col-toggle-inline label,
.gradio-container .lb-sort-pills label { color: #6b7280 !important; background: transparent !important; border-color: #d1d5db !important; }
.gradio-container .lb-col-toggle-inline label:has(input:checked),
.gradio-container .lb-sort-pills label:has(input:checked) { color: #111827 !important; background: #ffffff !important; border-color: #9ca3af !important; }
"""