/* Reading setup */
.reading-section-list { display: grid; gap: 16px; }
.reading-section-card { padding: 17px; border: 2px solid; border-color: #fff #898989 #898989 #fff; background: #ededed; }
.reading-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.reading-section-head strong { font-size: 15px; }
.reading-range { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.reading-range input { width: 54px; height: 29px; padding: 2px 5px; border: 1px solid #888; background: #fff; font-size: 11px; text-align: center; }
.reading-upload-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.reading-upload-box { min-width: 0; }
.reading-upload-box > strong { display: block; margin-bottom: 7px; font-size: 11px; }
.reading-upload-box .upload-zone { height: 99px; }
.reading-upload-box .upload-zone small { text-align: center; }
.reading-section-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.reading-section-actions label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.reading-section-actions input[type=checkbox] { accent-color: #18538b; }
.reading-section-actions button { height: 29px; padding: 0 10px; border: 1px solid #858585; background: #f7f7f7; font-size: 11px; }
.reading-section-actions button:disabled { color: #888; }

/* Reading exam: same dark header and numbered navigation as the other sections. */
.reading-exam { --listening-answer-size: 14px; }
.reading-banner { padding-bottom: 11px; }
.reading-banner h1 { margin-bottom: 9px; }
.reading-workspace { display: flex; flex: 1; min-height: 0; margin: 10px 14px 0; border: 1px solid #d5d9e4; background: #fff; }
.reading-pane { display: flex; flex-direction: column; min-width: 260px; min-height: 0; background: #fff; }
.reading-passage-pane { width: 49%; }
.reading-question-pane { flex: 1; }
.reading-pane-head { display: flex; flex: none; align-items: center; min-height: 43px; padding: 9px 16px; border-bottom: 1px solid #d8dfe8; background: #f4f7fd; }
.reading-pane-head h2 { margin: 0; font-size: 15px; }
.reading-pane-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 15px 30px; scrollbar-color: #b5b8bf #f4f4f4; }
.reading-image-list { display: grid; gap: 16px; }
.reading-image-stage { position: relative; width: 100%; line-height: 0; }
.reading-image-stage img { display: block; width: 100%; height: auto; }
.reading-empty { padding: 30px 10px; color: #68727e; font-size: 12px; text-align: center; }
.reading-question-pane .answer-overlay { width: clamp(85px, 27%, 200px); }
.reading-passage-pane .answer-overlay { width: clamp(85px, 27%, 200px); }
.reading-footer { min-height: 104px; margin: 0 14px; }
.reading-navigation { min-height: 86px; }
.reading-navigation .listening-nav-label { min-width: 62px; }

@media (max-width: 760px) {
  .reading-section-head { align-items: flex-start; flex-direction: column; }
  .reading-upload-pair { grid-template-columns: 1fr; }
  .reading-exam { height: auto; min-height: 100vh; overflow: visible; }
  .reading-header { height: 58px; }
  .reading-workspace { display: block; margin: 5px 5px 0; }
  .reading-pane { width: 100% !important; min-width: 0; }
  .reading-passage-pane { height: 34vh; min-height: 185px; border-bottom: 4px solid #d5d9e4; }
  .reading-question-pane { height: 43vh; min-height: 250px; }
  .reading-pane-head { min-height: 36px; }
  .reading-pane-scroll { padding: 9px; }
  .reading-footer { margin: 0 5px; }
}