.choice-btn{transition:all 0.2s;cursor:pointer}
.choice-btn:hover{transform:translateX(4px);border-color:#93c5fd}
.choice-btn.selected{background:#1e40af!important;color:white!important;border-color:#1e40af!important}
.choice-btn.selected .choice-letter{background:rgba(255,255,255,0.2)!important;color:white!important}
.page{display:none}.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.3s ease}
.nav-dot{width:12px;height:12px;border-radius:50%;display:inline-block;cursor:pointer;transition:transform 0.15s}
.nav-dot.answered{background:#3b82f6}
.nav-dot.current{background:#f59e0b;transform:scale(1.3)}
.nav-dot.unanswered{background:#d1d5db}
/* DIAGRAM: always above question text, properly sized and centered */
.q-diagram-wrap{
  width:100%;
  margin:0 0 20px 0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.q-diagram-wrap img{
  max-width:100%;
  max-height:420px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  border:1px solid #e5e7eb;
  background:#fafafa;
  display:block;
}
.q-text{
  white-space:pre-wrap;
  line-height:1.75;
  margin-bottom:20px;
}