src/display/css_html_js.py

custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

/* Force dark theme everywhere */
:root, .dark, .light {
    color-scheme: dark !important;
    --bg-1: #0d1117;
    --bg-2: #161b22;
    --card-bg: #1c2128;
    --ink-1: #e6edf3;
    --ink-2: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79b8ff;
    --accent-2: #bc8cff;
    --border: #30363d;
    --link-text-color: var(--accent);
    --blue-team: #58a6ff;
    --blue-team-hover: #79b8ff;
    --red-team: #f85149;
    --red-team-hover: #ff7b72;
    --success: #3fb950;
    --error: #f85149;
}

body,
.gradio-container {
    font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
    color: var(--ink-1) !important;
    background: var(--bg-1) !important;
}

.gradio-container .block {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 10px 20px !important;
}

/* Force text color on all Gradio elements */
.gradio-container *,
.gradio-container .prose,
.gradio-container .prose p,
.gradio-container .prose li,
.gradio-container .prose h1,
.gradio-container .prose h2,
.gradio-container .prose h3,
.gradio-container .prose h4,
.gradio-container .prose strong,
.gradio-container label,
.gradio-container span {
    color: var(--ink-1);
}

.gradio-container .prose a,
.gradio-container a {
    color: var(--accent) !important;
}

.gradio-container .prose code,
.gradio-container code {
    background: #282e36 !important;
    color: #e6edf3 !important;
}

.gradio-container .prose pre,
.gradio-container pre {
    background: #161b22 !important;
    border: 1px solid var(--border) !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gr-text-input textarea,
.gr-text-input input {
    color: var(--ink-1) !important;
    background: #0d1117 !important;
    border: 1px solid var(--border) !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
    color: var(--ink-2) !important;
}

/* Tabs */
.gradio-container .tabs {
    background: transparent !important;
}

.gradio-container button.tab-nav,
.gradio-container .tab-nav button {
    color: var(--ink-2) !important;
    background: transparent !important;
}

.gradio-container button.tab-nav.selected,
.gradio-container .tab-nav button.selected {
    color: var(--ink-1) !important;
    border-bottom-color: var(--accent) !important;
}

#blue-tab-button {
    color: #58a6ff !important;
    font-weight: bold;
}

#red-tab-button {
    color: #f85149 !important;
    font-weight: bold;
}

/* Accordion */
.gradio-container .accordion {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}

/* Dataframe / table */
.gradio-container table {
    background: var(--card-bg) !important;
}

.gradio-container table th {
    background: #21262d !important;
    color: var(--ink-1) !important;
    border-color: var(--border) !important;
}

.gradio-container table td {
    background: var(--card-bg) !important;
    color: var(--ink-1) !important;
    border-color: var(--border) !important;
}

.gradio-container table tr:nth-child(even) td {
    background: #161b22 !important;
}

/* Buttons */
.gr-button {
    background: var(--accent) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.gr-button:hover {
    background: var(--accent-hover) !important;
}

.gr-button.secondary {
    background: var(--card-bg) !important;
    color: var(--ink-1) !important;
    border: 1px solid var(--border) !important;
}

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

/* Header */
.hackathon-header {
    margin: 10px 0 24px;
}

.hackathon-header h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 40px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    color: var(--ink-1) !important;
}

.hackathon-subtitle {
    color: var(--ink-2) !important;
    font-size: 18px;
    margin-top: -4px;
    margin-bottom: 8px;
}

.hackathon-nav {
    font-weight: 500;
    margin: 4px 0 10px;
}

.hackathon-nav a {
    color: var(--ink-2) !important;
    text-decoration: none;
    padding: 0 8px;
}

.hackathon-nav a:hover {
    color: var(--accent) !important;
}

.nav-divider {
    color: var(--accent-2) !important;
}

.markdown-text {
    font-size: 16px !important;
}

.tab-buttons button {
    font-size: 20px;
}

/* Blue team accent */
.blue-team .gr-button.primary,
.blue-team .gr-button:not(.secondary) {
    background: var(--blue-team) !important;
}
.blue-team .gr-button:not(.secondary):hover {
    background: var(--blue-team-hover) !important;
}
.blue-team-header {
    color: var(--blue-team) !important;
    border-left: 4px solid var(--blue-team);
    padding-left: 12px;
    margin-bottom: 12px;
}

/* Red team accent */
.red-team .gr-button.primary,
.red-team .gr-button:not(.secondary) {
    background: var(--red-team) !important;
}
.red-team .gr-button:not(.secondary):hover {
    background: var(--red-team-hover) !important;
}
.red-team-header {
    color: var(--red-team) !important;
    border-left: 4px solid var(--red-team);
    padding-left: 12px;
    margin-bottom: 12px;
}

/* Status message styles */
.status-error { color: var(--error) !important; font-size: 16px; text-align: center; font-weight: 600; }
.status-warning { color: var(--accent-2) !important; font-size: 16px; text-align: center; font-weight: 600; }
.status-success { color: var(--success) !important; font-size: 16px; text-align: center; font-weight: 600; }
"""

get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """