/* EnglishGate Listening Design v2
   Presentation-only student Listening upgrade.
   Preserves audio playback, transcript-hiding rules, question visibility repair,
   grading, answer state, persistence, completion, and Reading/Listening separation. */

:root{
  --eg-li-primary:#2563EB;
  --eg-li-primary-dark:#1D4ED8;
  --eg-li-text:#0F172A;
  --eg-li-muted:#64748B;
  --eg-li-bg:#F8FAFC;
  --eg-li-card:#FFFFFF;
  --eg-li-border:#E2E8F0;
  --eg-li-success:#16A34A;
  --eg-li-error:#DC2626;
  --eg-li-shadow:0 6px 22px rgba(15,23,42,.05);
}

/* Independent Listening activity */
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"]{color:var(--eg-li-text)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-hero{padding:22px 24px!important;border:1px solid var(--eg-li-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--eg-li-shadow)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .eg-skill-kicker{display:inline-flex!important;align-items:center!important;min-height:26px!important;padding:4px 9px!important;border-radius:999px!important;background:#EFF6FF!important;color:var(--eg-li-primary-dark)!important;font-size:.72rem!important;font-weight:900!important;letter-spacing:.07em!important;text-transform:uppercase!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-hero h1{margin:9px 0 7px!important;color:var(--eg-li-text)!important;font-size:clamp(1.55rem,3vw,2.15rem)!important;line-height:1.18!important;letter-spacing:-.035em!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-hero p{max-width:66ch!important;color:var(--eg-li-muted)!important;line-height:1.6!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-status{color:var(--eg-li-muted)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-status strong{color:var(--eg-li-text)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-layout{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)!important;gap:18px!important;margin-top:18px!important}

