/* GPU Selector Cards: a few extras on top of GPU Selector's own site style (style.css) */

/* The sister site's own look: one violet accent (the main site follows the visitor's GPU brand) */
:root, :root[data-gpu] {
    --accent: #8b5cf6;
    --accent-hover: #7c3aed;
    --accent-rgb: 139, 92, 246;
}
.nav { border-bottom: 1px solid rgba(var(--accent-rgb), 0.45); }
.hero {
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%);
    border-radius: 0 0 24px 24px;
    /* Start right under the menu bar (the page's top padding), so the glow has no dark gap above it */
    margin-top: -2rem;
    padding-top: 6rem;
}
.guide-content h2 { border-left: 3px solid var(--accent); padding-left: 0.75rem; }

/* Level badges */
.level {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.level-1 { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.level-2 { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.level-3 { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.level-4 { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.level-test { background: rgba(161, 161, 170, 0.15); color: #d4d4d8; }

/* Example card rows */
.card-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; }
.card-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.card-item h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.card-item p { color: var(--text-secondary); margin: 0 0 0.6rem; }
.card-item ol, .card-item ul { color: var(--text-secondary); margin: 0 0 0.8rem 1.25rem; }
.card-item .card-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.card-item .btn { padding: 0.45rem 1rem; font-size: 0.875rem; }

/* The exported card guide (its own boxes, in this site's colors) */
.guide-content h2::after { display: none; }   /* no collapsing on this site */
.card-guide pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 1rem 0;
}
.card-guide .info, .card-guide .success, .card-guide .warning, .card-guide .toc {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1rem 0;
}
.card-guide .info { background: rgba(59, 130, 246, 0.1); border-left: 3px solid #3b82f6; }
.card-guide .success { background: rgba(16, 185, 129, 0.1); border-left: 3px solid var(--accent-green); }
.card-guide .warning { background: rgba(245, 158, 11, 0.1); border-left: 3px solid #f59e0b; }
.card-guide .toc { background: var(--bg-secondary); border: 1px solid var(--border); }
.card-guide .toc ul { margin-bottom: 0; }
.card-guide table { display: block; overflow-x: auto; }