/* ===================================================================
   BENCHMARK — PQ Crypta Live Performance Comparison
   Theme: Deep navy + cyan, data-focused
   =================================================================== */

:root {
    --bm-bg:          #040810;
    --bm-surface:     #080f1c;
    --bm-card:        #0c1526;
    --bm-border:      rgba(0,212,255,0.15);
    --bm-border-hi:   rgba(0,212,255,0.45);
    --bm-cyan:        #00d4ff;
    --bm-cyan-dim:    rgba(0,212,255,0.1);
    --bm-green:       #00ff88;
    --bm-green-dim:   rgba(0,255,136,0.08);
    --bm-amber:       #f59e0b;
    --bm-red:         #ff4757;
    --bm-purple:      #7c3aed;
    --bm-text:        #e2e8f0;
    --bm-muted:       #64748b;
    --bm-transition:  0.25s ease;

    /* algorithm colour families */
    /* Browser baseline */
    --c-classical:         #00ff88;
    /* Classical & Password */
    --c-classicalapi:      #86efac;
    --c-passwordclassical: #4ade80;
    /* NIST — ML-KEM */
    --c-mlkem:             #00d4ff;
    /* NIST — HQC family (amber spectrum) */
    --c-hqc128:            #fcd34d;
    --c-hqc192:            #f59e0b;
    --c-hqc256:            #d97706;
    /* FN-DSA family (violet spectrum) */
    --c-fndsa512:          #c4b5fd;
    --c-fndsa1024:         #a78bfa;
    --c-fndsadual:         #8b5cf6;
    --c-fndsafp:           #7c3aed;
    --c-fndsatrans:        #6d28d9;
    --c-fndsazk:           #5b21b6;
    /* Hybrid & Multi (teal→indigo spectrum) */
    --c-hybrid:            #2dd4bf;
    --c-postquantum:       #38bdf8;
    --c-multialgo:         #0ea5e9;
    --c-multikem:          #818cf8;
    --c-multikemtriple:    #6366f1;
    --c-latticecode:       #4f46e5;
    /* Max Secure (orange→red spectrum) */
    --c-maxlightweight:    #fbbf24;
    --c-maxpurepq:         #fb923c;
    --c-maxstateless:      #f97316;
    --c-maxcryptoagile:    #ef4444;
    --c-maxhybridtrans:    #dc2626;
    --c-maxpqczk:          #b91c1c;
    /* Advanced & Specialized (pink/rose spectrum) */
    --c-entropyorch:       #f472b6;
    --c-pq3stack:          #ec4899;
    --c-postzkhomo:        #db2777;
    --c-quantumlattice:    #be185d;
    --c-quantumconsensus:  #9d174d;
    --c-aisynthesized:     #e879f9;
    /* PQ Crypta System — highlighted */
    --c-dualkem:           #e879f9;
    /* Maximum Security */
    --c-quadlayer:         #ff6b35;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; }

body {
    font-family: 'Courier New', 'Menlo', monospace;
    background: var(--bm-bg);
    color: var(--bm-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;   /* prevent page scroll from overflow bars */
}

/* ─── Page Header ────────────────────────────────────────────────── */
.bm-header {
    background: linear-gradient(135deg, #030912 0%, #040d1e 50%, #030a14 100%);
    padding: 2rem 1.5rem 1.8rem;
    border-bottom: 2px solid rgba(0,212,255,0.25);
    box-shadow: 0 4px 24px rgba(0,212,255,0.12);
}

.bm-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
}

.bm-logo-link { flex-shrink: 0; }
.bm-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }

.bm-header-text { flex: 1; }

.bm-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bm-cyan);
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.bm-subtitle {
    font-size: 0.85rem;
    color: var(--bm-muted);
    line-height: 1.6;
    max-width: 680px;
}

.bm-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.bm-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border: 1px solid;
}

