/* ═══════════════════════════════════════════════════════
   Shared quiz / question-types system (was the per-page .uNN-* islands).
   Global classes, one .qz- prefix — used by any page, defined ONCE here.
   Behaviour lives in scripts/quiz.js. Colours kept as-authored for now.
═══════════════════════════════════════════════════════ */
/* ── Tab system ── */
.qz-tabrow {
  display: flex;
  gap: 0;
}
.qz-tab {
  flex: 1;
  padding: 0.7rem 0.5rem;
  border: none;
  border-radius: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  background: rgba(255,255,255,0.04);
  opacity: 0.38;
  transition: opacity 0.14s;
  letter-spacing: 0.2px;
}
.qz-tab.on { opacity: 1; background: rgba(255,255,255,0.07); }
.qz-tab:hover:not(.on) { opacity: 0.6; }
.qz-tab.tc { color: #00fff5; }
.qz-tab.tg { color: #ffcc00; }
.qz-tab.tp { color: #ff006e; }
.qz-tab.tv { color: #c87aff; }
.qz-tab.tn { color: #00ff64; }
.qz-panel-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 1.6rem 1.75rem;
  margin-bottom: 2rem;
}
.qz-pane { display: none; }
.qz-pane.on { display: block; animation: qzf .18s ease; }
@keyframes qzf { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
/* ── Content elements ── */
.qz-intro {
  border-left: 3px solid var(--ac, #fff);
  padding-left: 0.85rem;
  font-size: 0.97rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-bottom: 1.4rem;
}
.qz-thread {
  font-size: 0.93rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 1rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.08);
}
.qz-thread strong { color: #fff; }
.qz-steps { display:flex; flex-direction:column; gap:0.45rem; margin:0.75rem 0; }
.qz-step { display:grid; grid-template-columns:28px 1fr; gap:0.7rem; align-items:start; }
.qz-sn {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:900; color:rgba(255,255,255,0.55); flex-shrink:0; margin-top:2px;
}
.qz-st { font-size:0.93rem; line-height:1.6; color:rgba(255,255,255,0.8); padding-top:0.1rem; }
.qz-st strong { color:#fff; }
/* ── Sample AP question ── */
.qz-sq {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:1.35rem 1.4rem;
  margin-bottom:1.4rem;
}
.qz-sq-lbl {
  font-size:0.65rem; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  color:var(--ac,#fff); margin-bottom:0.9rem;
  display:flex; align-items:center; gap:0.5rem;
}
.qz-sq-lbl::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.08); }
.qz-sq-parts { margin-bottom:0.8rem; display:flex; flex-direction:column; gap:0.25rem; }
.qz-sq-part { font-size:0.93rem; color:rgba(255,255,255,0.78); line-height:1.5; }
.qz-sq-part .rom { color:rgba(255,255,255,0.35); font-size:0.82rem; margin-right:0.4rem; }
.qz-sq-stem { font-size:0.97rem; font-weight:700; color:#fff; line-height:1.5; margin-bottom:0.75rem; }
.qz-sq-opts { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.7rem; }
.qz-sq-opt { padding:0.55rem 0.85rem; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); font-size:0.88rem; color:rgba(255,255,255,0.65); display:flex; gap:0.55rem; }
.qz-sq-opt .let { color:rgba(255,255,255,0.3); font-weight:800; font-size:0.78rem; flex-shrink:0; }
.qz-sq-opt.correct { border-color:#00ff6444; background:rgba(0,255,100,0.07); color:rgba(200,255,210,0.9); }
.qz-sq-opt.correct .let { color:#00ff64; }
.qz-sq-reveal { margin-top:0.8rem; padding:0.8rem 1rem; border-radius:10px; background:rgba(0,255,100,0.06); border:1px solid rgba(0,255,100,0.18); font-size:0.87rem; color:rgba(200,255,210,0.9); line-height:1.6; display:none; }
.qz-sq-reveal.show { display:block; }
.qz-revbtn { margin-top:0.6rem; padding:0.38rem 0.85rem; border-radius:6px; border:1px solid rgba(200,122,255,0.3); background:rgba(200,122,255,0.07); color:#c87aff; font-family:'Outfit',sans-serif; font-size:0.78rem; font-weight:800; cursor:pointer; }
.qz-revbtn:hover { background:rgba(200,122,255,0.14); }
/* ── States widget ── */
/* ── Place value display ── */
/* ── Binary builder ── */
/* ── Doubling table ── */
/* ── Two-col notes ── */
.qz-notes { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; margin-top:1.25rem; }
.qz-notes-hd { padding:0.6rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.025); font-size:0.65rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); }
.qz-notes-cols { display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:560px){ .qz-notes-cols { grid-template-columns:1fr; } }
.qz-notes-col { padding:1.1rem 1.2rem; font-size:0.88rem; line-height:1.65; color:rgba(255,255,255,0.75); }
.qz-notes-col:first-child { border-right:1px solid rgba(255,255,255,0.05); }
.qz-notes-col h3 { font-size:0.92rem; font-weight:800; color:#fff; margin-bottom:0.5rem; }
.qz-notes-col h4 { font-size:0.82rem; font-weight:800; color:rgba(255,255,255,0.55); margin:0.85rem 0 0.3rem; }
.qz-notes-col p  { margin-bottom:0.6rem; }
.qz-notes-col p:last-child { margin-bottom:0; }
.qz-notes-col ol { padding-left:1.1rem; display:flex; flex-direction:column; gap:0.3rem; }
.qz-notes-col ol li { font-size:0.85rem; }
/* ── Quiz engine ── */
.qz-quiz { margin-top:1.5rem; }
.qz-score { display:flex; align-items:center; gap:0.9rem; padding:0.65rem 0.95rem; border-radius:9px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); margin-bottom:0.85rem; font-size:0.83rem; color:rgba(255,255,255,0.45); }
.qz-score-n { font-size:1rem; font-weight:900; color:#00ff64; }
.qz-score-t { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.07); overflow:hidden; }
.qz-score-f { height:100%; background:#00ff64; border-radius:2px; transition:width 0.3s; }
.qz-qlbl { font-size:0.65rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:#ff006e; margin-bottom:0.4rem; }
.qz-qparts { display:flex; flex-direction:column; gap:0.25rem; margin-bottom:0.65rem; }
.qz-qpart { font-size:0.9rem; color:rgba(255,255,255,0.78); line-height:1.5; }
.qz-qpart .rom { color:rgba(255,255,255,0.35); font-size:0.8rem; margin-right:0.35rem; }
.qz-qstem { font-size:0.95rem; font-weight:700; color:#fff; line-height:1.5; margin-bottom:0.65rem; }
.qz-opts { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.6rem; }
.qz-opt { display:flex; align-items:center; gap:0.55rem; padding:0.55rem 0.85rem; border-radius:8px; border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.04); cursor:pointer; font-size:0.9rem; color:rgba(255,255,255,0.78); font-family:'Outfit',sans-serif; text-align:left; transition:all 0.11s; }
.qz-opt:hover:not(:disabled) { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); }
.qz-opt.ok  { border-color:#00ff6444; background:rgba(0,255,100,0.09); color:rgba(200,255,210,0.9); }
.qz-opt.no  { border-color:#ff006e44; background:rgba(255,0,110,0.07); color:rgba(255,160,160,0.9); }
.qz-opt:disabled { cursor:default; }
.qz-ol { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; flex-shrink:0; color:rgba(255,255,255,0.35); }
.qz-opt.ok .qz-ol { background:rgba(0,255,100,0.18); border-color:#00ff64; color:#00ff64; }
.qz-opt.no .qz-ol { background:rgba(255,0,110,0.18); border-color:#ff006e; color:#ff006e; }
.qz-fb { border-radius:8px; padding:0.75rem 0.9rem; font-size:0.86rem; line-height:1.6; margin-bottom:0.55rem; display:none; }
.qz-fb.show { display:block; }
.qz-fb.ok { background:rgba(0,255,100,0.07); border:1px solid rgba(0,255,100,0.2); color:rgba(200,255,210,0.9); }
.qz-fb.no { background:rgba(255,0,110,0.06); border:1px solid rgba(255,0,110,0.18); color:rgba(255,180,180,0.9); }
.qz-next-btn { padding:0.45rem 1rem; border-radius:7px; border:1px solid rgba(255,204,0,0.3); background:rgba(255,204,0,0.07); color:#ffcc00; font-family:'Outfit',sans-serif; font-size:0.82rem; font-weight:800; cursor:pointer; display:none; }
.qz-next-btn:hover { background:rgba(255,204,0,0.14); }
.qz-next-btn.show { display:inline-block; }
.qz-done { text-align:center; padding:1.75rem 1rem; }
.qz-done-n { font-size:2.6rem; font-weight:900; color:#00ff64; margin-bottom:0.3rem; }
.qz-done-l { color:rgba(255,255,255,0.4); margin-bottom:1.1rem; font-size:0.92rem; }
.qz-retry-btn { padding:0.55rem 1.3rem; border-radius:7px; border:1px solid rgba(0,255,100,0.3); background:rgba(0,255,100,0.08); color:#00ff64; font-family:'Outfit',sans-serif; font-size:0.85rem; font-weight:800; cursor:pointer; }
.qz-retry-btn:hover { background:rgba(0,255,100,0.14); }
.qz-hr { border:none; border-top:1px solid rgba(255,255,255,0.06); margin:1.4rem 0; }
.qz-sim { width:100%; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(255,255,255,0.02); display:block; }
/* Centered "Exam Question Types" section intro (replaces the old callout) */
.qz-qhead { text-align:center; max-width:640px; margin:2.4rem auto 1.6rem; }
.qz-qhead .qh-title { font-family:'Outfit',sans-serif; font-weight:800; color:#fff; font-size:clamp(1.5rem,3.4vw,2.05rem); line-height:1.12; letter-spacing:-0.01em; margin:0 0 0.55rem; }
.qz-qhead .qh-sub { font-family:'Outfit',sans-serif; color:rgba(255,255,255,0.62); font-size:1.02rem; line-height:1.55; margin:0; }
.modern-container-v3 {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #121212; /* Or whatever your dark mode background is */
  color: #ffffff;
}
.q-text, .f-text {
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
/* alias: some pages named the panel container .panel instead of .panel-wrap */
.qz-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-top: none; border-radius: 0 0 14px 14px; padding: 1.6rem 1.75rem; margin-bottom: 2rem; }
.qz-wrap { font-family: 'Outfit', sans-serif; }