/* Bazaid Question Bank — مبني على النموذج التفاعلي. كل القواعد داخل .bzq-app */
.bzq-app{
      --navy:#20385f;
      --navy-2:#0b223d;
      --cyan:#1eb6d5;
      --cyan-2:#0aa0c2;
      --yellow:#ffc928;
      --bg:#f4f8fc;
      --card:#ffffff;
      --text:#1f3559;
      --muted:#6f7f94;
      --line:#dfe8f1;
      --soft:#eef6fb;
      --green:#19a463;
      --green-soft:#eaf8f1;
      --red:#e45454;
      --red-soft:#fff0f0;
      --shadow:0 16px 45px rgba(28,53,91,.10);
    }
.bzq-app, .bzq-app *{box-sizing:border-box}
.bzq-app{
      margin:0;
      font-family:var(--bzq-font);
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
    }
.bzq-app button{font:inherit}
.bzq-app .topbar{
      background:var(--navy);
      color:#fff;
      border-bottom:4px solid var(--yellow);
    }
.bzq-app .topbar-inner{
      max-width:var(--bzq-w,1220px);
      margin:auto;
      min-height:74px;
      padding:14px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
.bzq-app .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
    }
.bzq-app .brand-mark{
      width:42px;height:42px;border-radius:calc(14px * var(--bzq-r,1));
      display:grid;place-items:center;
      background:linear-gradient(135deg,#0d2947,#1dc0db);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
    }
.bzq-app .brand-mark svg{width:24px;height:24px}
.bzq-app .brand small{display:block;color:#b9c8dc;font-weight:500;font-size:11px;margin-top:1px}
.bzq-app .top-actions{display:flex;gap:8px;align-items:center}
.bzq-app .ghost{
      border:1px solid rgba(255,255,255,.24);
      color:#fff;background:rgba(255,255,255,.06);
      padding:9px 13px;border-radius:calc(12px * var(--bzq-r,1));cursor:pointer;
    }
.bzq-app .prototype{
      color:#06273b;background:var(--cyan);
      padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px;
    }
.bzq-app .hero{
      background:var(--navy);
      color:#fff;
      padding:42px 22px 96px;
    }
.bzq-app .hero-inner{max-width:var(--bzq-w,1220px);margin:auto}
.bzq-app .breadcrumb{color:#a9bad0;font-size:13px;margin-bottom:13px}
.bzq-app .hero h1{
      font-size:clamp(28px,4vw,46px);
      margin:0 0 8px;
      line-height:1.35;
    }
.bzq-app .hero h1 span{color:var(--cyan)}
.bzq-app .hero p{margin:0;max-width:760px;color:#cad5e4;font-size:16px;line-height:1.9}
.bzq-app .page{
      max-width:var(--bzq-w,1220px);
      margin:-58px auto 50px;
      padding:0 22px;
      position:relative;
      z-index:2;
    }
.bzq-app .filters{
      background:var(--card);
      border-radius:calc(24px * var(--bzq-r,1));
      padding:22px;
      box-shadow:var(--shadow);
      border:1px solid rgba(32,56,95,.08);
      margin-bottom:20px;
    }
.bzq-app .section-head{
      display:flex;align-items:center;justify-content:space-between;
      gap:16px;margin-bottom:17px;
    }
.bzq-app .section-head h2{font-size:18px;margin:0}
.bzq-app .section-head p{margin:0;color:var(--muted);font-size:12px}
.bzq-app .category-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:12px;
    }
.bzq-app .cat-btn{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:calc(18px * var(--bzq-r,1));
      padding:15px 10px 13px;
      cursor:pointer;
      color:var(--text);
      transition:.22s ease;
      min-height:112px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:8px;
    }
.bzq-app .cat-btn:hover{transform:translateY(-2px);border-color:#9fdae9;box-shadow:0 9px 22px rgba(21,99,132,.08)}
.bzq-app .cat-btn.active{
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--navy-2),var(--cyan));
      box-shadow:0 12px 28px rgba(13,86,120,.18);
    }
.bzq-app .cat-icon{
      width:43px;height:43px;border-radius:calc(14px * var(--bzq-r,1));
      display:grid;place-items:center;
      color:var(--cyan);
      background:#edf9fc;
    }
.bzq-app .active .cat-icon{color:#fff;background:rgba(255,255,255,.13)}
.bzq-app .cat-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bzq-app .cat-title{font-weight:800;font-size:13px}
.bzq-app .cat-count{font-size:10px;color:var(--muted)}
.bzq-app .active .cat-count{color:#dff8ff}
.bzq-app .workspace{
      display:grid;
      grid-template-columns:minmax(0,1fr) 300px;
      gap:20px;
      align-items:start;
    }
.bzq-app .question-card{
      background:var(--card);
      border:1px solid rgba(32,56,95,.08);
      border-radius:calc(24px * var(--bzq-r,1));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
.bzq-app .question-top{
      display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:18px 22px;
      background:#fbfdff;
      border-bottom:1px solid var(--line);
    }
.bzq-app .q-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bzq-app .badge{
      border-radius:999px;padding:6px 10px;font-weight:700;font-size:11px;
      background:#e8f8fc;color:#0985a1;
    }
.bzq-app .badge.soft{background:#eef2f6;color:#65758a}
.bzq-app .q-number{font-weight:800;font-size:13px}
.bzq-app .question-body{padding:26px 26px 10px}
.bzq-app .question-text{
      font-size:20px;line-height:1.95;font-weight:700;color:#1a3155;
      margin:0 0 22px;
    }
.bzq-app .formula{
      background:#f4f8fb;border:1px dashed #bfd5e4;
      border-radius:calc(15px * var(--bzq-r,1));padding:13px 15px;margin:-7px 0 21px;
      font-size:21px;font-weight:800;text-align:center;direction:ltr;
    }
.bzq-app .answers{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-bottom:18px;
    }
.bzq-app .answer{
      border:1.5px solid var(--line);
      background:var(--card);
      border-radius:calc(16px * var(--bzq-r,1));
      min-height:62px;
      padding:12px 14px;
      display:flex;align-items:center;gap:12px;
      cursor:pointer;color:var(--text);
      transition:.18s ease;text-align:right;
    }
.bzq-app .answer:hover:not(:disabled){border-color:#8fcfe0;background:#f8fdff;transform:translateY(-1px)}
.bzq-app .answer:disabled{cursor:default}
.bzq-app .choice-letter{
      flex:0 0 34px;width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;background:#eef5fa;color:#43617f;
      font-weight:800;font-size:13px;
    }
.bzq-app .answer.correct{
      border-color:var(--green);background:var(--green-soft);color:#107a4a;
      box-shadow:0 0 0 3px rgba(25,164,99,.08);
    }
.bzq-app .answer.correct .choice-letter{background:var(--green);color:#fff}
.bzq-app .answer.wrong{
      border-color:var(--red);background:var(--red-soft);color:#b23838;
      box-shadow:0 0 0 3px rgba(228,84,84,.07);
    }
.bzq-app .answer.wrong .choice-letter{background:var(--red);color:#fff}
.bzq-app .feedback{
      margin-top:4px;border-radius:calc(16px * var(--bzq-r,1));padding:14px 15px;
      display:none;align-items:flex-start;gap:10px;
      font-size:13px;line-height:1.75;
    }
.bzq-app .feedback.show{display:flex}
.bzq-app .feedback.good{background:var(--green-soft);color:#116e46}
.bzq-app .feedback.bad{background:var(--red-soft);color:#a63d3d}
.bzq-app .feedback b{display:block;margin-bottom:2px}
.bzq-app .question-footer{
      padding:18px 22px 22px;
      display:flex;align-items:center;justify-content:space-between;gap:14px;
    }
.bzq-app .nav-group{display:flex;gap:8px}
.bzq-app .btn{
      border:0;border-radius:calc(13px * var(--bzq-r,1));padding:11px 17px;cursor:pointer;font-weight:800;
      transition:.16s ease;
    }
.bzq-app .btn:hover{transform:translateY(-1px)}
.bzq-app .btn.primary{background:var(--cyan);color:#fff}
.bzq-app .btn.secondary{background:#edf3f7;color:#3e5672}
.bzq-app .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.bzq-app .sidebar{
      position:sticky;top:18px;
      display:flex;flex-direction:column;gap:16px;
    }
.bzq-app .progress-card, .bzq-app .navigator-card{
      background:var(--card);border:1px solid rgba(32,56,95,.08);
      border-radius:calc(24px * var(--bzq-r,1));padding:20px;box-shadow:var(--shadow);
    }
.bzq-app .progress-card h3, .bzq-app .navigator-card h3{font-size:15px;margin:0 0 16px}
.bzq-app .ring-wrap{display:grid;place-items:center;margin:4px 0 18px}
.bzq-app .ring{
      --pct:0%;
      width:154px;height:154px;border-radius:50%;
      display:grid;place-items:center;
      background:conic-gradient(var(--cyan) var(--pct),#e7eef4 0);
      position:relative;
    }
.bzq-app .ring:after{
      content:"";position:absolute;inset:13px;background:var(--card);border-radius:50%;
      box-shadow:inset 0 0 0 1px #edf2f6;
    }
.bzq-app .ring-center{position:relative;z-index:2;text-align:center}
.bzq-app .ring-center strong{display:block;font-size:31px;color:var(--navy)}
.bzq-app .ring-center span{font-size:11px;color:var(--muted)}
.bzq-app .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bzq-app .stat{background:#f6f9fc;border-radius:calc(13px * var(--bzq-r,1));padding:10px 5px;text-align:center}
.bzq-app .stat b{display:block;font-size:18px}
.bzq-app .stat span{font-size:10px;color:var(--muted)}
.bzq-app .stat.good b{color:var(--green)}
.bzq-app .stat.bad b{color:var(--red)}
.bzq-app .q-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.bzq-app .q-dot{
      height:34px;border-radius:calc(9px * var(--bzq-r,1));border:1px solid var(--line);background:#f8fafc;
      color:#60728a;font-weight:800;font-size:11px;cursor:pointer;
    }
.bzq-app .q-dot.current{border-color:var(--cyan);background:#e9fafd;color:#0789a8}
.bzq-app .q-dot.answered-correct{background:var(--green-soft);border-color:#a6dfc3;color:var(--green)}
.bzq-app .q-dot.answered-wrong{background:var(--red-soft);border-color:#f2bbbb;color:var(--red)}
.bzq-app .hint{
      display:flex;gap:9px;align-items:flex-start;
      margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
      color:var(--muted);font-size:10.5px;line-height:1.7;
    }
.bzq-app .hint svg{width:16px;flex:0 0 16px;color:var(--cyan)}
.bzq-app .mini-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:13px;color:var(--muted);font-size:10px}
.bzq-app .legend-item{display:flex;align-items:center;gap:5px}
.bzq-app .legend-dot{width:8px;height:8px;border-radius:50%;background:#d8e2eb}
.bzq-app .legend-dot.g{background:var(--green)}
.bzq-app .legend-dot.r{background:var(--red)}
.bzq-app .legend-dot.c{background:var(--cyan)}
@media(max-width:980px){
  .bzq-app .category-grid{grid-template-columns:repeat(3,1fr)}
  .bzq-app .workspace{grid-template-columns:1fr}
  .bzq-app .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .bzq-app .topbar-inner{align-items:flex-start}
  .bzq-app .top-actions .ghost{display:none}
  .bzq-app .hero{padding-top:30px}
  .bzq-app .category-grid{grid-template-columns:repeat(2,1fr)}
  .bzq-app .answers{grid-template-columns:1fr}
  .bzq-app .sidebar{display:flex}
  .bzq-app .question-text{font-size:17px}
  .bzq-app .page{padding:0 13px}
  .bzq-app .hero{padding-left:16px;padding-right:16px}
  .bzq-app .question-body{padding:20px 16px 8px}
  .bzq-app .question-top, .bzq-app .question-footer{padding-left:16px;padding-right:16px}
}
/* ===== إضافات البلاجن ===== */
.bzq-app{line-height:1.5}
.bzq-app .bzq-top-end{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bzq-app .bzq-timer{display:inline-flex;align-items:center;gap:6px;direction:ltr;font-weight:800;font-size:13px;padding:6px 11px;border-radius:999px;background:var(--bg);color:var(--navy);font-variant-numeric:tabular-nums;border:1px solid var(--line)}
.bzq-app .bzq-timer svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bzq-app .bzq-timer.warn{background:var(--red-soft);color:var(--red);border-color:transparent}
.bzq-app .bzq-timer.idle{opacity:.6}
.bzq-app .bzq-timer-bar{height:4px;background:var(--line)}
.bzq-app .bzq-timer-bar i{display:block;height:100%;width:100%;background:var(--cyan);transition:width .5s linear}
.bzq-app .bzq-timer-bar i.warn{background:var(--red)}
.bzq-app .bzq-qimg{display:none;max-width:100%;max-height:340px;margin:0 auto 22px;border-radius:calc(15px * var(--bzq-r,1));border:1px solid var(--line);background:#fff}
.bzq-app .question-text,.bzq-app .answer span:last-child{white-space:pre-line}
.bzq-app .workspace.bzq-solo{grid-template-columns:minmax(0,1fr)}
.bzq-app.bzq-no-hero .page{margin-top:28px}
.bzq-app .brand-mark.has-logo{background:transparent;box-shadow:none}
.bzq-app .brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.bzq-app .cat-btn,.bzq-app .answer,.bzq-app .btn,.bzq-app .q-dot,.bzq-app .ghost{font-family:inherit}
.bzq-app .bzq-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;background:rgba(11,34,61,.55)}
.bzq-app .bzq-modal[hidden]{display:none}
.bzq-app .bzq-modal-box{width:100%;max-width:440px;max-height:92vh;overflow:auto;background:var(--card);color:var(--text);border-radius:calc(24px * var(--bzq-r,1));padding:28px 24px;text-align:center;box-shadow:var(--shadow)}
.bzq-app .bzq-modal-box h3{margin:0 0 6px;font-size:20px}
.bzq-app .bzq-modal-box p{margin:0 0 16px;color:var(--muted);font-size:13px}
.bzq-app .bzq-score{font-size:46px;font-weight:800;color:var(--navy);line-height:1.2;margin:6px 0 16px}
.bzq-app .bzq-modal-box .stats{margin-bottom:20px}
.bzq-app .bzq-modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
@media(max-width:680px){.bzq-app .bzq-top-end{gap:8px}}
@media(prefers-reduced-motion:reduce){.bzq-app *{transition:none!important}}