.app-page[data-band="6-8"] .exam { width: 100%; min-height: calc(100svh - 72px); padding: 12px; position: relative; overflow: hidden; }
.app-page[data-band="6-8"] .exam > nav { position: absolute; z-index: 5; top: 24px; left: 50%; transform: translateX(-50%); width: min(360px, calc(100% - 40px)); display: flex; justify-content: center; gap: 10px; border: 0; background: #071a32c7; backdrop-filter: blur(8px); }
.app-page[data-band="6-8"] .exam > nav span { min-width: 54px; min-height: 44px; color: #8fa5b9; font-size: 1.5rem; }
.app-page[data-band="6-8"] .exam > nav span.done,
.app-page[data-band="6-8"] .exam > nav span.active { color: #6b3d00; background: #ffd25a; }
.app-page[data-band="6-8"] .exam-grid { position: relative; display: block; width: 100%; min-height: calc(100svh - 96px); }
.app-page[data-band="6-8"] .exam-grid aside { position: absolute; inset: 0; min-height: 0; max-height: none; border: 3px solid #7be7df; border-radius: 28px; background: #65dcea; }
.app-page[data-band="6-8"] .exam-grid aside img { object-fit: cover; object-position: center; }
.app-page[data-band="6-8"] .exam-grid article { position: absolute; z-index: 4; top: 88px; left: 50%; bottom: auto; transform: translateX(-50%); width: min(420px, calc(100% - 28px)); min-height: 0; padding: 18px 20px; border: 3px solid #ffc951; border-radius: 24px; color: #fff; background: #071a32e8; box-shadow: 0 16px 50px #00102088; backdrop-filter: blur(10px); }
.app-page[data-band="6-8"] .question-head { color: #c7d8e7; }
.app-page[data-band="6-8"] .question-head b,
.app-page[data-band="6-8"] .exam article > .eyebrow { display: none; }
.app-page[data-band="6-8"] .exam article h1 { margin: 4px 0 8px; text-align: center; color: #fff; font-size: clamp(1.45rem, 5vw, 2.2rem); }
.app-page[data-band="6-8"] .exam article > p { min-height: 0; margin: 0 0 8px; text-align: center; color: #dce9f4; font-size: 1rem; }
.app-page[data-band="6-8"] .listen { align-self: center; width: 78px; min-height: 64px; margin: 0 auto 12px; overflow: hidden; border: 0; border-radius: 50%; color: transparent; background: #69e1dc; font-size: 0; box-shadow: 0 7px 0 #17858b; }
.app-page[data-band="6-8"] .listen::before { content: "▶ 🔊"; color: #05243b; font-size: 1rem; }
.app-page[data-band="6-8"] .response { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-page[data-band="6-8"] .choice { min-height: 66px; padding: 10px; border: 2px solid #c9dce9; border-radius: 17px; text-align: center; color: #183149; font-size: clamp(.9rem, 2.5vw, 1.15rem); font-weight: 900; box-shadow: 0 5px 0 #9cb3c4; }
.app-page[data-band="6-8"] .choice.selected { transform: translateY(3px); border-color: #ffd25a; background: #fff4bd; box-shadow: 0 2px 0 #d09c20; }
.app-page[data-band="6-8"] .response textarea { min-height: 78px; resize: none; border: 3px solid #69e1dc; text-align: center; font-size: 1.2rem; font-weight: 800; }
.app-page[data-band="6-8"] .record { min-height: 70px; border: 3px solid #ffb0b0; text-align: center; font-size: 1.05rem; font-weight: 900; }
.app-page[data-band="6-8"] .exam article footer { margin-top: 12px; padding-top: 0; color: #d9e7f2; }
@media (max-width: 620px) {
  .app-page[data-band="6-8"] .exam { padding: 6px; }
  .app-page[data-band="6-8"] .exam-grid { min-height: calc(100svh - 84px); }
  .app-page[data-band="6-8"] .exam-grid article { top: 68px; left: 8px; bottom: auto; transform: none; width: min(252px, calc(100% - 28px)); padding: 12px; border-radius: 20px; }
  .app-page[data-band="6-8"] .exam > nav { top: 14px; }
  .app-page[data-band="6-8"] .response { grid-template-columns: 1fr; }
  .app-page[data-band="6-8"] .choice { min-height: 50px; }
}