.qo-no-scroll { overflow: hidden; }

.qo-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: grid; place-items: center; z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.qo-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.qo-overlay[hidden] { display: none !important; }


.qo-wrap {
  width: min(900px, 92vw); max-height: 90vh; 
  background: #fff; border-radius: 12px; box-shadow:0 10px 40px rgba(0,0,0,.25);;
  
}

.qo-header { display: flex; align-items: center; padding: 8px 20px 3p 20px; }
.qo-title { margin: 0; padding: 10px; font-size: 1.5rem; color: blue; background: #dadaec;; }
.qo-title-main { margin: 0; font-size: 1.25rem; }
.qo-close { margin-left: auto; background: transparent; color: blue; border: 0; font-size: 2.0rem; cursor: pointer; }

.qo-note {
  padding: 6px 20px; font-size: .9rem; color: #444; background: #f7f7fb;
  border-bottom: 1px solid #eee;
}

.qo-body { padding: 16px 20px;
  max-height: 60vh; 
  overflow: auto; display: flex; flex-direction: column;}
.qo-footer { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid #eee; }
.qo-flex-spacer { flex: 1; }
.qo-submit, .qo-reset {
  padding: 10px 14px; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; background: #f6f6f6;
}
.qo-submit { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.qo-submit:hover { background:white; border-color: #1f6feb; color: blue; }

.qo-score { padding: 10px 20px; background: #eef6ff; border-bottom: 1px solid #dbe9ff; font-weight: 600; }

.qo-q { padding: 14px; border: 3px solid slateblue; border-radius: 10px; margin-bottom: 12px; box-shadow: 3px 3px 3px rgba(0,0,0,.25);background: white;}
.qo-q-head { display: flex; gap: 10px; align-items: baseline; color: #666; margin-bottom: 0px; }
.qo-q-number { font-weight: 700; color: #333; }
.qo-q-prompt { font-weight: 600; margin: 0px 0 5px 0.5rem; }
.qo-options { display: grid; gap: 0px; }

.qo-option { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0px 20px; border-radius: 8px; }
.qo-option input { margin-top: 3px; }
.qo-option.qo-ans-picked { background: #fafafa; }
.qo-ans-correct { outline: 2px solid #3fb950; }
.qo-ans-wrong   { outline: 2px solid #f85149; }

.qo-q.qo-correct { border-color: #3fb950; background: #f2fcf5; }
.qo-q.qo-wrong   { border-color: #f85149; background: #fff5f5; }

.qo-feedback { margin-top: 8px; font-size: .95rem; color: #333; }



/* :root{ --bg:#ececf7; --card:#141421; --muted:#4361f2; --ink:#131d5f; --accent:#6aa1ff; --accent2:#5ee3c3; --err:#ff6b6b } */
/* html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif} */
.wrap{max-width:960px;padding:clamp(12px,3vw,24px)}
.quiz{background:linear-gradient(180deg, rgba(106,161,255,.12), rgba(94,227,195,.06)); border:1px solid rgba(255,255,255,.08); border-radius:7px; box-shadow:0 10px 40px rgba(0,0,0,.25); overflow:hidden}
.quiz-header{padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)} */
.quiz-header h1{margin:.25rem 0 .1rem;font-size:clamp(1.05rem,2.8vw,1.4rem);font-weight:800} */
.quiz-header p{margin:.25rem 0 0;color:var(--muted)} */


.quiz-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.75rem;align-items:left}
select, button{cursor:pointer;border:2px solid black;background:transparent;color:var(--ink); padding:.55rem .8rem;border-radius:10px;transition:.2s;font-weight:600}
button:hover, select:hover{transform:translateY(-1px);background:rgba(1, 16, 38, 0.06)}
button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#0d1222}

.question{padding:1rem 1.25rem;border-bottom:1px dashed rgba(255,255,255,.08)}
.q-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.q-title{font-weight:700}
.q-type{font-size:.85rem;color:var(--muted)}
.options{margin:.005rem 0 0;display:grid;gap:.005rem}
.option{display:flex;gap:.006rem;align-items:flex-start;padding:.16rem .17rem;border:1px solid rgba(255,255,255,.08);border-radius:10px}
.option input{margin-top:.2rem}
.explain{margin:.6rem 0 0;padding:.6rem .7rem; background:rgba(94,227,195,.08); border-left:3px solid var(--accent2); border-radius:8px}
.correct{outline:2px solid rgba(94,227,195,.8)}
.incorrect{outline:2px solid rgba(255,107,107,.7)}
.footer{padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center}
.score{font-weight:800}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:.8rem;color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}