.bm-badge-pqc  { color: var(--bm-cyan);  border-color: rgba(0,212,255,0.3);  background: rgba(0,212,255,0.06); }
.bm-badge-live { color: var(--bm-green); border-color: rgba(0,255,136,0.3);  background: rgba(0,255,136,0.06); }
.bm-badge-zk   { color: #a78bfa;         border-color: rgba(167,139,250,0.3); background: rgba(124,58,237,0.06); }

/* ─── Main layout ────────────────────────────────────────────────── */
.bm-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ─── Intro card ─────────────────────────────────────────────────── */
.bm-intro-card {
    background: var(--bm-card);
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    padding: 28px 32px;
}

.bm-context-note {
    font-size: 0.86rem;
    color: var(--bm-muted);
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 900px;
}

.bm-context-note strong { color: var(--bm-text); }

/* ─── Group cards grid ───────────────────────────────────────────── */
.bm-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.bm-group-card {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-left: 3px solid;
    border-radius: 10px;
    padding: 12px 14px 14px;
    transition: border-color var(--bm-transition);
}

.bm-group-card-classical  { border-left-color: var(--c-classical); }
.bm-group-card-nist       { border-left-color: var(--c-mlkem); }
.bm-group-card-fndsa      { border-left-color: var(--c-fndsadual); }
.bm-group-card-hybrid     { border-left-color: var(--c-hybrid); }
.bm-group-card-maxsecure  { border-left-color: var(--c-maxstateless); }
.bm-group-card-advanced   { border-left-color: var(--c-pq3stack); }
.bm-group-card-dualkem    { border-left-color: var(--c-dualkem); border-left-width: 4px; background: rgba(232,121,249,0.04); }
.bm-group-card-quadlayer  { border-left-color: var(--c-quadlayer); }

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

.bm-group-card-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bm-text);
    letter-spacing: 0.02em;
}

.bm-group-card-count {
    font-size: 0.65rem;
    color: var(--bm-muted);
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 1px 7px;
}

.bm-group-card-desc {
    font-size: 0.7rem;
    color: var(--bm-muted);
    line-height: 1.45;
    margin-bottom: 8px;
}

.bm-group-card-range {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bm-cyan);
    min-height: 1.1em;
    letter-spacing: 0.01em;
}

.bm-group-card-range.range-pending {
    color: var(--bm-muted);
    font-weight: 400;
    font-style: italic;
}

.bm-link {
    color: var(--bm-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(34,211,238,0.35);
}
.bm-link:hover { border-bottom-color: var(--bm-cyan); }

.bm-run-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bm-run-note {
    font-size: 0.78rem;
    color: var(--bm-muted);
}

/* ─── Run button ─────────────────────────────────────────────────── */
.btn-run-benchmark {
    padding: 12px 32px;
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));
    border: 1px solid var(--bm-border-hi);
    border-radius: 10px;
    color: var(--bm-cyan);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--bm-transition);
    white-space: nowrap;
}

.btn-run-benchmark:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(124,58,237,0.25));
    box-shadow: 0 0 20px rgba(0,212,255,0.2);
}

.btn-run-benchmark:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ─── Progress section ───────────────────────────────────────────── */
.bm-progress-card {
    background: var(--bm-card);
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    padding: 24px 28px;
}

.bm-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bm-muted);
    margin-bottom: 16px;
}

.bench-progress-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bench-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bm-surface);
    border-left: 3px solid var(--bm-border);
    transition: border-color var(--bm-transition), background var(--bm-transition);
}

.bench-progress-row.bench-row-running {
    border-left-color: var(--bm-amber);
    background: rgba(245,158,11,0.05);
    animation: rowPulse 1.2s ease-in-out infinite;
}

.bench-progress-row.bench-row-done {
    border-left-color: var(--bm-green);
    background: rgba(0,255,136,0.04);
}

.bench-progress-row.bench-row-error {
    border-left-color: var(--bm-red);
    background: rgba(255,71,87,0.05);
}

@keyframes rowPulse {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 1; }
}

.bench-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bm-border);
}

.bench-row-dualkem .bench-row-dot { background: var(--c-dualkem); }

.bench-progress-row.bench-row-done   .bench-row-dot { background: var(--bm-green); }
.bench-progress-row.bench-row-running .bench-row-dot { background: var(--bm-amber); animation: dotPulse 0.6s ease-in-out infinite alternate; }
.bench-progress-row.bench-row-error  .bench-row-dot { background: var(--bm-red); }

@keyframes dotPulse { to { transform: scale(1.6); } }

.bench-row-name  { flex: 1; font-size: 0.82rem; color: var(--bm-text); }
.bench-row-status { font-size: 0.76rem; color: var(--bm-muted); min-width: 80px; text-align: right; }
.bench-row-time  { font-size: 0.82rem; font-weight: 700; color: var(--bm-cyan); min-width: 60px; text-align: right; }

