.app-page[data-band="18+"] { color: #eff7fa; background: radial-gradient(circle at 78% 12%,#165d6655,transparent 32%),#071522; }
.app-page[data-band="18+"] .age-badge { color: #bdece7; border-color: #386b70; background: #102c35; }
.app-page[data-band="18+"] .dashboard { width: min(1180px,calc(100% - 40px)); }
.app-page[data-band="18+"] .dashboard .eyebrow { color: #71d5cb; }
.app-page[data-band="18+"] .dashboard .primary { color: #06252a; background: #77ddd3; }
.app-page[data-band="18+"] .skills span { border-color: #294e58; background: #0d2935; }
.app-page[data-band="18+"] .hero { border-color: #3e7479; border-radius: 16px; box-shadow: 0 28px 80px #0008; }
.app-page[data-band="18+"] .hero img { object-position: center; }
.app-page[data-band="18+"] .exam { width: min(1200px,calc(100% - 32px)); padding: 24px 0; }
.app-page[data-band="18+"] .exam > nav { border: 1px solid #31505d; border-radius: 8px; background: #0a1d2b; }
.app-page[data-band="18+"] .exam > nav span { border-radius: 5px; color: #879eaa; font-size: .84rem; }
.app-page[data-band="18+"] .exam > nav .active { color: #07272b; background: #77ddd3; }
.app-page[data-band="18+"] .exam > nav .done { color: #d6f5f1; background: #20535a; }
.app-page[data-band="18+"] .exam-grid { grid-template-columns: .58fr 1.42fr; gap: 16px; }
.app-page[data-band="18+"] .exam-grid aside { min-height: 580px; border: 1px solid #456977; border-radius: 12px; background: #102532; box-shadow: 0 22px 60px #0007; }
.app-page[data-band="18+"] .exam-grid aside picture { display: block; width: 100%; height: 100%; }
.app-page[data-band="18+"] .exam-grid aside img { object-position: 46% center; }
.app-page[data-band="18+"] .exam-grid article { min-height: 580px; padding: clamp(30px,4vw,50px); border: 1px solid #d6e0e5; border-radius: 12px; background: #f7f9fa; box-shadow: 0 22px 60px #0007; }
.app-page[data-band="18+"] .question-head { color: #6b7d87; }
.app-page[data-band="18+"] .question-head b { color: #176067; background: #dff1ef; }
.app-page[data-band="18+"] .exam article > .eyebrow { color: #267b80; }
.app-page[data-band="18+"] .exam article h1 { color: #172c38; font-size: clamp(1.75rem,3vw,2.35rem); letter-spacing: -.025em; }
.app-page[data-band="18+"] .exam article > p { max-width: 760px; color: #4c626d; font-size: 1.04rem; line-height: 1.7; }
.app-page[data-band="18+"] .listen { color: #fff; border: 0; border-radius: 7px; background: #267b80; }
.app-page[data-band="18+"] .choice,
.app-page[data-band="18+"] .record { min-height: 60px; border: 1px solid #cbd7dc; border-radius: 7px; color: #2c414c; background: #fff; font-weight: 700; }
.app-page[data-band="18+"] .choice:hover { border-color: #267b80; background: #eef8f7; }
.app-page[data-band="18+"] .choice.selected { border-color: #267b80; color: #154e52; background: #dff1ef; }
.app-page[data-band="18+"] .response:has(.record) { display: flex; justify-content: flex-start; }
.app-page[data-band="18+"] .response .record { width: min(280px,100%); min-height: 58px; padding: 12px 22px; border: 1px solid #4c979b; text-align: center; color: #15565b; background: #e7f6f4; font-size: 1rem; box-shadow: 0 4px 0 #b7d8d5; cursor: pointer; }
.app-page[data-band="18+"] .response .record:hover { border-color: #267b80; background: #d9f0ed; }
.app-page[data-band="18+"] .response .record.recording { color: #fff; border-color: #a33b3b; background: #b84545; box-shadow: 0 3px 0 #792d2d; }
.app-page[data-band="18+"] .response textarea { min-height: 230px; color: #243b46; border-color: #cbd7dc; border-radius: 7px; background: #fff; font-weight: 500; line-height: 1.65; }
.app-page[data-band="18+"] .exam article footer { color: #687b84; }
.app-page[data-band="18+"] .exam article footer .primary { color: #fff; border-radius: 7px; background: #267b80; }

@media (max-width: 780px) {
  .app-page[data-band="18+"] .dashboard { width: min(100% - 24px,660px); }
  .app-page[data-band="18+"] .exam { width: min(100% - 20px,740px); padding: 12px 0 22px; }
  .app-page[data-band="18+"] .exam > nav { margin-bottom: 10px; }
  .app-page[data-band="18+"] .exam > nav span { min-width: 96px; }
  .app-page[data-band="18+"] .exam-grid { grid-template-columns: 1fr; gap: 10px; }
  .app-page[data-band="18+"] .exam-grid aside { min-height: 0; height: auto; max-height: none; aspect-ratio: 16/5; border-radius: 9px; }
  .app-page[data-band="18+"] .exam-grid aside img { object-position: center 58%; }
  .app-page[data-band="18+"] .exam-grid article { min-height: 0; padding: 24px 18px; border-radius: 9px; }
  .app-page[data-band="18+"] .exam article > .eyebrow { margin-top: 14px; }
  .app-page[data-band="18+"] .exam article h1 { font-size: 1.65rem; }
  .app-page[data-band="18+"] .response textarea { min-height: 170px; }
  .app-page[data-band="18+"] .response:has(.record) { justify-content: center; }
  .app-page[data-band="18+"] .exam article footer { margin-top: 20px; padding-top: 0; }
}

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