/* Listening setup */
.listening-audio-setup { margin-bottom: 27px; }
.audio-drop {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 85px;
  padding: 14px 19px;
  border: 2px dashed #808080;
  background: #f8f8f8;
  cursor: pointer;
}
.audio-drop:hover, .audio-drop.dragover { border-color: #184385; background: #eef3fa; }
.audio-drop-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid #777; background: #dedede; font-size: 24px; }
.audio-drop strong, .audio-drop small { display: block; }
.audio-drop strong { margin-bottom: 5px; font-size: 13px; }
.audio-drop small { color: #555; font-size: 11px; }
.audio-file-info { min-height: 18px; margin-top: 8px; font-size: 11px; }
.audio-file-info button { margin-left: 8px; border: 0; background: transparent; color: #a02132; cursor: pointer; text-decoration: underline; }
.listening-part-heading { margin-top: 16px; }
.listening-part-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.listening-part-card { min-width: 0; padding: 17px; border: 2px solid; border-color: #fff #898989 #898989 #fff; background: #ededed; }
.listening-part-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listening-part-card-head strong { font-size: 15px; }
.listening-part-card-head span { color: #555; font-size: 11px; }
.listening-part-card .upload-zone { height: 109px; margin-top: 14px; }
.listening-part-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.listening-part-actions label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.listening-part-actions input[type=checkbox] { accent-color: #18538b; }
.listening-part-actions button { height: 29px; padding: 0 10px; border: 1px solid #858585; background: #f7f7f7; font-size: 11px; }
.listening-part-actions button:disabled { color: #888; }
.listening-part-card .image-list { min-height: 19px; }

/* Listening test */
.listening-exam { display: flex; flex-direction: column; height: 100vh; min-height: 540px; overflow: hidden; background: #edf2fb; color: #111820; font-family: Arial, sans-serif; }
.listening-header { display: flex; flex: none; align-items: center; gap: 16px; min-height: 58px; padding: 7px 15px; border-bottom: 3px solid #63707b; background: linear-gradient(#13151b, #333741 53%, #111318); box-shadow: inset 0 1px #666b73; color: #f7f7f7; }
.listening-identity { display: flex; flex: none; flex-direction: column; gap: 3px; min-width: 150px; }
.listening-identity strong { font-size: 14px; }
.listening-identity span { color: #d8dde3; font-size: 11px; }
.listening-timer { flex: none; min-width: 150px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.listening-timer.urgent { color: #ffb5b5; }
.audio-player { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.audio-play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding-left: 3px; border: 1px solid #b7d3e6; border-radius: 50%; background: #f8fbff; color: #1686c8; font-size: 15px; }
.audio-play:hover { background: #dceffd; }
#audio-seek { flex: 1; min-width: 55px; accent-color: #9ed3f0; }
#audio-time { flex: none; color: #f4f4f4; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#audio-speed { height: 28px; border: 1px solid #9ba1aa; background: #252a31; color: #fff; font-size: 11px; }
.audio-mute { width: 31px; height: 30px; border: 0; background: transparent; color: #fff; font-size: 16px; }
.listening-header-actions { display: flex; flex: none; gap: 6px; }
.listening-header-actions .header-tool { min-width: 56px; }
.listening-part-banner { flex: none; margin: 6px 8px 0; padding: 5px 8px; border: 1px solid #ccd5df; border-radius: 4px; background: #f4f7fd; }
.listening-part-banner h1 { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.listening-part-banner p { margin: 0; font-size: 16px; }
.listening-question-scroll { flex: 1; min-height: 0; overflow: auto; margin: 9px 8px 0; border: 1px solid #d2dbe7; border-radius: 5px; background: #f4f7fd; }
.listening-question-content { max-width: 1280px; padding: 16px 17px 40px; }
.listening-question-content h2 { margin: 0 0 17px; font-size: 17px; }
.listening-exam-images { display: grid; gap: 18px; }
.listening-image-stage { position: relative; width: 100%; line-height: 0; }
.listening-image-stage img { display: block; width: 100%; height: auto; }
.answer-overlay { position: absolute; z-index: 2; width: clamp(88px, 20%, 210px); height: 31px; padding: 2px 7px; transform: translate(-50%, -50%); border: 2px solid #8796a7; background: #fff; color: #111; font-size: var(--listening-answer-size, 14px); line-height: normal; text-align: center; }
.answer-overlay:focus { z-index: 3; border-color: #3d76ab; outline: none; box-shadow: 0 0 0 2px #b8d5f2; }
.answer-overlay.active { border-color: #3d76ab; }
.listening-fallback { margin-top: 22px; }
.listening-fallback:empty { display: none; }
.listening-fallback h3 { margin: 0 0 10px; font-size: 13px; }
.fallback-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.fallback-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.fallback-item span { width: 18px; flex: none; font-weight: 700; }
.fallback-item input { width: 100%; min-width: 0; height: 31px; padding: 3px 7px; border: 1px solid #abb4c0; background: #fff; font-size: var(--listening-answer-size, 14px); }
.fallback-item input:focus { border-color: #3d76ab; outline: 2px solid #b8d5f2; }
.listening-footer { display: flex; flex: none; align-items: center; gap: 12px; min-height: 106px; padding: 8px 10px; border-top: 2px solid #c7d2e1; background: #edf2fb; }
.review-control { display: flex; flex: none; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.review-control input { width: 16px; height: 16px; margin: 0; accent-color: #e7a22c; }
.listening-navigation { display: grid; flex: 1; grid-template-columns: repeat(2, max-content); align-content: center; gap: 5px 19px; min-width: 0; height: 86px; overflow-x: auto; padding: 5px 8px; border: 1px solid #c4d0e0; border-radius: 4px; }
.listening-nav-group { display: flex; flex: none; align-items: center; gap: 4px; }
.listening-nav-label { min-width: 34px; margin-right: 1px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.listening-nav-question { position: relative; width: 27px; height: 29px; padding: 0; border: 1px solid #0b1018; border-radius: 3px; background: #080b10; color: #fff; font-size: 11px; font-weight: 700; }
.listening-nav-question:hover { background: #364554; }
.listening-nav-question.active { border-color: #9dcff1; background: #49a9de; }
.listening-nav-question.answered { box-shadow: inset 0 -3px #70cc91; }
.listening-nav-question.flagged::after { position: absolute; top: -4px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f1aa27; content: ''; }
.listening-footer-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.listening-next, .listening-submit { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #c4d0dc; border-radius: 50%; background: linear-gradient(#fff, #dce7ef); color: #17202b; font-size: 22px; font-weight: 700; }
.listening-next:hover, .listening-submit:hover { background: #fff; }
.listening-next:disabled { opacity: .45; }
.listening-submit { width: auto; min-width: 72px; padding: 0 12px; font-size: 12px; }

/* Answer-field placement */
.placement-dialog { display: flex; flex-direction: column; width: min(1100px, 96vw); max-height: 94vh; padding: 17px; border: 2px solid #738091; background: #f0f2f5; box-shadow: 5px 5px 0 #26313d70; }
.placement-header { display: flex; align-items: center; justify-content: space-between; }
.placement-header h2 { margin: 0; font-size: 19px; }
.placement-header button { width: 30px; height: 30px; border: 1px solid #aaa; background: #fff; font-size: 23px; }
.placement-dialog > p { margin: 11px 0 13px; font-size: 12px; line-height: 1.5; }
.placement-questions, .placement-image-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.placement-questions button, .placement-image-tabs button { min-width: 33px; height: 29px; padding: 0 8px; border: 1px solid #a6afba; background: #fff; font-size: 12px; }
.placement-questions button.active, .placement-image-tabs button.active { border-color: #3975ac; background: #d6e9f8; }
.placement-questions button.placed { box-shadow: inset 0 -3px #3975ac; }
.placement-image-scroll { overflow: auto; flex: 1; min-height: 100px; background: #fff; }
.placement-canvas { position: relative; width: min(100%, 950px); margin: 0 auto; cursor: crosshair; }
.placement-canvas img { display: block; width: 100%; height: auto; }
.placement-marker { position: absolute; z-index: 2; display: grid; place-items: center; width: clamp(35px, 13%, 150px); height: 27px; transform: translate(-50%, -50%); border: 2px solid #4b86bb; background: #ffffffdd; color: #234b70; font-size: 12px; font-weight: 700; pointer-events: none; }
.placement-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 760px) {
  .listening-part-grid { grid-template-columns: 1fr; }
  .listening-header { flex-wrap: wrap; gap: 7px; padding: 7px; }
  .listening-identity { min-width: 0; }
  .listening-identity span { display: none; }
  .listening-timer { min-width: 0; font-size: 12px; }
  .listening-header-actions { margin-left: auto; }
  .listening-header-actions .header-tool { min-width: 45px; padding: 0 5px; font-size: 10px; }
  .audio-player { order: 2; width: 100%; flex-basis: 100%; }
  .listening-part-banner { margin: 5px 5px 0; }
  .listening-question-scroll { margin: 0 8px; }
  .listening-question-content { padding: 13px 9px 28px; }
  .fallback-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listening-footer { flex-wrap: wrap; padding: 5px 7px; }
  .listening-navigation { order: 3; flex-basis: 100%; grid-template-columns: repeat(2, max-content); overflow: auto; }
  .listening-footer-actions { margin-left: auto; }
}