/* Audio source card */
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-audio-source{position:sticky!important;top:104px!important;align-self:start!important;padding:20px!important;gap:16px!important;border:1px solid var(--eg-li-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--eg-li-shadow)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-audio-source h2{margin:8px 0 6px!important;color:var(--eg-li-text)!important;font-size:1.18rem!important;line-height:1.3!important;letter-spacing:-.02em!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-audio-source p{color:var(--eg-li-muted)!important;font-size:.9rem!important;line-height:1.55!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .eg-audio-console,
body.englishgate-student-mode .eg-listening-page .eg-audio-console,
body.englishgate-student-mode .eg-listening-section .eg-audio-console{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;align-items:center!important;gap:10px!important;padding:12px!important;border:1px solid #D8E2EA!important;border-radius:14px!important;background:#F8FAFC!important;box-shadow:none!important}
body.englishgate-student-mode .eg-audio-console .play-btn{display:grid!important;place-items:center!important;width:50px!important;min-width:50px!important;height:50px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--eg-li-primary)!important;color:#fff!important;box-shadow:0 6px 16px rgba(37,99,235,.18)!important}
body.englishgate-student-mode .eg-audio-console .play-btn:hover{background:var(--eg-li-primary-dark)!important}
body.englishgate-student-mode .eg-audio-console .play-btn:focus-visible,
body.englishgate-student-mode .eg-audio-console .audio-icon-btn:focus-visible,
body.englishgate-student-mode .eg-audio-console .audio-speed:focus-visible,
body.englishgate-student-mode .eg-audio-console #audioSeek:focus-visible{outline:3px solid rgba(37,99,235,.25)!important;outline-offset:2px!important}
body.englishgate-student-mode .eg-audio-console .audio-icon-btn{min-width:44px!important;width:44px!important;height:44px!important;padding:0!important;border:1px solid #CBD5E1!important;border-radius:11px!important;background:#fff!important;color:#334155!important;font-weight:900!important}
body.englishgate-student-mode .eg-audio-console .audio-icon-btn:hover{border-color:#93C5FD!important;background:#EFF6FF!important;color:var(--eg-li-primary-dark)!important}
body.englishgate-student-mode .eg-audio-console .audio-speed{width:auto!important;min-width:74px!important;min-height:44px!important;padding:8px 10px!important;border:1px solid #CBD5E1!important;border-radius:11px!important;background:#fff!important;color:#334155!important;font-weight:800!important}
body.englishgate-student-mode .eg-audio-console .audio-timeline{min-width:0!important}
body.englishgate-student-mode .eg-audio-console #audioSeek{width:100%!important;min-height:30px!important;margin:0!important;padding:0!important;accent-color:var(--eg-li-primary)!important;cursor:pointer!important}
body.englishgate-student-mode .eg-audio-console .audio-time{display:flex!important;justify-content:space-between!important;gap:12px!important;margin-top:2px!important;color:var(--eg-li-muted)!important;font-size:.72rem!important;font-variant-numeric:tabular-nums!important}
body.englishgate-student-mode .eg-audio-console #audioStatus{grid-column:1/-1!important;margin-top:1px!important;color:var(--eg-li-muted)!important;font-size:.78rem!important;line-height:1.45!important}

/* Listening question panel */
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-panel{padding:20px!important;border:1px solid var(--eg-li-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--eg-li-shadow)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-track{height:6px!important;margin-bottom:18px!important;background:#E2E8F0!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-track>span{background:var(--eg-li-primary)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-meta span{padding:5px 9px!important;border-radius:999px!important;background:#EFF6FF!important;color:var(--eg-li-primary-dark)!important;font-size:.72rem!important;font-weight:900!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question h3{margin:14px 0 18px!important;color:var(--eg-li-text)!important;font-size:clamp(1.08rem,2vw,1.24rem)!important;line-height:1.5!important;letter-spacing:-.012em!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice-list{gap:9px!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice{min-height:54px!important;padding:12px 13px!important;border:1px solid #D7E0E8!important;border-radius:12px!important;background:#fff!important;color:#1E293B!important;font-weight:700!important;line-height:1.45!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice:hover{border-color:#93C5FD!important;background:#F8FBFF!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice:has(input:checked){border-color:#60A5FA!important;background:#EFF6FF!important;box-shadow:0 0 0 3px rgba(37,99,235,.07)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice-index{width:30px!important;height:30px!important;border-radius:8px!important;background:#F1F5F9!important;color:#475569!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-choice:has(input:checked) .sep-choice-index{background:var(--eg-li-primary)!important;color:#fff!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-feedback .feedback,
body.englishgate-student-mode .eg-listening-page .feedback,
body.englishgate-student-mode .eg-listening-section .feedback{margin-top:14px!important;padding:12px 13px!important;border-radius:12px!important;line-height:1.5!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .feedback.good,
body.englishgate-student-mode .eg-listening-page .feedback.good,
body.englishgate-student-mode .eg-listening-section .feedback.good{border:1px solid #BBF7D0!important;background:#F0FDF4!important;color:#166534!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .feedback.bad,
body.englishgate-student-mode .eg-listening-page .feedback.bad,
body.englishgate-student-mode .eg-listening-section .feedback.bad{border:1px solid #FECACA!important;background:#FEF2F2!important;color:#991B1B!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .performance-result{margin-top:16px!important;padding:16px!important;border:1px solid var(--eg-li-border)!important;border-radius:14px!important;background:#fff!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .performance-score strong{color:var(--eg-li-text)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .performance-score span,
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .performance-result p{color:var(--eg-li-muted)!important}

/* Back / Next navigation */
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav{gap:10px!important;margin-top:20px!important;padding-top:16px!important;border-top:1px solid var(--eg-li-border)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav button{min-height:50px!important;padding:11px 16px!important;border-radius:12px!important;font-weight:800!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav .ghost-btn{border:1px solid #CBD5E1!important;background:#fff!important;color:#334155!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav .primary-btn{background:var(--eg-li-primary)!important;color:#fff!important;box-shadow:0 6px 16px rgba(37,99,235,.14)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav .primary-btn:hover{background:var(--eg-li-primary-dark)!important}
body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav button:disabled{opacity:.45!important;box-shadow:none!important}

/* Legacy/general Listening skill surfaces */
body.englishgate-student-mode .eg-listening-page .eg-skill-hero,
body.englishgate-student-mode .eg-listening-section .eg-skill-hero,
body.englishgate-student-mode .eg-listening-section .eg-audio-card{border-color:var(--eg-li-border)!important;background:#fff!important;box-shadow:var(--eg-li-shadow)!important}
body.englishgate-student-mode .eg-listening-page .mcq-option-card,
body.englishgate-student-mode .eg-listening-section .mcq-option-card{min-height:50px!important;padding:11px 13px!important;border-color:#D7E0E8!important;border-radius:12px!important;background:#fff!important}
body.englishgate-student-mode .eg-listening-page .mcq-option-card.selected,
body.englishgate-student-mode .eg-listening-section .mcq-option-card.selected{border-color:#60A5FA!important;background:#EFF6FF!important;box-shadow:0 0 0 3px rgba(37,99,235,.07)!important}

/* Responsive Listening */
@media(max-width:980px){
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-layout{grid-template-columns:1fr!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-audio-source{position:static!important}
}
@media(max-width:640px){
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-hero{padding:16px!important;border-radius:15px!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-status{display:flex!important;justify-content:space-between!important;text-align:left!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-layout{gap:12px!important;margin-top:12px!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-audio-source,
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-question-panel{padding:15px!important;border-radius:15px!important}
  body.englishgate-student-mode .eg-audio-console{grid-template-columns:auto minmax(0,1fr) auto!important}
  body.englishgate-student-mode .eg-audio-console .audio-speed{grid-column:2/4!important;width:100%!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav{position:sticky!important;bottom:0!important;z-index:4!important;margin:18px -15px -15px!important;padding:10px 15px calc(10px + env(safe-area-inset-bottom))!important;border-top:1px solid rgba(226,232,240,.96)!important;background:rgba(255,255,255,.985)!important;box-shadow:0 -8px 24px rgba(15,23,42,.06)!important}
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] .sep-nav button{flex:1!important;min-width:0!important}
}
@media(max-width:390px){
  body.englishgate-student-mode .eg-audio-console{grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
  body.englishgate-student-mode .eg-audio-console .audio-icon-btn{grid-column:1!important;grid-row:2!important}
  body.englishgate-student-mode .eg-audio-console .audio-speed{grid-column:2!important;grid-row:2!important}
  body.englishgate-student-mode .eg-audio-console #audioStatus{grid-column:1/-1!important}
}
@media(prefers-reduced-motion:reduce){
  body.englishgate-student-mode .eg-separated-activity[data-activity-type="listening"] *,
  body.englishgate-student-mode .eg-listening-page *,
  body.englishgate-student-mode .eg-listening-section *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}