/* ─── Results table ──────────────────────────────────────────────── */
.bm-results-card {
    background: var(--bm-card);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 0 30px rgba(0,255,136,0.06);
    position: relative;
}

/* ─── Overflow bar arrow — fixed, JS-positioned past card right edge */
.overflow-bar-arrow {
    position: fixed;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid var(--bm-muted);
    pointer-events: none;
    z-index: 100;
}

.overflow-bar-arrow-postzkhomo { border-left-color: var(--c-postzkhomo); }

.bm-table-wrap { overflow-x: visible; }

.bm-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bm-results-table th {
    padding: 8px 14px;
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bm-muted);
    border-bottom: 1px solid var(--bm-border);
    white-space: nowrap;
}

.bm-results-table th:not(:first-child) { text-align: right; }
.bm-results-table th:last-child { text-align: left; min-width: 120px; }

.result-row td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,212,255,0.06);
    vertical-align: middle;
}

.result-row:last-child td { border-bottom: none; }

.result-row-dualkem td {
    background: rgba(232,121,249,0.04);
    font-weight: 600;
}

.result-label { color: var(--bm-text); font-size: 0.82rem; white-space: nowrap; }

.result-time, .result-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.result-time  { color: var(--bm-muted); }
.result-total { color: var(--bm-cyan); font-weight: 700; }

.result-ratio {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.78rem;
}

.result-row-classical        .result-ratio { color: var(--c-classical); }
.result-row-classicalapi     .result-ratio { color: var(--c-classicalapi); }
.result-row-passwordclassical .result-ratio { color: var(--c-passwordclassical); }
.result-row-mlkem            .result-ratio { color: var(--c-mlkem); }
.result-row-hqc128           .result-ratio { color: var(--c-hqc128); }
.result-row-hqc192           .result-ratio { color: var(--c-hqc192); }
.result-row-hqc256           .result-ratio { color: var(--c-hqc256); }
.result-row-fndsa512         .result-ratio { color: var(--c-fndsa512); }
.result-row-fndsa1024        .result-ratio { color: var(--c-fndsa1024); }
.result-row-fndsadual        .result-ratio { color: var(--c-fndsadual); }
.result-row-fndsafp          .result-ratio { color: var(--c-fndsafp); }
.result-row-fndsatrans       .result-ratio { color: var(--c-fndsatrans); }
.result-row-fndsazk          .result-ratio { color: var(--c-fndsazk); }
.result-row-hybrid           .result-ratio { color: var(--c-hybrid); }
.result-row-postquantum      .result-ratio { color: var(--c-postquantum); }
.result-row-multialgo        .result-ratio { color: var(--c-multialgo); }
.result-row-multikem         .result-ratio { color: var(--c-multikem); }
.result-row-multikemtriple   .result-ratio { color: var(--c-multikemtriple); }
.result-row-latticecode      .result-ratio { color: var(--c-latticecode); }
.result-row-maxlightweight   .result-ratio { color: var(--c-maxlightweight); }
.result-row-maxpurepq        .result-ratio { color: var(--c-maxpurepq); }
.result-row-maxstateless     .result-ratio { color: var(--c-maxstateless); }
.result-row-maxcryptoagile   .result-ratio { color: var(--c-maxcryptoagile); }
.result-row-maxhybridtrans   .result-ratio { color: var(--c-maxhybridtrans); }
.result-row-maxpqczk         .result-ratio { color: var(--c-maxpqczk); }
.result-row-entropyorch      .result-ratio { color: var(--c-entropyorch); }
.result-row-pq3stack         .result-ratio { color: var(--c-pq3stack); }
.result-row-postzkhomo       .result-ratio { color: var(--c-postzkhomo); }
.result-row-quantumlattice   .result-ratio { color: var(--c-quantumlattice); }
.result-row-quantumconsensus .result-ratio { color: var(--c-quantumconsensus); }
.result-row-aisynthesized    .result-ratio { color: var(--c-aisynthesized); }
.result-row-dualkem          .result-ratio { color: var(--c-dualkem); }
.result-row-quadlayer        .result-ratio { color: var(--c-quadlayer); }

.result-bar-cell { width: 140px; padding-right: 8px; overflow: visible; }

