.bq-app{font-family:Arial,sans-serif;color:#1a1a2e;font-size:15px;max-width:760px;margin:0 auto;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.bq-app *{box-sizing:border-box}

/* ── Login / blocked notices ── */
.bq-login-required,.bq-blocked{background:#fff;border-radius:14px;padding:36px 24px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.08);max-width:420px;margin:30px auto}
.bq-login-icon,.bq-blocked-icon{font-size:48px;margin-bottom:10px}
.bq-login-required h3,.bq-blocked h3{color:#1a237e;margin-bottom:8px}
.bq-login-required p,.bq-blocked p{color:#555;margin-bottom:16px;line-height:1.5}

/* ── Buttons ── */
.bq-btn{border:none;border-radius:30px;font-weight:700;cursor:pointer;font-size:15px;padding:12px 30px;transition:transform .15s,box-shadow .15s;font-family:inherit}
.bq-btn:active{transform:scale(.97)}
.bq-btn-primary{background:#1a237e;color:#fff;box-shadow:0 3px 10px rgba(26,35,126,.35)}
.bq-btn-outline{background:transparent;color:#1a237e;border:2px solid #1a237e}
.bq-btn-large{padding:14px 44px;font-size:16px;width:100%;max-width:320px}
.bq-btn-small{padding:7px 16px;font-size:12px;border-radius:20px;background:#1a237e;color:#fff}

/* ── Welcome screen ── */
.bq-welcome-screen{background:#fff;border-radius:16px;padding:34px 24px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.bq-lock-icon{font-size:56px;margin-bottom:10px}
.bq-welcome-screen h2{color:#1a237e;font-size:21px;margin-bottom:8px}
.bq-desc{color:#666;font-size:14px;margin-bottom:16px;line-height:1.6}
.bq-meta-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0}
.bq-meta-item{background:#e8eaf6;color:#3949ab;padding:8px 16px;border-radius:20px;font-size:13px}
.bq-student-tag{color:#888;font-size:13px;margin-bottom:18px}

/* ── Header / progress / timer ── */
.bq-hdr{background:linear-gradient(135deg,#1a237e,#283593);color:#fff;padding:16px;border-radius:12px;margin-bottom:14px;position:sticky;top:8px;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.bq-hdr h2{font-size:16px;margin-bottom:10px}
.bq-hdr-row{display:flex;align-items:center;gap:14px}
.bq-progress-wrap{flex:1}
.bq-progress-bar{background:rgba(255,255,255,.25);border-radius:6px;height:6px;overflow:hidden}
.bq-progress-fill{background:#ffd54f;height:100%;border-radius:6px;transition:width .3s}
.bq-progress-label{font-size:11px;opacity:.85;margin-top:4px}
.bq-timer{background:rgba(255,255,255,.18);padding:6px 14px;border-radius:20px;font-weight:700;font-size:14px;white-space:nowrap}
.bq-timer.bq-timer-warn{background:#c62828;animation:bq-pulse 1s infinite}
@keyframes bq-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Question cards ── */
.bq-q-card{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-left:4px solid #3949ab}
.bq-q-num{font-size:11px;font-weight:700;color:#5c6bc0;text-transform:uppercase;margin-bottom:6px}
.bq-q-text{font-size:15px;font-weight:600;color:#1a237e;margin-bottom:12px;line-height:1.5}
.bq-options{display:grid;gap:8px}
.bq-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;background:#fafafa}
.bq-opt:active{transform:scale(.98)}
.bq-opt-letter{width:26px;height:26px;border-radius:50%;background:#e8eaf6;color:#3949ab;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bq-opt-text{font-size:14px;line-height:1.4;color:#333}
.bq-opt.bq-selected{border-color:#3949ab;background:#e8eaf6}
.bq-opt.bq-selected .bq-opt-letter{background:#3949ab;color:#fff}
.bq-opt.bq-correct{border-color:#2e7d32;background:#e8f5e9}
.bq-opt.bq-correct .bq-opt-letter{background:#2e7d32;color:#fff}
.bq-opt.bq-wrong{border-color:#c62828;background:#ffebee}
.bq-opt.bq-wrong .bq-opt-letter{background:#c62828;color:#fff}
.bq-opt.bq-show-correct{border-color:#1565c0;background:#e3f2fd}
.bq-opt.bq-show-correct .bq-opt-letter{background:#1565c0;color:#fff}

.bq-warn-msg{background:#fff3cd;color:#856404;border:1px solid #ffc107;border-radius:8px;padding:10px 14px;font-size:13px;text-align:center;margin:0 0 12px}
.bq-btn-wrap{text-align:center;padding:8px 0 24px}

/* ── Review bar ── */
.bq-review-bar{background:#1b5e20;color:#fff;text-align:center;padding:10px 16px;font-size:13px;font-weight:700;border-radius:8px;margin-bottom:12px;position:sticky;top:78px;z-index:49}
.bq-review-legend{display:flex;justify-content:center;gap:16px;margin-top:6px;font-size:12px;font-weight:400}
.bq-leg{display:flex;align-items:center;gap:5px}
.bq-dot{width:12px;height:12px;border-radius:50%;display:inline-block}

/* ── Overlays / modals ── */
.bq-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;align-items:center;justify-content:center;padding:16px}
.bq-overlay.bq-show{display:flex}
.bq-modal-box{background:#fff;border-radius:16px;padding:26px 22px;width:100%;max-width:380px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}

/* score modal */
.bq-score-box h2{color:#1a237e;font-size:20px;margin-bottom:4px}
.bq-score-circle{width:120px;height:120px;border-radius:50%;margin:18px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;background:#f0f4f8}
.bq-score-num{font-size:36px;line-height:1;color:#1a237e}
.bq-score-total{font-size:14px;opacity:.7;color:#1a237e}
.bq-score-pct{font-size:22px;font-weight:700;margin:4px 0;color:#1a237e}
.bq-score-msg{font-size:15px;color:#555;margin-bottom:16px}
.bq-score-detail{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.bq-s-box{border-radius:10px;padding:10px 6px}
.bq-s-box span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.bq-s-box strong{font-size:22px;font-weight:700}
.bq-s-correct{background:#e8f5e9;color:#2e7d32}
.bq-s-wrong{background:#ffebee;color:#c62828}
.bq-score-actions{display:flex;flex-direction:column;gap:8px}
.bq-score-actions .bq-btn{width:100%}

/* review-pending state inside score modal */
.bq-review-pending{display:none;background:#fff8e1;border:1px solid #ffe082;border-radius:10px;padding:14px;margin-bottom:16px}
.bq-review-pending-icon{font-size:26px;margin-bottom:4px}
.bq-review-status-text{font-size:13px;color:#7a5c00;line-height:1.5;margin:0}

/* ── Dashboard ── */
.bq-dashboard{max-width:900px}

/* notification banner */
.bq-notif-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#1565c0,#1976d2);color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:18px;box-shadow:0 2px 10px rgba(21,101,192,.3)}
.bq-notif-icon{font-size:24px;flex-shrink:0}
.bq-notif-text{flex:1;display:flex;flex-direction:column;gap:2px}
.bq-notif-headline{font-size:14px}
.bq-notif-sub{font-size:12px;opacity:.9}
.bq-notif-dismiss{cursor:pointer;font-size:16px;opacity:.85;padding:4px;flex-shrink:0}
.bq-notif-dismiss:hover{opacity:1}

.bq-dash-hdr h2{color:#1a237e;font-size:21px;margin-bottom:4px}
.bq-dash-hdr p{color:#666;font-size:14px;margin-bottom:18px}
.bq-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.bq-stat-box{background:#fff;border-radius:12px;padding:18px 10px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.bq-stat-num{font-size:26px;font-weight:700;color:#1a237e}
.bq-stat-label{font-size:12px;color:#777;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.bq-dash-sub{color:#1a237e;font-size:16px;margin-bottom:10px}
.bq-empty{color:#888;font-size:14px;text-align:center;padding:30px}

.bq-history-table-wrap{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.bq-history-table{width:100%;border-collapse:collapse;font-size:14px}
.bq-history-table th{background:#f5f6fa;color:#444;text-align:left;padding:12px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.bq-history-table td{padding:12px 14px;border-top:1px solid #eee}
.bq-history-table tr.bq-row-new{background:#e3f2fd}
.bq-pill{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap}
.bq-pill-green{background:#d4edda;color:#155724}
.bq-pill-orange{background:#fff3cd;color:#856404}
.bq-pill-red{background:#f8d7da;color:#721c24}
.bq-pill-gray{background:#eceff1;color:#607d8b;font-weight:600}
.bq-new-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffd54f;margin-left:4px;vertical-align:middle}

@media(max-width:600px){
  .bq-history-table thead{display:none}
  .bq-history-table,.bq-history-table tbody,.bq-history-table tr,.bq-history-table td{display:block;width:100%}
  .bq-history-table tr{border-top:1px solid #eee;padding:10px 14px}
  .bq-history-table td{border:none;padding:4px 0;display:flex;justify-content:space-between;align-items:center}
  .bq-history-table td::before{content:attr(data-label);font-weight:700;color:#888;font-size:11px;text-transform:uppercase}
  .bq-dash-stats{grid-template-columns:1fr 1fr}
  .bq-notif-banner{flex-wrap:wrap}
}

/* Dashboard review modal */
.bq-dash-review-box{max-width:600px;text-align:left}
.bq-dash-review-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bq-dash-review-hdr h2{color:#1a237e;font-size:17px}
.bq-close-review-x{cursor:pointer;font-size:18px;color:#888}
.bq-dash-review-body .bq-q-card{text-align:left}

@media(max-width:480px){
  .bq-welcome-screen h2{font-size:18px}
  .bq-q-text{font-size:14px}
  .bq-opt-text{font-size:13px}
}