/* ---- Quiz ---- */
#screen-quiz{display:none;}
.quiz-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.quiz-question{
  background:var(--bg-2);
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.9rem 1.9rem;
}
.quiz-number{
  flex:none;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--panel-dark);
  color:var(--ink);
  font-family:'Outfit', system-ui, sans-serif;
  font-weight:700;
  font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
}
.quiz-question p{
  margin:0;
  font-family:'Outfit', system-ui, sans-serif;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.3;
}
.quiz-answers{
  background:var(--panel-dark);
  padding:1.7rem 1.9rem 1.9rem;
}
.answers-label{
  font-size:.85rem;
  color:var(--ink-mute);
  margin:0 0 1rem;
}
.option{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.6rem 0;
  cursor:pointer;
}
.option input{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px; flex:none;
  margin-top:.15rem;
  border-radius:50%;
  border:2px solid var(--ink-mute);
  background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
}
.option input::after{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--teal-pop);
  transform:scale(0);
  transition:transform .12s ease;
}
.option input:checked{border-color:var(--teal-pop);}
.option input:checked::after{transform:scale(1);}
.option input:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}
.option p{margin:0; font-size:1rem; color:var(--ink);}

.quiz-next{
  margin-top:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:'Outfit', system-ui, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  background:var(--accent-orange);
  border:none;
  border-radius:11px;
  padding:.85rem 2.2rem;
  cursor:pointer;
  margin-left:auto;
  margin-right:auto;
  width:max-content;
  box-shadow:0 5px 0 var(--accent-orange-strong);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.quiz-next:disabled{opacity:.4; cursor:not-allowed;}
.quiz-next:not(:disabled):hover{transform:translateY(2px); box-shadow:0 3px 0 var(--accent-orange-strong);}
.quiz-next:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

.quiz-back{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:1.1rem auto 0;
  width:max-content;
  padding:.5rem 1.1rem;
  background:none;
  border:1.5px solid transparent;
  border-radius:999px;
  color:var(--ink-mute);
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  cursor:pointer;
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.quiz-back span{transition:transform .2s ease;}
.quiz-back:not(:disabled):hover{color:var(--teal-pop); border-color:var(--line); background:rgba(255,255,255,.05);}
.quiz-back:not(:disabled):hover span{transform:translateX(-3px);}
.quiz-back:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}
.quiz-back:disabled{visibility:hidden;}

.dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:1.5rem;
}
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.dot.done{background:var(--ink-soft);}
.dot.active{background:var(--teal-pop); transform:scale(1.25);}