:root { --bg:#0f172a; --card:#1e293b; --txt:#e2e8f0; --ok:#22c55e; --ko:#ef4444; --acc:#38bdf8; --muted:#94a3b8; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,sans-serif; background:var(--bg); color:var(--txt);
       display:flex; justify-content:center; padding:2rem 1rem; }
main { width:100%; max-width:560px; }
h1 { text-align:center; color:var(--acc); margin-top:0; }
.card { background:var(--card); padding:1.5rem; border-radius:12px; }
.question { font-size:1.3rem; text-align:center; margin:1rem 0 1.5rem; line-height:1.4; }
.options { display:grid; gap:.6rem; }
button { font:inherit; padding:.8rem; border:2px solid transparent; border-radius:8px;
         background:#334155; color:var(--txt); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--acc); }
button:disabled { cursor:default; }
button.ok { background:var(--ok); color:#06220f; }
button.ko { background:var(--ko); }
.info { min-height:1.5rem; text-align:left; margin-top:1rem; color:var(--muted);
        font-size:.9rem; white-space:pre-line; }
.bar { display:flex; justify-content:space-between; font-size:.9rem; color:var(--muted); }
.settings { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.8rem; margin:1rem 0; }
.settings label { display:grid; gap:.3rem; font-size:.85rem; color:var(--muted); }
select { font:inherit; padding:.6rem; border-radius:8px; border:2px solid #334155;
         background:#0f172a; color:var(--txt); }
.modes { display:grid; gap:.6rem; margin-top:1rem; }
.hidden { display:none; }
.primary { background:var(--acc); color:#06222e; font-weight:600; }
table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; }
td, th { padding:.3rem .5rem; border-bottom:1px solid #334155; text-align:left; }
footer { text-align:center; margin-top:2rem; font-size:.85rem; color:var(--muted); }
footer a { color:var(--acc); text-decoration:none; }
footer a:hover { text-decoration:underline; }
.erreur { color: var(--ko); font-size: .9rem; }
button:disabled.primary { opacity: .5; }
small { color: var(--muted); }