/*
 * NeuralMind community benchmark dashboard.
 * Palette matches docs/index.html (#667eea / #764ba2 gradient, #333 dark surfaces).
 */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

nav { background: #333; padding: 1rem 2rem; }
.nav-inner { max-width: 1200px; margin: 0 auto; }
nav a { color: white; text-decoration: none; margin-right: 2rem; font-weight: 500; }
nav a:hover { color: #667eea; }
nav a.active { color: #667eea; }
nav .nav-right { float: right; }
nav .nav-brand { font-weight: 600; }

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}
header h1 { font-size: 2.5rem; margin-bottom: 1rem; }
header .lede { font-size: 1.1rem; opacity: 0.95; max-width: 760px; margin: 0 auto; }
.hero-code {
    background: rgba(0, 0, 0, 0.25);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.95em;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

section { padding: 3rem 2rem; border-bottom: 1px solid #eee; }
section h2 { font-size: 2rem; margin-bottom: 1rem; color: #667eea; }
section > .container > p { margin-bottom: 1.5rem; max-width: 780px; }

.bg-tint { background: #f8f9fa; }

.hero-stats { padding: 2.5rem 2rem; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.stat-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.75rem;
    text-align: center;
    border-left: 4px solid #667eea;
}
.stat-card.placeholder { opacity: 0.5; border-left-color: #ccc; }
.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: #667eea;
    line-height: 1.1;
}
.stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-sub { font-size: 0.8rem; color: #999; margin-top: 0.3rem; }
.sample-note {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 0.5rem;
}

.chart-wrap {
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 420px;
    position: relative;
}
.chart-note { font-size: 0.85rem; color: #888; margin-top: 0.75rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
th, td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
th {
    background: #f5f5f5;
    font-weight: 600;
    color: #444;
    border-bottom: 2px solid #ddd;
    cursor: pointer;
    user-select: none;
}
th:hover { background: #eef0fa; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fafbff; }
td.placeholder { text-align: center; color: #999; padding: 2rem; font-style: italic; }
td.notes { color: #666; font-size: 0.88rem; max-width: 280px; }

code {
    background: #f5f5f5;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}
pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}
pre code { background: transparent; color: inherit; padding: 0; }

.btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 0.4rem;
    text-decoration: none;
    background: #667eea;
    color: white;
    font-weight: 600;
    margin-top: 1rem;
}
.btn:hover { background: #5568d3; }

.cta p:first-of-type { max-width: 720px; }

footer { background: #333; color: white; padding: 2.5rem 2rem; text-align: center; }
footer a { color: #aab8ff; text-decoration: none; }
footer a:hover { color: white; }
.footer-note { font-size: 0.85rem; color: #999; margin-top: 1rem; max-width: 720px; margin-left: auto; margin-right: auto; }

@media (max-width: 768px) {
    header h1 { font-size: 1.9rem; }
    section h2 { font-size: 1.5rem; }
    nav .nav-right { float: none; }
    .stat-number { font-size: 1.8rem; }
    .chart-wrap { height: 340px; padding: 1rem; }
}