.bq-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:760px;margin:0 auto;color:#1a1a2e}
.bq-header{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%);color:#fff;border-radius:14px;padding:2rem 2.2rem;margin-bottom:1.8rem;text-align:center}
.bq-header h2{font-size:1.6rem;font-weight:700;margin:0 0 .4rem;color:#fff}
.bq-header p{font-size:.95rem;opacity:.8;margin:0 0 1rem}
.bq-meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.bq-meta span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 14px;font-size:.8rem;color:#fff}
.bq-progress-wrap{background:#e8e8f0;border-radius:20px;height:8px;margin-bottom:1.2rem;overflow:hidden}
.bq-progress{height:100%;background:linear-gradient(90deg,#0f3460,#e94560);border-radius:20px;transition:width .4s}
.bq-counter{display:flex;justify-content:space-between;font-size:.85rem;color:#666;margin-bottom:1.5rem}
.bq-score-live{font-weight:600;color:#0f3460}
.bq-question-card{background:#fff;border:1px solid #e0e0ee;border-radius:12px;padding:1.6rem 1.8rem;margin-bottom:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.bq-question-text{font-size:1.1rem;font-weight:600;color:#1a1a2e;margin:0 0 1.2rem;line-height:1.5}
.bq-options{display:grid;gap:10px}
.bq-option{display:flex;align-items:center;gap:12px;padding:.85rem 1.1rem;border:2px solid #e0e0ee;border-radius:10px;cursor:pointer;transition:all .2s;background:#fafafe;font-size:.96rem;color:#333;text-align:left;width:100%}
.bq-option:hover:not(:disabled){border-color:#0f3460;background:#f0f4ff;transform:translateX(4px)}
.bq-option .opt-letter{width:30px;height:30px;border-radius:50%;background:#e8e8f4;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#0f3460;flex-shrink:0}
.bq-option.correct{border-color:#22c55e;background:#f0fdf4}
.bq-option.correct .opt-letter{background:#22c55e;color:#fff}
.bq-option.wrong{border-color:#ef4444;background:#fef2f2}
.bq-option.wrong .opt-letter{background:#ef4444;color:#fff}
.bq-option.reveal-correct{border-color:#22c55e;background:#f0fdf4;opacity:.7}
.bq-option:disabled{cursor:default}
.bq-explanation{background:#f8f9ff;border-left:4px solid #0f3460;border-radius:0 8px 8px 0;padding:.9rem 1.1rem;margin-top:1rem;font-size:.9rem;color:#333;line-height:1.6;display:none}
.bq-explanation.show{display:block}
.bq-next-btn{display:none;width:100%;margin-top:1.2rem;padding:.9rem;background:#0f3460;color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}
.bq-next-btn.show{display:block}
.bq-next-btn:hover{background:#e94560}
.bq-result{background:#fff;border:1px solid #e0e0ee;border-radius:14px;padding:2.2rem;text-align:center;display:none}
.bq-result.show{display:block}
.bq-score-circle{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#0f3460,#e94560);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;color:#fff;font-size:2rem;font-weight:800}
.bq-result-title{font-size:1.6rem;font-weight:700;color:#1a1a2e;margin-bottom:.4rem}
.bq-result-msg{font-size:1rem;color:#555;margin-bottom:1.5rem;line-height:1.6}
.bq-result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bq-btn-retry,.bq-btn-pdf,.bq-btn-share{padding:.8rem 1.6rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer}
.bq-btn-retry{background:#0f3460;color:#fff}
.bq-btn-retry:hover{background:#e94560}
.bq-btn-pdf{background:#22c55e;color:#fff}
.bq-btn-pdf:hover{background:#16a34a}
.bq-btn-share{background:#1877f2;color:#fff}
.bq-intro{font-size:.97rem;line-height:1.75;color:#333;margin-bottom:1.8rem}
.bq-intro p{margin:0 0 1rem}
.bq-outro{font-size:.97rem;line-height:1.75;color:#333;margin-top:1.8rem;background:#f8f9ff;border-radius:10px;padding:1.2rem 1.4rem}
.bq-outro p{margin:0 0 .6rem}
.bq-outro p:last-child{margin:0}
@media(max-width:580px){
  .bq-header{padding:1.4rem 1.2rem}
  .bq-header h2{font-size:1.3rem}
  .bq-question-card{padding:1.2rem}
  .bq-result-actions{flex-direction:column}
}