/* SQL-Frontier-Eval Dark Modern Theme */
:root {
    --bg-dark: #0d1117;
    --card-bg: #161b22;
    --card-border: #30363d;
    --card-header: #21262d;
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --text-muted: #8b949e;
    --accent-blue: #58a6ff;
    --accent-cyan: #39c5cf;
    --accent-purple: #bc8cff;
    --status-pass: #3fb950;
    --status-pass-bg: rgba(63, 185, 80, 0.15);
    --status-fail: #f85149;
    --status-fail-bg: rgba(248, 81, 73, 0.15);
    --status-warn: #d29922;
    --status-warn-bg: rgba(210, 153, 34, 0.15);
    --code-bg: #0b0e14;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    line-height: 1.6;
    padding-bottom: 60px;
}

/* Navigation */
.top-nav {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.brand-badge {
    background: linear-gradient(135deg, #1f6feb, #8957e5);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.brand-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.nav-separator {
    color: var(--text-muted);
}

.nav-cat {
    color: var(--accent-blue);
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-task-id {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.nav-btn {
    background: var(--card-header);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.nav-btn:hover:not(.disabled) {
    background: #30363d;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dashboard-btn {
    background: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.4);
    color: var(--accent-blue);
    font-weight: 600;
}

.engine-badge, .timestamp-badge {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--card-header);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}

.engine-badge {
    color: var(--accent-cyan);
    font-weight: 500;
}

/* Main Container */
.main-container {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 24px;
}

/* Hero Section */
.dashboard-hero, .task-hero {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 800px;
}

.hero-score-badge {
    background: linear-gradient(135deg, rgba(63, 185, 80, 0.15), rgba(88, 166, 255, 0.15));
    border: 1px solid var(--status-pass);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
}

.hsb-rate {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--status-pass);
}

.hsb-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-grid, .hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.kpi-card, .stat-box {
    background: var(--bg-dark);
    border: 1px solid var(--card-border);
    padding: 18px 20px;
    border-radius: 8px;
}

.kpi-label, .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.kpi-val, .stat-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-model {
    font-size: 1.25rem;
    color: var(--accent-cyan);
}

.kpi-sub, .stat-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* RCA Alert Box */
.rca-alert {
    background: rgba(248, 81, 73, 0.08);
    border: 1px solid rgba(248, 81, 73, 0.35);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.rca-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(248, 81, 73, 0.2);
    padding-bottom: 12px;
}

.rca-icon {
    font-size: 1.8rem;
}

.rca-title-wrap h3 {
    font-size: 1.25rem;
    color: #ff7b72;
    margin-bottom: 4px;
}

.rca-timestamp {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.rca-findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.rca-finding-item {
    background: rgba(13, 17, 23, 0.7);
    border: 1px solid rgba(248, 81, 73, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.rca-finding-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f0f6fc;
    margin-bottom: 8px;
}

.rca-finding-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pass {
    background: var(--status-pass-bg);
    color: var(--status-pass);
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.badge-fail {
    background: var(--status-fail-bg);
    color: var(--status-fail);
    border: 1px solid rgba(248, 81, 73, 0.3);
}

.badge-warn {
    background: var(--status-warn-bg);
    color: var(--status-warn);
    border: 1px solid rgba(210, 153, 34, 0.3);
}

.badge-golden {
    background: rgba(188, 140, 255, 0.15);
    color: var(--accent-purple);
    border: 1px solid rgba(188, 140, 255, 0.3);
}

.badge-domain {
    background: rgba(88, 166, 255, 0.12);
    color: var(--accent-blue);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

.badge-neutral {
    background: var(--card-header);
    color: var(--text-muted);
    border: 1px solid var(--card-border);
}

.badge-id {
    background: var(--bg-dark);
    color: var(--text-muted);
    font-family: var(--font-mono);
    border: 1px solid var(--card-border);
    text-transform: none;
}

/* Callouts */
.callout {
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 24px;
    border-left: 4px solid transparent;
}

.callout-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
}

.callout-body p, .callout-body ul {
    font-size: 0.9rem;
    line-height: 1.5;
}

.callout-body ul {
    margin-top: 8px;
    padding-left: 20px;
}

.callout-success {
    background: var(--status-pass-bg);
    border-color: var(--status-pass);
    color: #e6edf3;
}

.callout-error {
    background: var(--status-fail-bg);
    border-color: var(--status-fail);
    color: #e6edf3;
}

/* Cards & Sections */
.content-section {
    margin-bottom: 36px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-badge {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--card-header);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.section-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Domain Cards Grid */
.domain-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.domain-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.domain-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.domain-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.domain-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.domain-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
}

.domain-stat-item {
    display: flex;
    flex-direction: column;
}

.ds-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ds-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--status-pass));
    border-radius: 3px;
}

/* Filter Bar */
.filter-bar {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.search-wrap input {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.search-wrap input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}

.filter-group, .filter-group-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill, .status-pill {
    background: var(--bg-dark);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover, .status-pill:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.filter-pill.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    font-weight: 600;
}

.status-pill.active {
    background: var(--card-header);
    color: #fff;
    font-weight: 600;
}

.status-pill.status-pass.active {
    background: var(--status-pass);
    border-color: var(--status-pass);
}

.status-pill.status-fail.active {
    background: var(--status-fail);
    border-color: var(--status-fail);
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.data-table th {
    background: var(--card-header);
    color: var(--text-primary);
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

.data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.td-idx {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    width: 40px;
}

.cell-null {
    color: #ff7b72;
    font-style: italic;
    font-size: 0.8rem;
}

.table-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

.table-more-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 8px 14px;
    background: var(--card-header);
    border-top: 1px solid var(--card-border);
}

.task-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}

.task-link:hover {
    color: var(--accent-blue);
}

.task-subdesc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.domain-tag {
    font-size: 0.75rem;
    color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

.action-btn {
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.3);
    color: var(--accent-blue);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.action-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

/* Query Detail Page Elements */
.task-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.task-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.latency-diff {
    font-size: 0.75rem;
    font-weight: 600;
}

.latency-diff.slower {
    color: var(--status-fail);
}

.latency-diff.faster {
    color: var(--status-pass);
}

.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

.analysis-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.analysis-item p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.analysis-item.highlight-trap {
    background: rgba(248, 81, 73, 0.08);
    border: 1px solid rgba(248, 81, 73, 0.25);
    border-radius: 8px;
    padding: 16px;
}

.analysis-item.highlight-trap .analysis-subtitle {
    color: #ff7b72;
}

.prompt-box {
    background: var(--bg-dark);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 16px;
}

.prompt-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.prompt-code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Underlying Tables Card */
.table-card {
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
}

.table-card-header {
    background: var(--card-header);
    border-bottom: 1px solid var(--card-border);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.table-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-right: 8px;
}

.table-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.col-pill {
    background: var(--bg-dark);
    border: 1px solid var(--card-border);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.col-pill code {
    color: var(--accent-cyan);
    font-family: var(--font-mono);
}

.col-pill small {
    color: var(--text-muted);
}

.sample-intro {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 8px 16px;
    background: rgba(255,255,255,0.01);
    border-bottom: 1px solid var(--card-border);
}

/* Query Tabs & Code Blocks */
.query-tabs {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
}

.tab-header {
    background: var(--card-header);
    border-bottom: 1px solid var(--card-border);
    display: flex;
    overflow-x: auto;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.05);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.code-toolbar {
    background: #11151c;
    border-bottom: 1px solid var(--card-border);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.copy-btn {
    background: var(--card-header);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

pre.highlight {
    background: var(--code-bg);
    padding: 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Graphical Query Execution Plan Styling */
.execution-plan-wrapper {
    background: #090d13;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;
}

.plan-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.pb-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pb-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cost-bar-wrap {
    height: 12px;
    background: #161b22;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
}

.cost-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
}

.plan-tree-scroll-container {
    overflow-x: auto;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px dashed var(--card-border);
}

.graphical-plan-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: min-content;
}

.tree-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.plan-node {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
    z-index: 2;
}

.plan-node:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

.plan-node.high-cost {
    background: linear-gradient(180deg, rgba(248, 81, 73, 0.2), #161b22);
    border: 2px solid #ff7b72;
    box-shadow: 0 0 20px rgba(248, 81, 73, 0.45);
    animation: high-cost-pulse 2.5s infinite;
}

@keyframes high-cost-pulse {
    0% { box-shadow: 0 0 12px rgba(248, 81, 73, 0.3); }
    50% { box-shadow: 0 0 24px rgba(248, 81, 73, 0.65); }
    100% { box-shadow: 0 0 12px rgba(248, 81, 73, 0.3); }
}

.node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}

.node-icon-title {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.node-cost-tag {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent-blue);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.high-cost-tag {
    background: rgba(248, 81, 73, 0.25);
    color: #ff7b72;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(248, 81, 73, 0.5);
}

.node-metrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.nm-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
}

.nm-label {
    color: var(--text-muted);
}

.nm-val {
    font-family: var(--font-mono);
    font-weight: 600;
}

.nm-tbl {
    font-size: 0.75rem;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}

.high-cost-banner {
    margin-top: 8px;
    padding: 4px 6px;
    background: rgba(248, 81, 73, 0.2);
    border-radius: 4px;
    font-size: 0.72rem;
    color: #ff7b72;
    font-weight: 600;
    text-align: center;
}

.children-container {
    display: flex;
    justify-content: center;
    gap: 28px;
    position: relative;
    padding-top: 28px;
}

.children-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #30363d;
}

.child-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.child-branch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #30363d;
}

.child-branch:not(:only-child)::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 2px;
    background: #30363d;
}

.child-branch:first-child::after {
    left: 50%;
    width: 50%;
}

.child-branch:last-child::after {
    right: 50%;
    width: 50%;
}

/* Results Comparison Grid */
.results-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 1000px) {
    .results-comparison-grid {
        grid-template-columns: 1fr;
    }
}

.result-column {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
}

.result-header {
    background: var(--card-header);
    border-bottom: 1px solid var(--card-border);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Bottom Nav */
.bottom-nav {
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Footer */
.footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
}

/* Leaderboard special styles */
.leaderboard-card {
    padding: 0;
    overflow: hidden;
}

.leaderboard-table th, .leaderboard-table td {
    padding: 12px 18px;
}

.leader-row td {
    background: rgba(63, 185, 80, 0.03);
}

.baseline-row td {
    background: rgba(188, 140, 255, 0.04);
}

/* Pygments Dark Styles */
pre { line-height: 125%; }
td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #6e7681 }
.highlight { background: #0d1117; color: #E6EDF3 }
.highlight .c { color: #8B949E; font-style: italic } /* Comment */
.highlight .err { color: #F85149 } /* Error */
.highlight .esc { color: #E6EDF3 } /* Escape */
.highlight .g { color: #E6EDF3 } /* Generic */
.highlight .k { color: #FF7B72 } /* Keyword */
.highlight .l { color: #A5D6FF } /* Literal */
.highlight .n { color: #E6EDF3 } /* Name */
.highlight .o { color: #FF7B72; font-weight: bold } /* Operator */
.highlight .x { color: #E6EDF3 } /* Other */
.highlight .p { color: #E6EDF3 } /* Punctuation */
.highlight .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
.highlight .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
.highlight .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #FFA198 } /* Generic.Error */
.highlight .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
.highlight .go { color: #8B949E } /* Generic.Output */
.highlight .gp { color: #8B949E } /* Generic.Prompt */
.highlight .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #79C0FF } /* Generic.Subheading */
.highlight .gt { color: #FF7B72 } /* Generic.Traceback */
.highlight .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
.highlight .kc { color: #79C0FF } /* Keyword.Constant */
.highlight .kd { color: #FF7B72 } /* Keyword.Declaration */
.highlight .kn { color: #FF7B72 } /* Keyword.Namespace */
.highlight .kp { color: #79C0FF } /* Keyword.Pseudo */
.highlight .kr { color: #FF7B72 } /* Keyword.Reserved */
.highlight .kt { color: #FF7B72 } /* Keyword.Type */
.highlight .ld { color: #79C0FF } /* Literal.Date */
.highlight .m { color: #A5D6FF } /* Literal.Number */
.highlight .s { color: #A5D6FF } /* Literal.String */
.highlight .na { color: #E6EDF3 } /* Name.Attribute */
.highlight .nb { color: #E6EDF3 } /* Name.Builtin */
.highlight .nc { color: #F0883E; font-weight: bold } /* Name.Class */
.highlight .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #FFA657 } /* Name.Entity */
.highlight .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
.highlight .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
.highlight .nn { color: #FF7B72 } /* Name.Namespace */
.highlight .nx { color: #E6EDF3 } /* Name.Other */
.highlight .py { color: #79C0FF } /* Name.Property */
.highlight .nt { color: #7EE787 } /* Name.Tag */
.highlight .nv { color: #79C0FF } /* Name.Variable */
.highlight .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
.highlight .pm { color: #E6EDF3 } /* Punctuation.Marker */
.highlight .w { color: #6E7681 } /* Text.Whitespace */
.highlight .mb { color: #A5D6FF } /* Literal.Number.Bin */
.highlight .mf { color: #A5D6FF } /* Literal.Number.Float */
.highlight .mh { color: #A5D6FF } /* Literal.Number.Hex */
.highlight .mi { color: #A5D6FF } /* Literal.Number.Integer */
.highlight .mo { color: #A5D6FF } /* Literal.Number.Oct */
.highlight .sa { color: #79C0FF } /* Literal.String.Affix */
.highlight .sb { color: #A5D6FF } /* Literal.String.Backtick */
.highlight .sc { color: #A5D6FF } /* Literal.String.Char */
.highlight .dl { color: #79C0FF } /* Literal.String.Delimiter */
.highlight .sd { color: #A5D6FF } /* Literal.String.Doc */
.highlight .s2 { color: #A5D6FF } /* Literal.String.Double */
.highlight .se { color: #79C0FF } /* Literal.String.Escape */
.highlight .sh { color: #79C0FF } /* Literal.String.Heredoc */
.highlight .si { color: #A5D6FF } /* Literal.String.Interpol */
.highlight .sx { color: #A5D6FF } /* Literal.String.Other */
.highlight .sr { color: #79C0FF } /* Literal.String.Regex */
.highlight .s1 { color: #A5D6FF } /* Literal.String.Single */
.highlight .ss { color: #A5D6FF } /* Literal.String.Symbol */
.highlight .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #79C0FF } /* Name.Variable.Class */
.highlight .vg { color: #79C0FF } /* Name.Variable.Global */
.highlight .vi { color: #79C0FF } /* Name.Variable.Instance */
.highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
.highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */