.q-banner { background: linear-gradient(90deg, #36c7d0, #1990ff); color: white; border-radius: 16px;
                 padding: 18px 20px; font-weight: 800; font-size: 20px; box-shadow: 0 8px 22px rgba(15,23,42,.12); }
    .q-sub { color: rgba(255,255,255,.9); font-weight: 500; font-size: 14px; margin-top: 4px; }
    .q-block { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px; padding: 16px;
                box-shadow: 0 8px 22px rgba(15,23,42,.06); transition: transform .2s ease, box-shadow .2s ease; }
    .q-block:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15,23,42,.08); }
    .q-title { display:flex; align-items:center; gap:10px; color:#1d4ed8; font-weight:800; font-size:18px; margin-bottom:6px; }
    .q-chip { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px;
               background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; font-weight:800; }
    .q-desc { color:#0f172a; margin-bottom:10px; }
    .desc-list { margin: 0; padding-left: 1.1rem; }
    .desc-list li { margin: 2px 0 6px; line-height: 1.35; }
    .field { background:white; border:2px solid #e5e7eb; border-radius:12px; padding:8px 10px; }
    .field:focus { outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35); }
    .resultat { font-weight:800; margin-top:6px; }
    .correct { color:#16a34a; }
    .incorrect { color:#dc2626; }
    #fireworks { position: fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }
    .note { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:12px; padding:10px 12px; }
    .note h4 { font-weight:800; margin-bottom:4px; }