.result-bar {
    height: 6px;
    border-radius: 3px;
    width: calc(var(--bar-pct, 0) * 1%);
    min-width: 3px;
    transition: width 0.6s ease;
}

.result-bar-classical        { background: var(--c-classical); }
.result-bar-classicalapi     { background: var(--c-classicalapi); }
.result-bar-passwordclassical{ background: var(--c-passwordclassical); }
.result-bar-mlkem            { background: var(--c-mlkem); }
.result-bar-hqc128           { background: var(--c-hqc128); }
.result-bar-hqc192           { background: var(--c-hqc192); }
.result-bar-hqc256           { background: var(--c-hqc256); }
.result-bar-fndsa512         { background: var(--c-fndsa512); }
.result-bar-fndsa1024        { background: var(--c-fndsa1024); }
.result-bar-fndsadual        { background: var(--c-fndsadual); }
.result-bar-fndsafp          { background: var(--c-fndsafp); }
.result-bar-fndsatrans       { background: var(--c-fndsatrans); }
.result-bar-fndsazk          { background: var(--c-fndsazk); }
.result-bar-hybrid           { background: var(--c-hybrid); }
.result-bar-postquantum      { background: var(--c-postquantum); }
.result-bar-multialgo        { background: var(--c-multialgo); }
.result-bar-multikem         { background: var(--c-multikem); }
.result-bar-multikemtriple   { background: var(--c-multikemtriple); }
.result-bar-latticecode      { background: var(--c-latticecode); }
.result-bar-maxlightweight   { background: var(--c-maxlightweight); }
.result-bar-maxpurepq        { background: var(--c-maxpurepq); }
.result-bar-maxstateless     { background: var(--c-maxstateless); }
.result-bar-maxcryptoagile   { background: var(--c-maxcryptoagile); }
.result-bar-maxhybridtrans   { background: var(--c-maxhybridtrans); }
.result-bar-maxpqczk         { background: var(--c-maxpqczk); }
.result-bar-entropyorch      { background: var(--c-entropyorch); }
.result-bar-pq3stack         { background: var(--c-pq3stack); }
.result-bar-postzkhomo       { background: var(--c-postzkhomo); }
.result-bar-quantumlattice   { background: var(--c-quantumlattice); }
.result-bar-quantumconsensus { background: var(--c-quantumconsensus); }
.result-bar-aisynthesized    { background: var(--c-aisynthesized); }
.result-bar-dualkem          { background: var(--c-dualkem); }
.result-bar-quadlayer        { background: var(--c-quadlayer); }

/* Group separator rows in results table */
.result-group-header td {
    padding: 10px 14px 4px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bm-muted);
    border-bottom: 1px solid var(--bm-border);
    background: var(--bm-surface);
}

.result-error { color: var(--bm-red); font-size: 0.78rem; padding: 12px 14px; }

/* ─── Insights panel ─────────────────────────────────────────────── */
.bm-insights-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}

.insight-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border-left: 3px solid;
}

.insight-card-overhead {
    background: rgba(255,71,87,0.05);
    border-left-color: var(--bm-red);
}

.insight-card-parallel {
    background: rgba(0,212,255,0.05);
    border-left-color: var(--bm-cyan);
}

.insight-card-tradeoff {
    background: rgba(0,255,136,0.05);
    border-left-color: var(--bm-green);
}

.insight-card-method {
    background: rgba(100,116,139,0.07);
    border-left-color: var(--bm-muted);
}

.insight-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }

.insight-body strong {
    display: block;
    font-size: 0.82rem;
    color: var(--bm-text);
    margin-bottom: 5px;
}

.insight-body span {
    font-size: 0.77rem;
    color: var(--bm-muted);
    line-height: 1.6;
}

/* ─── CTA strip ──────────────────────────────────────────────────── */
.bm-cta-strip {
    background: var(--bm-card);
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bm-cta-text { flex: 1; }
.bm-cta-text strong { display: block; color: var(--bm-cyan); font-size: 0.95rem; margin-bottom: 4px; }
.bm-cta-text span   { font-size: 0.8rem; color: var(--bm-muted); }

.bm-cta-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.bm-cta-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all var(--bm-transition);
    border: 1px solid;
    white-space: nowrap;
}

.bm-cta-btn-primary {
    background: rgba(0,212,255,0.12);
    border-color: rgba(0,212,255,0.4);
    color: var(--bm-cyan);
}

