/* The short web round follows the app's current-session exam surfaces. */
.demo-app.exam-app { --exam-band: #1b5a45; --exam-danger: #a74837; --exam-line: #dcdfd8; padding: 0; background: #f4f2ed; }
.exam-app .exam-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.exam-app .exam-dock { flex: none; padding: 12px 13px 16px; background: var(--app-paper); }
.exam-app .exam-dock .mini-primary { margin: 0; }
.exam-app .exam-intro-band { background: var(--exam-band); color: #faf7ed; padding: 18px 16px 22px; text-align: center; }
.exam-app .exam-eyebrow { font-size: 11px; line-height: 1.6; opacity: .85; }
.exam-app .exam-intro-band img { width: 150px; height: 156px; object-fit: cover; object-position: center 38%; margin: 18px auto 17px; border: 4px solid #fffdf5; border-radius: 16px; transform: rotate(-3deg); box-shadow: 0 4px 0 #103f32; }
.exam-app h3 { font-size: 29px; line-height: 1.2; font-weight: 800; margin: 0; }
.exam-app .exam-intro-band p { margin-top: 8px; color: #e1ece0; font-size: 13px; }
.exam-app .exam-intro-body { padding: 20px 15px 0; }
.exam-app .exam-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.exam-app .exam-stat-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-inline: 12px; }
.exam-app .exam-stat-grid > div:first-child { padding-left: 0; }
.exam-app .exam-stat-grid > div + div { border-left: 1px solid var(--exam-line); }
.exam-app .exam-stat-grid strong { font-size: 30px; font-weight: 750; line-height: 1.2; letter-spacing: -1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exam-app .exam-stat-grid strong small { font-size: 14px; letter-spacing: 0; }
.exam-app .exam-stat-grid span { font-size: 10px; line-height: 1.5; }
.exam-app .exam-intro-body > p { margin-top: 20px; font-size: 12px; color: #68726d; line-height: 1.8; }
.exam-app .exam-rules { font-size: 10px; color: #68726d; line-height: 1.8; padding-top: 13px; margin-top: 15px; border-top: 1px solid var(--exam-line); }
.exam-app .exam-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 13px 10px; min-height: 60px; }
.exam-app .exam-head > span:last-child { font-size: 10px; color: #68726d; }
.exam-app .exam-session-label { font-size: 10px; color: #68726d; }
.exam-app .exam-clock { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.exam-app .mini-submit { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.exam-app .exam-progress-rail { flex: none; display: flex; gap: 5px; padding: 0 13px; }
.exam-app .exam-progress-rail i { flex: 1; height: 4px; border-radius: 3px; background: #e2ded4; }
.exam-app .exam-progress-rail .is-answered { background: #96968b; }
.exam-app .exam-progress-rail .is-current { background: #252d2e; }
.exam-app .exam-status { flex: none; display: flex; align-items: center; gap: 7px; padding: 12px 13px; }
.exam-app .exam-status strong { font-size: 12px; }
.exam-app .exam-status > span { color: #68726d; font-size: 10px; }
.exam-app .exam-overview-toggle { margin-left: auto; min-height: 36px; border: 1px solid var(--exam-line); background: #fffdfa; padding: 7px 10px; border-radius: 20px; color: var(--app-ink); font-size: 11px; font-weight: 700; }
.exam-app .exam-overview { margin: 0; padding: 0 13px 12px; }
.exam-app .exam-overview button { width: 44px; height: 44px; }
.exam-app .exam-overview > span { font-size: 10px; }
.exam-app .exam-question-scroll { margin: 0 13px; border: 1px solid var(--exam-line); background: white; border-radius: 17px; box-shadow: 0 3px 10px #252d2e0d; }
.exam-app .exam-question-card { padding: 15px 13px; }
.exam-app .exam-question-card .mini-meta { font-size: 11px; margin-bottom: 9px; }
.exam-app .mini-stem { font-size: 17px; line-height: 1.6; margin-top: 13px; }
.exam-app .mini-sign { display: block; max-width: 145px; max-height: 145px; margin: 22px auto 10px; }
.exam-app .exam-navigation { margin: 0; padding: 0 36px; }
.exam-app .exam-navigation .mini-text { color: #68726d; font-size: 13px; }
.exam-app .mini-demo-note { margin-top: 0; }
.exam-app .mini-choices { margin-top: 7px; }
.exam-app .mini-choice { min-height: 49px; }
.exam-app .exam-result-band { padding: 6px 15px 19px; color: #fff9eb; }
.exam-app .exam-result-band.is-passed { background: var(--exam-band); }
.exam-app .exam-result-band.is-failed { background: var(--exam-danger); }
.exam-app .exam-band-close { display: block; min-height: 40px; background: none; border: 0; padding: 0; color: inherit; font-size: 12px; font-weight: 750; }
.exam-app .exam-result-band .exam-eyebrow { margin: 14px 0 5px; }
.exam-app .exam-result-band .exam-stat-grid { margin-top: 20px; }
.exam-app .exam-result-band .exam-stat-grid > div + div { border-color: #fff9eb55; }
.exam-app .exam-result-band .exam-stat-grid strong { font-size: 29px; }
.exam-app .exam-target { font-size: 10px; margin-top: 15px; opacity: .85; }
.exam-app .exam-result-body { padding: 17px 15px 8px; }
.exam-app h4 { font-size: 11px; color: #68726d; font-weight: 550; margin: 0 0 8px; }
.exam-app .exam-finding { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; }
.exam-app .exam-finding > span { width: 19px; height: 19px; flex: none; border-radius: 50%; text-align: center; line-height: 19px; background: #e8e4d9; color: #68726d; font-size: 10px; }
.exam-app .exam-finding strong { display: block; font-size: 12px; line-height: 1.6; }
.exam-app .exam-finding p { font-size: 11px; color: #68726d; line-height: 1.7; margin-top: 2px; }
.exam-app .exam-feedback { margin-top: 20px; }
.exam-app .exam-result-strip { display: flex; gap: 7px; margin-bottom: 9px; }
.exam-app .exam-result-strip button { min-width: 44px; height: 38px; border: 0; border-radius: 6px; font-size: 12px; font-weight: 750; }
.exam-app .exam-result-strip .is-correct { background: #dce9df; color: #1b5a45; }
.exam-app .exam-result-strip .is-incorrect { background: #eeded5; color: #a74837; }
.exam-app .exam-filter-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 10px; background: #e8e4d9; padding: 3px; }
.exam-app .exam-filter-tabs button { min-height: 36px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #68726d; font-size: 12px; font-weight: 700; }
.exam-app .exam-filter-tabs button[aria-pressed="true"] { background: #fffefa; color: var(--app-ink); border-color: var(--exam-line); }
.exam-app .exam-result-row { display: flex; align-items: flex-start; gap: 10px; border-left: 3px solid; padding: 0 0 0 10px; margin: 18px 0; }
.exam-app .exam-result-row.is-correct { border-color: #237a52; }
.exam-app .exam-result-row.is-incorrect { border-color: #a74837; }
.exam-app .exam-result-row img { width: 38px; height: 45px; object-fit: contain; flex: none; margin-top: 3px; }
.exam-app .exam-result-row > div { min-width: 0; }
.exam-app .exam-result-row p { font-size: 14px; font-weight: 650; line-height: 1.65; }
.exam-app .exam-result-row button { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 7px 0 0; text-align: left; border: 0; background: none; color: #68726d; font-size: 10px; line-height: 1.8; }
.exam-app .exam-result-row button span { flex: 1; }
.exam-app .exam-result-row button b { white-space: nowrap; font-weight: 550; }
.exam-app .exam-empty { padding: 23px 0; font-size: 12px; color: #68726d; }
.exam-app .exam-result-dock { display: flex; gap: 9px; border-top: 1px solid #e5e2d8; }
.exam-app .exam-result-dock > button { flex: 1; min-width: 0; }
.exam-app .exam-secondary { min-height: 47px; border: 1.5px solid var(--app-ink); border-bottom-width: 4px; border-radius: 13px; color: var(--app-ink); font-size: 13px; font-weight: 750; background: #fffefa; }
.exam-app .exam-detail { margin: 0 13px; border: 1px solid var(--exam-line); border-radius: 17px; background: white; }
.exam-app .exam-explanation h4 { margin-top: 18px; font-weight: 700; }
.exam-app .exam-explanation p { font-size: 12px; line-height: 1.85; }
.exam-app .exam-review-position { color: #68726d; font-size: 10px; text-align: center; margin-bottom: 8px; }
.exam-app .exam-confirm { bottom: 135px; }
.exam-app .exam-result-band button:focus-visible { outline-color: #fff9eb; }
@media (max-width: 600px) {
  .demo-app.exam-app { padding: 0; }
  .exam-app .exam-intro-band img { width: 135px; height: 141px; }
  .exam-app .exam-intro-band { padding-block: 14px 18px; }
  .exam-app .exam-dock { padding-bottom: 12px; }
}