/* ============================================================
   CafeTele · 5G NTN course — Quiz engine styles
   House React-Flow theme (matches styles.css tokens).
   Mounts inside a .panel; one 40-MCQ assessment per chapter.
   ============================================================ */

.quizmount{--ok:#12b886;--ok-bg:#e6f8f1;--bad:#f03e5b;--bad-bg:#ffe9ee;}
.quizmount *{box-sizing:border-box}

/* ---- shell card ---- */
.qz{position:relative;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.qz .qz-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #fcfcff)}
.qz .qz-top .qz-ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  box-shadow:0 6px 16px -6px rgba(255,0,113,.5)}
.qz .qz-top h3{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--ink)}
.qz .qz-top .qz-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
.qz .qz-top .qz-best{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);
  font-family:var(--mono);background:#f4f4f9;border:1px solid var(--line2);
  padding:5px 10px;border-radius:20px}

/* ---- progress rail ---- */
.qz-rail{height:4px;background:var(--line);position:relative;overflow:hidden}
.qz-rail i{position:absolute;inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--pink),var(--purple));
  transition:right .4s cubic-bezier(.4,0,.1,1)}

.qz-body{padding:20px}

/* ---- intro ---- */
.qz-intro{text-align:center;padding:14px 6px 6px}
.qz-intro .big{font-size:44px;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.qz-intro p{max-width:560px;margin:12px auto 0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.qz-facts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 4px}
.qz-facts .f{background:#fafaff;border:1px solid var(--line2);border-radius:12px;
  padding:12px 16px;min-width:96px}
.qz-facts .f b{display:block;font-size:22px;font-weight:900;color:var(--ink);font-family:var(--mono)}
.qz-facts .f span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.qz-topics{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:16px auto 22px;max-width:640px}
.qz-topics .t{font-size:11px;font-weight:600;color:var(--muted);
  background:#f4f4f9;border:1px solid var(--line2);padding:4px 10px;border-radius:20px}

/* ---- question ---- */
.qz-qhead{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.qz-qhead .qn{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--pink);
  background:var(--pink-ghost);padding:3px 9px;border-radius:20px;flex:0 0 auto}
.qz-qhead .tag{font-size:10.5px;font-weight:700;color:var(--faint);text-transform:uppercase;
  letter-spacing:.06em;margin-left:auto}
.qz-stem{font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;margin:10px 0 16px}
.qz-stem code{font-family:var(--mono);font-size:.9em;background:#f4f4f9;padding:1px 5px;
  border-radius:5px;color:var(--purple)}

.qz-opts{display:flex;flex-direction:column;gap:9px}
.qz-opt{display:flex;align-items:flex-start;gap:11px;text-align:left;width:100%;
  border:1.5px solid var(--line2);background:#fff;border-radius:11px;padding:13px 14px;
  cursor:pointer;transition:.15s;font:inherit;color:var(--ink-soft)}
.qz-opt:hover:not(.locked){border-color:var(--pink);background:#fffafc;transform:translateX(2px)}
.qz-opt .key{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:800;color:var(--muted);
  background:#f4f4f9;border:1px solid var(--line2);transition:.15s}
.qz-opt .otext{font-size:13.5px;line-height:1.5;padding-top:2px}
.qz-opt.sel{border-color:var(--pink);background:var(--pink-ghost)}
.qz-opt.sel .key{background:var(--pink);color:#fff;border-color:var(--pink)}
.qz-opt.locked{cursor:default}
.qz-opt.correct{border-color:var(--ok);background:var(--ok-bg)}
.qz-opt.correct .key{background:var(--ok);color:#fff;border-color:var(--ok)}
.qz-opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.qz-opt.wrong .key{background:var(--bad);color:#fff;border-color:var(--bad)}
.qz-opt .mark{margin-left:auto;font-weight:900;font-size:15px;opacity:0;transition:.2s}
.qz-opt.correct .mark{opacity:1;color:var(--ok)}
.qz-opt.wrong .mark{opacity:1;color:var(--bad)}

/* ---- explain ---- */
.qz-exp{margin-top:14px;border-left:3px solid var(--pink);background:#fafaff;
  border-radius:0 10px 10px 0;padding:12px 15px;font-size:13px;line-height:1.6;
  color:var(--ink-soft);animation:qzin .3s ease}
.qz-exp .lab{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--pink);display:block;margin-bottom:4px}
.qz-exp.ok{border-left-color:var(--ok)} .qz-exp.no{border-left-color:var(--bad)}
.qz-exp.ok .lab{color:var(--ok)} .qz-exp.no .lab{color:var(--bad)}
.qz-exp .cite{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:11px;
  font-weight:600;color:var(--purple);background:#f6f2ff;border:1px solid #ece2ff;
  padding:2px 8px;border-radius:6px}
@keyframes qzin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- controls ---- */
.qz-ctrl{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.qz-btn{font:inherit;font-weight:700;font-size:13px;border-radius:10px;padding:11px 20px;
  cursor:pointer;border:1.5px solid var(--line2);background:#fff;color:var(--ink);transition:.15s}
.qz-btn:hover{border-color:var(--ink)}
.qz-btn.p{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(255,0,113,.6)}
.qz-btn.p:hover{filter:brightness(1.05);transform:translateY(-1px)}
.qz-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.qz-btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.qz-btn.ghost:hover{color:var(--pink);border-color:transparent}
.qz-spacer{margin-left:auto}
.qz-count{font-size:12px;font-weight:700;color:var(--muted);font-family:var(--mono)}

/* ---- jump grid ---- */
.qz-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.qz-grid b{flex-basis:100%;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--faint);margin-bottom:2px}
.qz-dot{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;transition:.12s}
.qz-dot:hover{border-color:var(--pink);color:var(--pink)}
.qz-dot.cur{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 2px rgba(26,25,43,.08)}
.qz-dot.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.qz-dot.no{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}

/* ---- results ---- */
.qz-res{text-align:center;padding:10px 6px}
.qz-ring{width:150px;height:150px;margin:6px auto 4px;position:relative}
.qz-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.qz-ring .val{position:absolute;inset:0;display:grid;place-content:center;align-content:center}
.qz-ring .val b{font-size:40px;font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1;font-family:var(--mono)}
.qz-ring .val span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.qz-verdict{font-size:22px;font-weight:900;letter-spacing:-.02em;margin-top:6px}
.qz-verdict.pass{color:var(--ok)} .qz-verdict.fail{color:var(--bad)}
.qz-res .line{color:var(--ink-soft);font-size:13.5px;margin-top:6px}
.qz-scoreline{display:flex;gap:10px;justify-content:center;margin:16px 0 6px;flex-wrap:wrap}
.qz-scoreline .s{background:#fafaff;border:1px solid var(--line2);border-radius:12px;padding:10px 16px}
.qz-scoreline .s b{display:block;font-size:20px;font-weight:900;font-family:var(--mono)}
.qz-scoreline .s.g b{color:var(--ok)} .qz-scoreline .s.r b{color:var(--bad)}
.qz-scoreline .s span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:700}

/* ---- review list ---- */
.qz-review{margin-top:22px;text-align:left}
.qz-review h4{font-size:13px;font-weight:800;color:var(--ink);margin:0 0 10px;
  display:flex;align-items:center;gap:8px}
.qz-ritem{border:1px solid var(--line2);border-radius:11px;padding:13px 15px;margin-bottom:9px;background:#fff}
.qz-ritem.no{border-left:3px solid var(--bad)} .qz-ritem.ok{border-left:3px solid var(--ok)}
.qz-ritem .rq{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5}
.qz-ritem .ra{font-size:12.5px;margin-top:7px;line-height:1.55}
.qz-ritem .ra .you{font-weight:700} .qz-ritem.no .ra .you{color:var(--bad)}
.qz-ritem .ra .cor{color:var(--ok);font-weight:700}
.qz-ritem .re{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.55;
  border-top:1px dashed var(--line2);padding-top:6px}
.qz-ritem .re code,.qz-ritem .rq code{font-family:var(--mono);font-size:.9em;background:#f4f4f9;padding:1px 4px;border-radius:4px;color:var(--purple)}

@media (max-width:640px){
  .qz-body{padding:15px}.qz-stem{font-size:15px}
  .qz-facts .f{min-width:78px;padding:10px 12px}
}