.app-page[data-band="13-17"] { background: radial-gradient(circle at 72% 18%,#39245d55,transparent 35%),#061528; }
.app-page[data-band="13-17"] .age-badge { color: #d9c7ff; border-color: #6e55a0; background: #211b3c; }
.app-page[data-band="13-17"] .dashboard { width: min(1200px,calc(100% - 40px)); }
.app-page[data-band="13-17"] .dashboard .eyebrow { color: #a992f1; }
.app-page[data-band="13-17"] .dashboard .primary { color: #fff; background: linear-gradient(135deg,#7456c7,#2a9fb0); }
.app-page[data-band="13-17"] .hero { border-color: #6e55a0; border-radius: 20px; }
.app-page[data-band="13-17"] .hero img { object-position: 18% 82%; transform: scale(1.12); transform-origin: center bottom; }
.app-page[data-band="13-17"] .exam { width: min(1220px,calc(100% - 32px)); padding: 24px 0; }
.app-page[data-band="13-17"] .exam > nav { grid-template-columns: repeat(4,1fr); border: 1px solid #3c4167; border-radius: 10px; background: #0b1830; }
.app-page[data-band="13-17"] .exam > nav span { border-radius: 6px; color: #8999b2; font-size: .86rem; letter-spacing: .03em; }
.app-page[data-band="13-17"] .exam > nav .active { color: #fff; background: linear-gradient(135deg,#7456c7,#416db3); }
.app-page[data-band="13-17"] .exam > nav .done { color: #d4fbfa; background: #174755; }
.app-page[data-band="13-17"] .exam-grid { grid-template-columns: .82fr 1.18fr; gap: 16px; }
.app-page[data-band="13-17"] .exam-grid aside { min-height: 580px; border: 1px solid #4a4e78; border-radius: 16px; background: #0b152b url("assets/space.webp") left bottom/260% auto no-repeat; box-shadow: 0 24px 70px #0008; }
.app-page[data-band="13-17"] .exam-grid aside picture { display: block; width: 100%; height: 100%; }
.app-page[data-band="13-17"] .exam-grid aside img { opacity: 0; }
.app-page[data-band="13-17"] .exam-grid article { min-height: 580px; padding: clamp(28px,4vw,48px); border: 1px solid #d9e0e8; border-radius: 16px; background: #f7f9fc; box-shadow: 0 24px 70px #0007; }
.app-page[data-band="13-17"] .question-head b { color: #563a99; background: #ece6fb; }
.app-page[data-band="13-17"] .exam article > .eyebrow { color: #6546aa; }
.app-page[data-band="13-17"] .exam article h1 { color: #15243a; letter-spacing: -.02em; }
.app-page[data-band="13-17"] .exam article > p { max-width: 760px; color: #4f6177; font-size: 1.04rem; }
.app-page[data-band="13-17"] .listen { color: #fff; border: 0; border-radius: 8px; background: #6546aa; }
.app-page[data-band="13-17"] .choice,
.app-page[data-band="13-17"] .record { min-height: 60px; border: 1px solid #c9d2df; border-radius: 9px; color: #293c53; background: #fff; font-weight: 750; transition: border-color .15s,background .15s,transform .15s; }
.app-page[data-band="13-17"] .choice:hover { transform: translateY(-1px); border-color: #7456c7; background: #f3efff; }
.app-page[data-band="13-17"] .choice.selected { border-color: #6546aa; color: #382469; background: #ece6fb; }
.app-page[data-band="13-17"] .response textarea { min-height: 210px; color: #24364c; border-color: #c9d2df; border-radius: 9px; background: #fff; font-weight: 500; }
.app-page[data-band="13-17"] .exam article footer { color: #687b91; }
.app-page[data-band="13-17"] .exam article footer .primary { color: #fff; border-radius: 8px; background: #6546aa; }

@media (max-width: 780px) {
  .app-page[data-band="13-17"] .dashboard { width: min(100% - 24px,650px); }
  .app-page[data-band="13-17"] .exam { width: min(100% - 20px,720px); padding: 12px 0 20px; }
  .app-page[data-band="13-17"] .exam > nav { margin-bottom: 10px; }
  .app-page[data-band="13-17"] .exam > nav span { min-width: 96px; }
  .app-page[data-band="13-17"] .exam-grid { grid-template-columns: 1fr; gap: 10px; }
  .app-page[data-band="13-17"] .exam-grid aside { min-height: 0; height: auto; max-height: none; aspect-ratio: 16/6; border-radius: 12px; background-size: 145% auto; background-position: left 88%; }
  .app-page[data-band="13-17"] .exam-grid article { min-height: 0; padding: 23px 18px; border-radius: 12px; }
  .app-page[data-band="13-17"] .exam article > .eyebrow { margin-top: 14px; }
  .app-page[data-band="13-17"] .exam article h1 { font-size: 1.65rem; }
  .app-page[data-band="13-17"] .response textarea { min-height: 145px; }
  .app-page[data-band="13-17"] .exam article footer { margin-top: 20px; padding-top: 0; }
}

@media (max-width: 430px) {
  .app-page[data-band="13-17"] .exam-grid aside { aspect-ratio: 16/7; }
  .app-page[data-band="13-17"] .exam > nav span { min-width: 86px; font-size: .76rem; }
}