/* MPU-Tests cluster — scoped under .mpu-app / .mpu-card.
   Fits the dark site theme; the interactive test sits on a white "tool" panel
   so the SVG colours stay legible without recolouring. */

.mpu-app{padding-bottom:60px}
.mpu-app .lead{font-size:1.06rem;color:#e6edf6;line-height:1.75;margin:0 0 6px}
.mpu-app p{color:#c3cdda;line-height:1.75;font-size:1rem}
.mpu-app h2{margin:38px 0 12px}
.mpu-app h3{margin:22px 0 8px}
.mpu-app ul{padding-left:20px;color:#c3cdda}
.mpu-app li{margin:7px 0;line-height:1.6}
.mpu-app a{color:var(--gold-ll)}
.mpu-app figure{margin:20px 0}
.mpu-app figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);display:block}
.mpu-app figcaption{font-size:.8rem;color:var(--muted);margin-top:8px}

/* ── White tool panel (the interactive test) ───────────────── */
.mpu-card{background:#fff;color:#1f2937;border-radius:16px;padding:24px;margin:22px 0;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  --ink:#1f2937;--line:#334155;--accent:#0f766e;--correct:#0d9488;--wrong:#dc2626;
  --start:#16a34a;--bdr:#e2e8f0;--mut:#64748b;--bg2:#f1f5f4}
.mpu-card h2{color:#1f2937;font-family:"Manrope",sans-serif;font-size:1.25rem;font-weight:700;margin:0 0 4px;line-height:1.3}
.mpu-card p{color:#374151;font-size:.95rem;margin:0 0 12px}
.mpu-card .sub{font-size:.72rem;color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
.mpu-card svg{display:block}
.mpu-card .opts{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:12px 0}
.mpu-card .opt{font-size:.9rem;display:flex;align-items:center;gap:7px;cursor:pointer;color:#374151}
.mpu-card select{font:inherit;padding:6px 8px;border-radius:7px;border:1px solid var(--bdr);color:#1f2937;background:#fff}
.mpu-card .topbar{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--mut);margin-bottom:12px;gap:10px;flex-wrap:wrap}
.mpu-card .topbar b{color:#1f2937;font-variant-numeric:tabular-nums}
.mpu-card .pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px;margin-top:16px}
.mpu-card .key{font:inherit;font-size:1.05rem;font-weight:700;padding:12px 0;border-radius:9px;border:1px solid var(--bdr);background:#fff;color:#1f2937;cursor:pointer}
.mpu-card .key:hover{background:#f1f5f9}.mpu-card .key:active{transform:scale(.96)}
.mpu-card .bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.mpu-card .act{font:inherit;font-size:.9rem;font-weight:600;padding:10px 18px;border-radius:9px;border:1px solid var(--bdr);background:#fff;color:#1f2937;cursor:pointer}
.mpu-card .act.primary{background:#1f2937;color:#fff;border-color:#1f2937}
.mpu-card .hint{font-size:.85rem;color:var(--mut);text-align:center;margin:10px 0 0}
.mpu-card .qtext{font-size:.98rem;font-weight:600;color:#1f2937;margin:4px 0 14px}
.mpu-card .opts2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mpu-card .tile{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--bdr);border-radius:10px;background:#fff;cursor:pointer;font:inherit;font-size:.9rem;color:#1f2937;text-align:left}
.mpu-card .tile.sel{border-color:var(--accent);background:#ecfdf5;box-shadow:0 0 0 1px var(--accent) inset}
.mpu-card .tile svg{flex:none}
.mpu-card .figtop{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.mpu-card .figlabel{font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.mpu-card .figtop svg{border:1px solid var(--bdr);border-radius:10px;background:#fff}
.mpu-card .figgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;justify-items:center}
.mpu-card .figtile{padding:6px;border:1px solid var(--bdr);border-radius:10px;background:#fff;cursor:pointer}
.mpu-card .figtile.sel{border-color:var(--accent);background:#ecfdf5;box-shadow:0 0 0 1px var(--accent) inset}
.mpu-card .figtile:hover{border-color:var(--accent)}
.mpu-card .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.mpu-card .stat{background:var(--bg2);border-radius:10px;padding:14px}
.mpu-card .stat .l{font-size:.72rem;color:var(--mut);margin-bottom:4px}
.mpu-card .stat .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.mpu-card .note{font-size:.74rem;color:var(--mut);background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:11px 13px;margin-top:14px;line-height:1.55}
.mpu-card .hidden{display:none}

/* ── FAQ (dark) ────────────────────────────────────────────── */
.mpu-app .faq details{border:1px solid var(--border);border-radius:10px;padding:2px 16px;margin:8px 0;background:var(--navy-m)}
.mpu-app .faq summary{font-weight:600;font-size:.98rem;cursor:pointer;padding:13px 0;list-style:none;color:var(--white)}
.mpu-app .faq summary::-webkit-details-marker{display:none}
.mpu-app .faq summary::after{content:'+';float:right;color:var(--gold-ll);font-weight:400}
.mpu-app .faq details[open] summary::after{content:'\2013'}
.mpu-app .faq details p{margin:0 0 13px;color:#b8c2d0;font-size:.92rem}

/* ── Internal link cards (dark) ────────────────────────────── */
.mpu-app .links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
.mpu-app .linkcard{display:block;text-decoration:none;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--navy-m);color:var(--white)}
.mpu-app .linkcard:hover{border-color:var(--gold-l)}
.mpu-app .linkcard b{display:block;font-size:.98rem;margin-bottom:3px;color:var(--white)}
.mpu-app .linkcard span{font-size:.84rem;color:var(--muted)}

/* ── CTA block (uses site .btn buttons) ────────────────────── */
.mpu-app .mpu-cta{background:var(--navy-m);border:1px solid var(--border);border-radius:16px;padding:24px;margin:28px 0}
.mpu-app .mpu-cta h2{margin:0 0 8px;font-size:1.4rem}
.mpu-app .mpu-cta p{margin:0 0 16px;color:#c3cdda}
.mpu-app .mpu-cta .btn{margin:4px 8px 4px 0}