.learning-plan{margin:0 auto 34px;max-width:1180px;padding:24px 28px;border:1px solid #d9e7df;border-radius:25px;background:linear-gradient(125deg,#f4faf6,#fff 60%);box-shadow:0 14px 45px rgba(31,73,52,.08);display:grid;grid-template-columns:1.3fr repeat(3,.55fr) auto;gap:20px;align-items:center}.learning-plan-copy small{display:block;color:#5f8971;font-weight:800;letter-spacing:.12em}.learning-plan-copy h2{margin:5px 0;font-size:25px}.learning-plan-copy p{margin:0;color:#65736b;font-size:13px}.plan-stat{padding-left:18px;border-left:1px solid #d9e7df}.plan-stat b{display:block;font-size:23px}.plan-stat span{font-size:11px;color:#728078}.plan-start{border:0;border-radius:15px;background:#5f9b78;color:#fff;padding:15px 20px;font-weight:800;cursor:pointer;white-space:nowrap}.plan-start:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:850px){.learning-plan{grid-template-columns:repeat(3,1fr);margin-inline:14px}.learning-plan-copy{grid-column:1/-1}.plan-start{grid-column:1/-1}.plan-stat:first-of-type{padding-left:0;border-left:0}}@media(max-width:480px){.learning-plan{padding:21px 18px;gap:15px}.plan-stat b{font-size:19px}.plan-stat{padding-left:10px}.learning-plan-copy h2{font-size:22px}}

/* The quiz fills the viewport; only its question and explanation scroll. */
body:has(#quiz:not(.hidden)){overflow:hidden}
#quiz:not(.hidden){
  position:fixed;inset:0;z-index:1000;
  width:100%;max-width:none;height:100vh;height:100dvh;
  margin:0;padding: max(12px,env(safe-area-inset-top,0px)) max(15px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--cream,#f7f5ef);
}
#quiz .quiz-top{width:100%;max-width:820px;margin:0;flex-shrink:0}
#quiz .quiz-card{width:100%;max-width:820px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Keep the action outside the scroll container so mobile browsers cannot clip it. */
#quiz > #nextBtn{
  position:static;transform:none;flex:0 0 52px;
  width:100%;max-width:820px;height:52px;margin:0;
  box-shadow:0 8px 28px #0003;
}
@media(max-width:760px){
  #quiz .quiz-card{padding:20px 16px;border-radius:16px}
  #quiz .question-label{margin-top:16px}
  #quiz .meaning{margin-bottom:18px}
  #quiz .answers{gap:8px}
  #quiz .answer{min-height:48px;padding-top:10px;padding-bottom:10px}
}