| :root { |
| --bg: #0b1020; |
| --card: #121a2a; |
| --muted: #97a1b7; |
| --text: #e8ecf4; |
| --primary: #5b9cff; |
| --border: #1e2a43; |
| --row-alt: #0e1626; |
| --header-height: 96px; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html, body { height: 100%; } |
|
|
| body { |
| margin: 0; |
| font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; |
| background: linear-gradient(180deg, #0b1020 0%, #0a0f1d 100%); |
| color: var(--text); |
| } |
|
|
| .container { |
| max-width: 1100px; |
| margin: 0 auto; |
| padding: 24px; |
| } |
|
|
| .page-header { |
| border-bottom: 1px solid var(--border); |
| background: rgba(10, 15, 29, 0.5); |
| backdrop-filter: blur(8px); |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| } |
|
|
| h1 { margin: 0 0 4px; font-size: 28px; } |
| .subtitle { margin: 0; color: var(--muted); font-size: 14px; } |
|
|
| .card { |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 14px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
| } |
|
|
| .card-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 16px 18px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .card-header .title { font-weight: 600; } |
|
|
| .explainer { |
| padding: 16px 18px; |
| border-bottom: 1px solid var(--border); |
| color: var(--muted); |
| } |
|
|
| .explainer p { margin: 0 0 10px; } |
| .explainer a { color: var(--primary); text-decoration: none; } |
| .explainer a:hover { text-decoration: underline; } |
|
|
| .search { |
| appearance: none; |
| border: 1px solid var(--border); |
| background: #0c1322; |
| color: var(--text); |
| border-radius: 10px; |
| padding: 10px 12px; |
| font-size: 14px; |
| width: 260px; |
| } |
|
|
| .table-wrapper { overflow: auto; border-radius: 0 0 14px 14px; } |
|
|
| .table { |
| width: 100%; |
| border-collapse: collapse; |
| min-width: 720px; |
| } |
|
|
| th, td { |
| padding: 12px 14px; |
| text-align: left; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| thead th { |
| position: sticky; |
| top: 0; |
| background: #0f1730; |
| color: var(--muted); |
| font-weight: 600; |
| cursor: pointer; |
| z-index: 1; |
| } |
|
|
| tbody tr:hover { background: rgba(91, 156, 255, 0.06); } |
| tbody tr:nth-child(even) { background: var(--row-alt); } |
|
|
| td[data-label="Rank"], th:first-child { |
| font-weight: 700; |
| color: #cfe2ff; |
| } |
|
|
| td[data-label="Mean (Task)"], th[data-label="Mean (Task)"] { |
| font-weight: 700; |
| } |
|
|
| td[data-label="Model"] { |
| white-space: nowrap; |
| } |
|
|
| .footer { |
| color: var(--muted); |
| font-size: 13px; |
| text-align: center; |
| opacity: 0.9; |
| } |
|
|
