| LEADERBOARD_CSS = """ | |
| .leaderboard-wrapper { overflow-x: auto; margin-bottom: 40px; } | |
| .leaderboard-table table { width: 100%; border-collapse: collapse; } | |
| .leaderboard-table th, .leaderboard-table td { text-align: center; padding: 8px; } | |
| .leaderboard-table a { color: #0366d6; text-decoration: none; } | |
| .leaderboard-table a:hover { text-decoration: underline; } | |
| .metric-cell { cursor: help; display:inline-block; padding:2px 6px; border-radius: 8px; } | |
| .best-metric { position: relative; background: rgba(88,166,255,.16); box-shadow: inset 0 0 0 1px rgba(88,166,255,.35); font-weight: 600; } | |
| .best-metric:before { content: "★"; margin-right: 6px; font-size: 0.9em; color: #3b82f6; } | |
| .dark .best-metric { background: rgba(88,166,255,.28); box-shadow: inset 0 0 0 1px rgba(88,166,255,.5); } | |
| .dark .best-metric:before { color: #58a6ff; } | |
| .dark .leaderboard-table th, .dark .leaderboard-table td { border-color: #30363d; color: #e0e0e0; } | |
| .dark .leaderboard-table th { background-color: #21262d; } | |
| .dark .leaderboard-table a { color: #58a6ff; } | |
| .gradio-container { max-width: 1400px; margin: auto; padding: 20px; } | |
| .markdown-text { color: #24292e; padding: 15px; border-radius: 6px; background-color: #f6f8fa; margin-bottom: 20px; } | |
| .dark .markdown-text { color: #c9d1d9; background-color: #161b22; } | |
| .datasets-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } | |
| .dataset-card { background: #f6f8fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform .2s ease; } | |
| .dataset-card:hover { transform: translateY(-4px); } | |
| .dataset-card h3 { margin: 0 0 8px; color: #0366d6; } | |
| .dataset-card .full-name { font-size: .85em; color: #4b5563; } | |
| .dataset-card p { margin: 5px 0; } | |
| .dataset-card .records { display:inline-block; padding: 2px 10px; border-radius: 999px; background: #eaf2ff; color: #0b63ce; font-weight: 600; } | |
| .dark .dataset-card { background: #161b22; color: #c9d1d9; } | |
| .dark .dataset-card h3 { color: #58a6ff; } | |
| .dark .dataset-card .full-name { color: #a9c4e2; } | |
| .dark .dataset-card .records { background: #0f2a45; color: #9bd1ff; } | |
| .metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; } | |
| .metric-card { background: #f6f8fa; border-radius: 12px; padding: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.04); color:#1f2937; } | |
| .metric-card h3 { margin: 0 0 10px; color:#0b63ce; } | |
| .metric-text { margin: 6px 0 0; } | |
| .dark .metric-card { background:#161b22; color:#c9d1d9; } | |
| .dark .metric-card h3 { color:#9bd1ff; } | |
| .formula { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; | |
| font-size: 15px; border-radius: 8px; padding: 8px 10px; | |
| background: #eef3ff; color:#0b2a55; display: inline-block; | |
| } | |
| .formula span { font-weight: 700; } | |
| .dark .formula { background: #0f1f33; color:#deecff; } | |
| .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; } | |
| .chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #ffffff; border: 1px solid #e5e7eb; color:#111827; } | |
| .chip b { font-size: 13px; } | |
| .chip small { font-size: 12px; opacity: .9; } | |
| .dark .chip { background: #0f172a; border-color: #22304a; color:#e5e7eb; } | |
| .submit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } | |
| .form-card { background: #f6f8fa; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } | |
| .form-card h3 { margin-top: 0; color: #0366d6; } | |
| .dark .form-card { background: #161b22; color: #c9d1d9; } | |
| .dark .form-card h3 { color: #58a6ff; } | |
| @media (max-width: 900px) { .submit-grid { grid-template-columns: 1fr; } } | |
| .alert { padding:12px 14px; border-radius:8px; margin-top:10px; font-weight:500; } | |
| .alert.success { background:#e6f7ed; color:#0f5132; border:1px solid #b7ebc6; } | |
| .dark .alert.success { background:#0f2a1d; color:#a6f3c2; border-color:#1f5c3a; } | |
| .alert.error { background:#fdecea; color:#842029; border:1px solid #f5c2c7; } | |
| .dark .alert.error { background:#3a0b0e; color:#f5a3aa; border-color:#7a1a21; } | |
| .code-block { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; | |
| font-size: 13px; | |
| padding: 12px 14px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| border: 1px solid #ddd; | |
| background: #f5f5f5; | |
| color: #111; | |
| } | |
| .code-block.json { | |
| background: #1e1e1e; | |
| border-color: #333; | |
| color: #d4d4d4; | |
| } | |
| .dark .code-block.json { | |
| background: #1e1e1e; | |
| border-color: #333; | |
| color: #d4d4d4; | |
| } | |
| .code-block.json .string { color: #ce9178; } | |
| .code-block.json .number { color: #b5cea8; } | |
| .code-block.json .boolean { color: #569cd6; } | |
| .code-block.json .null { color: #569cd6; } | |
| .code-block.json .key { color: #9cdcfe; } | |
| .dataset-info-card { | |
| background: #f0f6ff; | |
| border: 1px solid #cce0ff; | |
| padding: 14px 16px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| } | |
| .dataset-info-card h3 { | |
| margin: 0 0 8px; | |
| color: #0b63ce; | |
| } | |
| .dataset-info-card a { | |
| color: #0366d6; | |
| text-decoration: none; | |
| } | |
| .dataset-info-card a:hover { | |
| text-decoration: underline; | |
| } | |
| .dark .dataset-info-card { | |
| background: #0f1f33; | |
| border-color: #22304a; | |
| } | |
| .dark .dataset-info-card h3 { | |
| color: #9bd1ff; | |
| } | |
| .dark .dataset-info-card a { | |
| color: #58a6ff; | |
| } | |
| """ | |