.bm-cta-btn-primary:hover {
    background: rgba(0,212,255,0.22);
    border-color: var(--bm-cyan);
}

.bm-cta-btn-secondary {
    background: transparent;
    border-color: var(--bm-border);
    color: var(--bm-muted);
}

.bm-cta-btn-secondary:hover {
    border-color: var(--bm-border-hi);
    color: var(--bm-text);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.bm-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.76rem;
    color: var(--bm-muted);
    border-top: 1px solid var(--bm-border);
}

.bm-footer a { color: var(--bm-cyan); text-decoration: none; }
.bm-footer a:hover { color: var(--bm-green); }

/* ─── Why these numbers matter ───────────────────────────────────── */
.bm-why-matters {
    background: rgba(0,212,255,0.03);
    border: 1px solid rgba(0,212,255,0.1);
    border-radius: 10px;
    padding: 16px 20px 18px;
    margin-bottom: 22px;
}

.bm-why-title {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bm-muted);
    margin-bottom: 12px;
}

.bm-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bm-why-item-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bm-cyan);
    margin-bottom: 5px;
}

.bm-why-item-desc {
    font-size: 0.74rem;
    color: var(--bm-muted);
    line-height: 1.55;
}

/* ─── Results header + toggle ────────────────────────────────────── */
.bm-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bm-results-header .bm-section-label { margin-bottom: 0; }

.bm-view-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bm-toggle-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bm-muted);
}

.bm-toggle-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--bm-border);
    background: transparent;
    color: var(--bm-muted);
    font-family: inherit;
    font-size: 0.74rem;
    cursor: pointer;
    transition: all var(--bm-transition);
    white-space: nowrap;
}

.bm-toggle-btn:hover { border-color: var(--bm-border-hi); color: var(--bm-text); }

.bm-toggle-btn.bm-toggle-active {
    background: rgba(0,212,255,0.1);
    border-color: rgba(0,212,255,0.45);
    color: var(--bm-cyan);
}

.bm-toggle-explainer {
    font-size: 0.74rem;
    color: var(--bm-muted);
    background: rgba(0,212,255,0.04);
    border: 1px solid rgba(0,212,255,0.12);
    border-radius: 7px;
    padding: 8px 12px;
    margin-bottom: 14px;
    line-height: 1.55;
}

/* ─── Post-ZK insight card ───────────────────────────────────────── */
.insight-card-postzk {
    background: rgba(219,39,119,0.05);
    border-left-color: var(--c-postzkhomo);
    grid-column: 1 / -1;
}

/* ─── Recommendations panel ──────────────────────────────────────── */
.bm-rec-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bm-border);
}

.rec-panel-title {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bm-muted);
    margin-bottom: 14px;
}

.rec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.rec-card {
    border-radius: 10px;
    border: 1px solid var(--bm-border);
    border-top: 3px solid;
    padding: 14px 16px;
    background: var(--bm-surface);
}

.rec-fastest  { border-top-color: var(--c-hqc128); }
.rec-balance  { border-top-color: var(--c-mlkem); }
.rec-max      { border-top-color: var(--c-dualkem); }
.rec-extreme  { border-top-color: var(--c-quadlayer); }

.rec-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.rec-icon { font-size: 1rem; }

.rec-card-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bm-muted);
}

.rec-algo {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bm-text);
    margin-bottom: 2px;
}

.rec-time {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bm-cyan);
    margin-bottom: 8px;
}

.rec-desc {
    font-size: 0.72rem;
    color: var(--bm-muted);
    line-height: 1.5;
}

/* ─── Hidden utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bm-group-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
    .bm-group-grid    { grid-template-columns: repeat(2, 1fr); }
    .bm-insights-panel { grid-template-columns: 1fr; }
    .bm-header-inner  { flex-wrap: wrap; }
    .bm-why-grid      { grid-template-columns: 1fr; }
    .rec-grid         { grid-template-columns: repeat(2, 1fr); }
    .bm-results-header { flex-direction: column; align-items: flex-start; }
    .bm-results-table th:nth-child(2),
    .bm-results-table th:nth-child(3),
    .bm-results-table th:nth-child(4),
    .result-time      { display: none; }
    .bm-cta-strip     { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .bm-group-grid { grid-template-columns: 1fr; }
    .rec-grid      { grid-template-columns: 1fr; }
}