body[data-page="listening"] .listening-library { background: #f7f6f2; border-radius: 22px; }
body[data-page="listening"] .listening-intro { display:grid; grid-template-columns: 1fr .75fr; gap: clamp(24px, 7vw, 110px); align-items:end; margin-bottom: 28px; }
body[data-page="listening"] .listening-intro h2 { margin: 12px 0 0; color:#123b52; font:700 clamp(2.4rem, 5vw, 5rem)/1.02 var(--sans); letter-spacing:-.08em; }
body[data-page="listening"] .listening-intro h2 span { color:#1cb8de; }
body[data-page="listening"] .listening-intro > p { color:#53666d; line-height:1.9; }
body[data-page="listening"] .listening-status { margin: 26px 0 14px; color:#587080; font-size:.85rem; letter-spacing:.06em; }
body[data-page="listening"] .listening-groups { display:grid; gap:12px; }
body[data-page="listening"] .listening-group { overflow:hidden; border:1px solid #dce5e7; border-radius:15px; background:#fff; }
body[data-page="listening"] .listening-group summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 22px; cursor:pointer; color:#123b52; font-weight:800; list-style:none; }
body[data-page="listening"] .listening-group summary::-webkit-details-marker { display:none; }
body[data-page="listening"] .listening-group summary::after { content:'＋'; color:#1cb8de; font-size:1.3rem; }
body[data-page="listening"] .listening-group[open] summary::after { content:'−'; }
body[data-page="listening"] .listening-group summary b { margin-left:auto; color:#78909a; font-size:.78rem; font-weight:600; }
body[data-page="listening"] .listening-group > div { border-top:1px solid #edf1f2; }
body[data-page="listening"] .listening-track { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:15px 22px; border-bottom:1px solid #edf1f2; }
body[data-page="listening"] .listening-track:last-child { border-bottom:0; }
body[data-page="listening"] .listening-track strong { display:block; color:#123b52; font-size:.95rem; }
body[data-page="listening"] .listening-track small { display:block; margin-top:3px; color:#8a9ba1; font-size:.72rem; }
body[data-page="listening"] .listening-track audio { width:min(42%, 360px); height:34px; }
@media (max-width:820px) { body[data-page="listening"] .listening-intro { grid-template-columns:1fr; } body[data-page="listening"] .listening-track { display:grid; gap:10px; } body[data-page="listening"] .listening-track audio { width:100%; } }
/* Listening library: grade-first navigation and clear, scannable groups. */
body[data-page="listening"] .listening-grades {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  margin:26px 0 34px;
  position:sticky;
  top:12px;
  z-index:3;
  padding:10px;
  border:1px solid #dce5e7;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(10,44,61,.08);
  backdrop-filter:blur(10px);
}
body[data-page="listening"] .listening-grade-button {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  min-height:62px;
  padding:12px 18px;
  border:1px solid #b9dfe5;
  border-radius:12px;
  background:#eefbfd;
  color:#123b52;
  text-decoration:none;
  font-weight:800;
  text-align:center;
  box-shadow:0 4px 12px rgba(18,59,82,.08);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body[data-page="listening"] .listening-grade-button:hover,
body[data-page="listening"] .listening-grade-button:focus-visible {
  background:#12b4d6;
  border-color:#12b4d6;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(18,59,82,.16);
}
body[data-page="listening"] .listening-grade-name {
  position:relative;
  z-index:1;
  font-size:clamp(1.05rem,2vw,1.3rem);
  line-height:1;
  letter-spacing:-.03em;
}
body[data-page="listening"] .listening-grade {
  scroll-margin-top:100px;
  margin-top:28px;
  overflow:hidden;
  border:1px solid #dce5e7;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 35px rgba(10,44,61,.06);
}
body[data-page="listening"] .listening-grade-heading {
  display:flex;
  align-items:end;
  gap:18px;
  padding:clamp(20px,3vw,34px);
  background:linear-gradient(135deg,#123b52,#176985);
  color:#fff;
}
body[data-page="listening"] .listening-grade-heading .kicker { margin:0; color:#9eefff; }
body[data-page="listening"] .listening-grade-heading h3 {
  margin:0;
  font:700 clamp(1.8rem,4vw,3.2rem)/1 var(--sans);
  letter-spacing:-.06em;
}
body[data-page="listening"] .listening-grade-heading > span {
  margin-left:auto;
  color:#d8f5fb;
  font-size:.8rem;
}
body[data-page="listening"] .listening-grade-tracks { display:grid; }
body[data-page="listening"] .listening-test-groups {
  display:grid;
  gap:18px;
  padding:18px;
  background:#f4f8f9;
}
body[data-page="listening"] .listening-test-group {
  overflow:hidden;
  border:1px solid #dce5e7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(10,44,61,.05);
}
body[data-page="listening"] .listening-test-group > summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  background:linear-gradient(100deg,#eefbfd,#fff);
  cursor:pointer;
  transition:background .2s ease;
}
body[data-page="listening"] .listening-test-group > summary::-webkit-details-marker { display:none; }
body[data-page="listening"] .listening-test-group > summary:hover,
body[data-page="listening"] .listening-test-group > summary:focus-visible { background:linear-gradient(100deg,#dff9fc,#fff); }
body[data-page="listening"] .listening-test-group[open] > summary { border-bottom:1px solid #dce5e7; }
body[data-page="listening"] .listening-test-toggle {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-left:4px;
  border-radius:50%;
  background:#123b52;
  color:#9ceaf2;
  font-size:1.25rem;
  line-height:1;
  transition:transform .2s ease,background .2s ease;
}
body[data-page="listening"] .listening-test-group[open] .listening-test-toggle {
  background:#12b4d6;
  transform:rotate(45deg);
}
body[data-page="listening"] .listening-test-number {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:50%;
  background:#123b52;
  color:#9ceaf2;
  font:700 1.05rem/1 var(--sans);
}
body[data-page="listening"] .listening-test-group .kicker { display:block; margin:0 0 3px; color:#0b7f9a; }
body[data-page="listening"] .listening-test-group h4 {
  margin:0;
  color:#123b52;
  font:700 clamp(1.15rem,2vw,1.5rem)/1.15 var(--sans);
}
body[data-page="listening"] .listening-test-count {
  margin-left:auto;
  color:#637983;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}
body[data-page="listening"] .listening-test-tracks {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-page="listening"] .listening-test-tracks .listening-track {
  border-bottom:1px solid #edf1f2;
}
body[data-page="listening"] .listening-test-tracks .listening-track:nth-child(odd) {
  border-right:1px solid #edf1f2;
}
body[data-page="listening"] .listening-player { min-width:0; margin-top:14px; }
body[data-page="listening"] .listening-player { position:relative; }
body[data-page="listening"] .listening-player-loading {
  position:absolute;
  z-index:2;
  inset:-8px;
  display:none;
  place-items:center;
  align-content:center;
  gap:3px;
  border-radius:12px;
  background:rgba(18,59,82,.94);
  color:#fff;
  text-align:center;
  box-shadow:0 8px 22px rgba(10,44,61,.2);
}
body[data-page="listening"] .listening-player.is-loading .listening-player-loading { display:grid; }
body[data-page="listening"] .listening-player-loading strong { font-size:.9rem; letter-spacing:.05em; }
body[data-page="listening"] .listening-player-loading span { color:#bceff5; font-size:.7rem; }
body[data-page="listening"] .listening-player-controls button:disabled { cursor:wait; opacity:.5; }
body[data-page="listening"] .listening-player-controls {
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-page="listening"] .listening-player-button,
body[data-page="listening"] .listening-player-skip,
body[data-page="listening"] .listening-player-download {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:0;
  border-radius:8px;
  background:#123b52;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
body[data-page="listening"] .listening-player-button { width:38px; height:38px; font-size:.8rem; }
body[data-page="listening"] .listening-player-skip { width:42px; height:32px; font-size:.7rem; font-weight:800; }
body[data-page="listening"] .listening-player-download { width:32px; height:32px; font-size:1.1rem; }
body[data-page="listening"] .listening-player-button:hover,
body[data-page="listening"] .listening-player-skip:hover,
body[data-page="listening"] .listening-player-download:hover { background:#0b7f9a; transform:translateY(-1px); }
body[data-page="listening"] .listening-waveform {
  display:block;
  width:100%;
  min-width:80px;
  height:42px;
  border-radius:8px;
  background:#f0f8f9;
  cursor:ew-resize;
  touch-action:none;
}
body[data-page="listening"] .listening-waveform:focus-visible { outline:3px solid #12b4d6; outline-offset:2px; }
body[data-page="listening"] .listening-player-meta {
  display:flex;
  gap:8px;
  margin-top:5px;
  color:#6a8088;
  font-size:.68rem;
  font-variant-numeric:tabular-nums;
}
body[data-page="listening"] .listening-player-meta span:nth-child(2) { flex:1; text-align:center; }
@media (max-width:820px) {
  body[data-page="listening"] .listening-grades {
    grid-template-columns:repeat(4,minmax(0,1fr));
    top:8px;
  }
  body[data-page="listening"] .listening-grade-button {
    min-width:0;
    padding-inline:8px;
  }
  body[data-page="listening"] .listening-grade-heading {
    align-items:start;
    flex-wrap:wrap;
  }
  body[data-page="listening"] .listening-grade-heading > span {
    margin-left:0;
    width:100%;
  }
  body[data-page="listening"] .listening-test-tracks { grid-template-columns:1fr; }
  body[data-page="listening"] .listening-test-tracks .listening-track:nth-child(odd) { border-right:0; }
  body[data-page="listening"] .listening-test-group > summary { padding:15px; }
  body[data-page="listening"] .listening-test-number { width:46px; height:46px; flex-basis:46px; }
  body[data-page="listening"] .listening-test-count { font-size:.7rem; }
  body[data-page="listening"] .listening-player-controls { gap:5px; }
body[data-page="listening"] .listening-player-skip { width:38px; }

}