/* A fixed transport keeps the same controls within reach on all screen sizes. */
.listeningView { padding-bottom: 196px; }
.listeningView .listeningPanel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.listeningView .listeningHeaderBody { flex: 1; min-width: 0; }
.listeningPlayer {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(680px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 12px 16px;
  display: grid;
  gap: 10px;
  border: 1px solid #ded4ef;
  border-radius: 24px;
  background: rgba(252, 250, 255, .97);
  box-shadow: 0 8px 32px rgba(65, 41, 100, .18);
  color: #342747;
}
.listeningPlayerNow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.listeningPlayerNow > span:first-child { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.listeningPlayerNow strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listeningPlayerNow small { font-size: 12px; color: #766888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listeningPlayerStatus { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #766888; }
.listeningView .listeningTransport { display: grid; grid-template-columns: 1fr 1.8fr 1fr 1fr; gap: 8px; }
.listeningView .listeningTransport button {
  min-height: 52px; padding: 6px; margin: 0; border: 1px solid #e5def0; border-radius: 15px;
  background: #fff; color: #79619c; font: inherit; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; touch-action: manipulation;
}
.listeningView .listeningTransport .listeningPlay {
  position: static; width: auto; min-width: 0; font-size: 16px;
  background: linear-gradient(120deg, #8b72b2, #a18ac3); color: #fff; border-color: transparent;
}
.listeningView .listeningTransport .listeningSkip, .listeningView .listeningTransport .listeningStop { flex-direction: column; gap: 1px; }
.listeningView .listeningTransport small { font-size: 11px; line-height: 16px; }
.listeningView .listeningTransport button > span { font-size: 19px; line-height: 22px; }
.listeningView .listeningPlayerModes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.listeningView .listeningPlayerModes button {
  min-height: 44px; padding: 6px 4px; border: 1px solid #e8e1f1; border-radius: 12px;
  color: #77648f; background: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.listeningView .listeningPlayerModes .active { background: #eee7f8; color: #72549d; border-color: #b7a1d5; }
.listeningPlayer button:disabled { opacity: .35; cursor: default; }
.listeningPlayer button:focus-visible { outline: 3px solid #6650a4; outline-offset: 3px; }
body:has(.listeningView) .ced-launcher { bottom: calc(292px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .listeningPlayer { width: calc(100% - 24px); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding: 10px 12px; gap: 8px; border-radius: 21px; }
  .listeningView .listeningTransport { gap: 6px; }
  .listeningPlayerNow small { display: none; }
  body:has(.listeningView) .ced-launcher { bottom: calc(278px + env(safe-area-inset-bottom, 0px)); }
}
.listeningView .listeningTransport svg, .listeningView .listeningPlayerModes svg {
  display: block; flex-shrink: 0; pointer-events: none;
}
.listeningView .listeningPlayerModes button { display: flex; align-items: center; justify-content: center; }

/* A compact, centered player with quieter secondary actions. */
.listeningPlayer {
  width: min(460px, calc(100% - 32px));
  padding: 14px 18px 12px;
  gap: 8px;
  border-color: rgba(166, 146, 194, .24);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 28px rgba(58, 39, 83, .12), 0 1px 3px rgba(58, 39, 83, .04);
}
.listeningPlayerNow strong { font-size: 15px; font-weight: 750; color: #352b43; }
.listeningPlayerStatus { font-size: 10px; font-weight: 500; color: #8a7f99; }
.listeningView .listeningTransport {
  grid-template-columns: 52px 64px 52px;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.listeningView .listeningTransport button {
  width: 52px; height: 52px; min-height: 52px;
  border: 0; border-radius: 50%; background: transparent; color: #7c6b94;
}
.listeningView .listeningTransport .listeningPlay {
  width: 64px; height: 64px; min-height: 64px;
  background: #8d76ad; color: #fff;
  box-shadow: 0 4px 12px rgba(126, 99, 161, .24);
}
.listeningView .listeningTransport .listeningPlay svg { width: 28px; height: 28px; }
.listeningView .listeningPlayerModes {
  grid-template-columns: repeat(3, 1fr) 48px;
  gap: 4px; align-items: center;
  padding-top: 6px; border-top: 1px solid #f0ecf5;
}
.listeningView .listeningPlayerModes button {
  height: 44px; min-height: 44px; border: 0; border-radius: 13px;
  color: #9a8eaa; background: transparent;
}
.listeningView .listeningPlayerModes .active { background: #f0eaf7; color: #8061a4; border: 0; }
.listeningView .listeningPlayerModes .listeningStop {
  border-left: 1px solid #eee8f4; border-radius: 0; margin-left: 4px;
  color: #8b7c9d;
}
.listeningView .listeningPlayerModes .listeningStop svg { width: 16px; height: 16px; }
.listeningPlayer button:disabled { opacity: .28; }
@media (hover: hover) {
  .listeningView .listeningTransport .listeningSkip:not(:disabled):hover,
  .listeningView .listeningPlayerModes button:not(:disabled):hover { background: #f5f1f9; color: #745691; }
  .listeningView .listeningTransport .listeningPlay:not(:disabled):hover { background: #80659f; }
}
@media (max-width: 600px) {
  .listeningPlayer { width: calc(100% - 28px); padding: 12px 16px 10px; border-radius: 24px; }
  .listeningView .listeningTransport { gap: 24px; }
}

/* Keep playback in the page flow so it never covers the learning content. */
.listeningView { padding-bottom: 20px; }
.listeningView .listeningPlayer {
  position: relative; z-index: auto; left: auto; bottom: auto; transform: none;
  width: 100%; margin: 0; box-shadow: none;
  border: 1px solid #e7dff0; background: #fff;
}
.listeningView .listeningSelectors { width: 100%; }
.listeningView .listeningGroupPick {
  width: 100%; max-width: none; box-sizing: border-box; padding: 18px;
}
.listeningView .listeningGroupPick > div {
  display: grid; grid-template-columns: 52px minmax(100px, 1fr) 52px 80px;
  gap: 10px; align-items: center;
}
.listeningView .listeningGroupPick > div > button {
  min-height: 48px; min-width: 0; font-size: 15px; border-radius: 14px;
}
.listeningView .listeningGroupPick > div > button:nth-child(2) { grid-column: auto !important; font-size: 17px; }
body:has(.listeningView) .ced-launcher { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .listeningView .listeningGroupPick { padding: 16px 12px; }
  .listeningView .listeningGroupPick > div { grid-template-columns: 44px minmax(60px, 1fr) 44px 56px; gap: 6px; }
  .listeningView .listeningGroupPick > div > button { min-height: 48px; font-size: 14px; }
  .listeningView .listeningGroupPick > div > button:nth-child(2) { font-size: 16px; }
}
.listeningView .listeningSelectors { grid-template-columns: minmax(0, 1fr); }

.listeningView .listeningPlayerNow { justify-content: flex-end; }

/* Clearer selection hierarchy and a compact transport. */
.listeningView .listeningLevelGrid { gap: 8px; }
.listeningView .listeningLevelGrid button { min-height: 60px; padding: 10px 16px; border-radius: 17px; }
.listeningView .listeningSelectors { grid-template-columns: minmax(0, 1fr) 126px; align-items: center; gap: 14px; }
.listeningView .listeningGroupPick { padding: 14px 16px; border-radius: 20px; }
.listeningView .listeningGroupPick > div { grid-template-columns: 48px minmax(100px, 260px) 48px 72px; gap: 8px; }
.listeningView .listeningGroupPick > div > button { min-height: 46px; border-radius: 12px; box-shadow: none; }
.listeningView .listeningGroupPick > div > button.active { background: #eee7f6; color: #745595; border: 1px solid #cbb9de; }
.listeningView .listeningGroupPick > small { display: block; margin-top: 5px; font-weight: 500 !important; color: #968b9f !important; font-size: 11px !important; }
.listeningView .listeningShuffleBtn { width: 100%; min-height: 46px; margin: 0; justify-content: center; border-radius: 14px; font-size: 12px; }
.listeningView .listeningContentGroup { padding: 14px; border-radius: 20px; }
.listeningView .listeningContentOptions { gap: 8px; }
.listeningView .listeningContentOptions button { min-height: 62px; border-radius: 14px; box-shadow: none; }
.listeningView .listeningContentOptions button.active { background: #f3eef8; }
.listeningView .listeningPlayer { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 12px 18px; border-radius: 22px; }
.listeningView .listeningPlayerNow { grid-column: 1 / -1; }
.listeningView .listeningTransport { grid-template-columns: 44px 58px 44px; gap: 16px; justify-content: start; }
.listeningView .listeningTransport button { width: 44px; height: 44px; min-height: 44px; }
.listeningView .listeningTransport .listeningPlay { width: 58px; height: 58px; min-height: 58px; box-shadow: 0 3px 10px #82649c29; }
.listeningView .listeningPlayerModes { grid-template-columns: repeat(3, 48px) 44px; gap: 4px; border-top: 0; border-left: 1px solid #eee8f4; padding: 0 0 0 16px; }
.listeningView .listeningEqualizer:not(.playing) span { animation: none !important; transform: none !important; }
@media (max-width: 600px) {
  .listeningView .listeningLevelGrid button { min-height: 58px; padding: 8px; }
  .listeningView .listeningSelectors { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .listeningView .listeningGroupPick { padding: 12px; }
  .listeningView .listeningGroupPick > div { grid-template-columns: 44px minmax(60px, 1fr) 44px 56px; gap: 6px; }
  .listeningView .listeningGroupPick > div > button { min-height: 48px; }
  .listeningView .listeningShuffleBtn { min-height: 44px; }
  .listeningView .listeningContentGroup { padding: 12px; }
  .listeningView .listeningContentOptions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .listeningView .listeningContentOptions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 3px; }
  .listeningView .listeningContentOptions button strong { font-size: 12px; }
  .listeningView .listeningContentOptions button > span { display: none; }
  .listeningView .listeningContentOptions button::before { display: none; }
  .listeningView .listeningPlayer { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; gap: 5px; }
  .listeningView .listeningTransport { justify-content: center; gap: 26px; }
  .listeningView .listeningPlayerModes { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; border-left: 0; border-top: 1px solid #f0ecf5; padding: 5px 0 0; }
}
.listeningView .listeningSelectors > .listeningShuffleBtn { grid-column: auto !important; align-self: center; }
@media (max-width: 600px) {
  .listeningView .listeningContentGroup .listeningContentOptions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .listeningView .listeningContentGroup .listeningContentOptions button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 3px; text-align: center; }
  .listeningView .listeningContentGroup .listeningContentOptions button::before { display: none; }
}

/* Dense layout: one grouping surface and controls gathered around the play key. */
.listeningView .listeningPanel { gap: 10px; padding: 14px; }
.listeningView .listeningHeader { gap: 10px; }
.listeningView .listeningHeader h2 { font-size: clamp(24px, 3.2vw, 30px); line-height: 1.15; }
.listeningView .listeningHeaderBody > p { margin-bottom: 3px; font-size: 11px; }
.listeningView .listeningHeaderBody > span { margin-top: 4px; font-size: 12px; }
.listeningView .listeningHeaderBadge { width: 38px; height: 38px; }
.listeningView .listeningPanel .listeningSelectors {
  grid-template-columns: minmax(0, 1fr) 112px; gap: 12px;
  background: rgba(255,255,255,.82); border: 1px solid #ece5f3;
  border-radius: 16px; padding: 12px; box-sizing: border-box;
}
.listeningView .listeningPanel .listeningGroupPick { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.listeningView .listeningPanel .listeningGroupPick > div { grid-template-columns: 44px minmax(80px, 1fr) 44px 64px; gap: 6px; }
.listeningView .listeningPanel .listeningGroupPick > span { font-size: 11px; margin-bottom: 5px; }
.listeningView .listeningPanel .listeningGroupPick > small { margin-top: 5px; font-size: 10px !important; }
.listeningView .listeningPanel .listeningShuffleBtn { min-height: 44px; padding: 6px; }
.listeningView .listeningContentGroup { padding: 10px 12px; }
.listeningView .listeningContentLabel { font-size: 11px; }
.listeningView .listeningNow { padding: 12px; gap: 6px; }
.listeningView .listeningEqualizer { height: 20px; gap: 4px; margin-bottom: 0; }
.listeningView .listeningEqualizer span { width: 4px; }
.listeningView .listeningCurrent { min-height: 0; gap: 4px; padding: 5px 0; }
.listeningView .listeningCurrent > b { font-size: clamp(36px, 6vw, 56px); line-height: 1.15; }
.listeningView .listeningCurrent > span { font-size: 17px; line-height: 1.4; }
.listeningView .listeningCurrent > em { font-size: 15px; line-height: 1.4; }
.listeningView .listeningExample { margin-top: 6px; padding: 10px 12px; }
.listeningView .listeningNow > small { font-size: 10px; }
.listeningView .listeningPanel .listeningPlayer {
  grid-template-columns: max-content max-content; justify-content: center;
  padding: 8px 14px 10px; gap: 4px 18px; border-radius: 18px;
}
.listeningView .listeningPlayerNow { justify-content: center; }
.listeningView .listeningPlayerStatus { font-size: 11px; }
.listeningView .listeningPanel .listeningTransport { justify-content: center; gap: 12px; }
.listeningView .listeningPanel .listeningPlayerModes { padding-left: 14px; }
@media (max-width: 600px) {
  .listeningView .listeningPanel { padding: 10px; gap: 8px; }
  .listeningView .listeningPanel .listeningSelectors { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 6px; }
  .listeningView .listeningPanel .listeningGroupPick > div { grid-template-columns: 44px minmax(60px, 1fr) 44px 56px; }
  .listeningView .listeningPanel .listeningShuffleBtn { justify-self: end; width: auto; min-width: 110px; min-height: 44px; }
  .listeningView .listeningContentGroup { padding: 8px 10px; }
  .listeningView .listeningContentGroup .listeningContentOptions button { min-height: 64px; gap: 4px; padding: 6px 2px; }
  .listeningView .listeningCurrent > b { font-size: 40px; }
  .listeningView .listeningCurrent > span { font-size: 15px; }
  .listeningView .listeningPanel .listeningPlayer { grid-template-columns: minmax(0, 1fr); padding: 8px 12px; gap: 3px; }
  .listeningView .listeningPanel .listeningPlayerModes { padding: 4px 0 0; }
}
.listeningView .listeningPanel .listeningSelectors .listeningGroupPick {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px;
  border: 0; box-shadow: none; background: transparent;
}
.listeningView .listeningPanel .listeningGroupPick > span { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
.listeningView .listeningPanel .listeningGroupPick > small { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; align-self: center; }
.listeningView .listeningPanel .listeningGroupPick > div { grid-column: 1 / -1; grid-row: 2; }
.listeningView .listeningPanel .listeningEqualizer { height: 20px; gap: 4px; margin: 0 auto; }
.listeningView .listeningPanel .listeningEqualizer span { width: 4px; }
@media (max-width: 600px) {
  .listeningView .listeningPanel .listeningGroupPick > small { font-size: 9px !important; }
}
.listeningView .listeningPanel .listeningSelectors .listeningGroupPick { border: 0 !important; box-shadow: none !important; background: transparent !important; }

/* Level themes and containment: keep every control and waveform inside its card. */
.listeningView { --listen-accent: #8b7ac0; --listen-deep: #69508e; --listen-soft: #f0eaf8; --listen-line: #d4c8e7; --listen-canvas: #faf7fe; min-width: 0; }
.listeningView[data-listen-level="N4"] { --listen-accent: #5e83c8; --listen-deep: #365c9d; --listen-soft: #eaf1fc; --listen-line: #c2d3ee; --listen-canvas: #f6f9ff; }
.listeningView[data-listen-level="N3"] { --listen-accent: #c77fa1; --listen-deep: #9f3c6e; --listen-soft: #fcf5f9; --listen-line: #ecd6e2; --listen-canvas: #fffafd; }
.listeningView .listeningPanel { min-width: 0; box-sizing: border-box; background: linear-gradient(140deg,white,var(--listen-canvas)); }
.listeningView .listeningPanel > *, .listeningView .listeningSelectors > *, .listeningView .listeningContentOptions > *, .listeningView .listeningQueue > * { min-width: 0; box-sizing: border-box; }
.listeningView .listeningPanel .listeningEqualizer { height: 26px; padding: 3px 0; box-sizing: content-box; overflow: hidden; align-items: center; }
.listeningView .listeningPanel .listeningEqualizer span { max-height: 26px; background: var(--listen-accent); }
.listeningView .listeningProgressTrack { background: var(--listen-soft); overflow: hidden; }
.listeningView .listeningProgressTrack > span { background: var(--listen-accent); }
.listeningView .listeningHeaderBadge, .listeningView .listeningPanel .listeningTransport .listeningPlay { background: var(--listen-accent); box-shadow: 0 6px 16px color-mix(in srgb,var(--listen-accent) 22%,transparent); }
.listeningView .listeningHeaderBody > p { background: var(--listen-soft); color: var(--listen-deep); }
.listeningView .listeningPanel .listeningLevelGrid > button.active { background: var(--listen-soft); border-color: var(--listen-line); box-shadow: 0 0 0 1px var(--listen-line); }
.listeningView .listeningPanel .listeningGroupPick > div > button.active { background: var(--listen-accent); border-color: var(--listen-accent); color: white; }
.listeningView .listeningPanel .listeningShuffleBtn, .listeningView .listeningPanel .listeningContentLabel, .listeningView .listeningPanel .listeningGroupPick > span, .listeningView .listeningCurrent > span, .listeningView .listeningExampleReading { color: var(--listen-deep); }
.listeningView .listeningNow { background: linear-gradient(135deg,var(--listen-soft),white); border-color: var(--listen-line); }
.listeningView .listeningPanel .listeningContentOptions > button.active, .listeningView .listeningPanel .listeningQueue > button.active, .listeningView .listeningExample.speaking { background: var(--listen-soft); border-color: var(--listen-line); box-shadow: inset 0 0 0 1px var(--listen-line); }
.listeningView .listeningContentOptions > button.active::before { background: var(--listen-accent); }
.listeningView .listeningPanel .listeningContentIcon { color: var(--listen-deep); background: var(--listen-soft); border-color: var(--listen-line); }
.listeningView .listeningPanel .listeningContentOptions > button.active .listeningContentIcon { background: var(--listen-accent); color: white; }
.listeningView .listeningPanel .listeningPlayer { max-width: 100%; width: 100%; border-color: var(--listen-line); }
.listeningView .listeningTransport > button, .listeningView .listeningPanel .listeningPlayerModes > button { color: var(--listen-deep); }
.listeningView .listeningPanel .listeningTransport .listeningPlay { color: white; }
.listeningView .listeningPanel .listeningPlayerModes > button.active { background: var(--listen-soft); color: var(--listen-deep); }
.listeningView .listeningCurrent > b, .listeningView .listeningCurrent > span, .listeningView .listeningCurrent > em, .listeningView .listeningQueue > button { overflow-wrap: anywhere; }
.listeningView .listeningGroupBrowser { border: 1px solid var(--listen-line); border-radius: 16px; background: white; padding: 12px; display: grid; gap: 8px; }
.listeningGroupBrowserHead { display: flex; justify-content: space-between; align-items: center; color: var(--listen-deep); }
.listeningGroupBrowserHead button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--listen-soft); color: var(--listen-deep); font-size: 24px; }
.listeningGroupBrowser p { margin: 0; color: #777180; font-size: 12px; line-height: 1.5; }
.listeningGroupBrowser select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--listen-line); border-radius: 10px; background: var(--listen-canvas); color: var(--listen-deep); padding: 8px; font: inherit; font-size: 14px; }
.listeningGroupWords { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 6px; max-height: 280px; overflow-y: auto; }
.listeningGroupWords > div { display: grid; align-content: start; gap: 2px; padding: 8px; border-radius: 10px; background: var(--listen-canvas); min-width: 0; overflow-wrap: anywhere; }
.listeningGroupWords strong { font-size: 16px; }.listeningGroupWords small { color: var(--listen-deep); font-size: 12px; }.listeningGroupWords span { color: #777180; font-size: 11px; }
.listeningGroupUse { min-height: 44px; border: 0; border-radius: 10px; background: var(--listen-accent); color: white; font: inherit; font-weight: 700; }
@media (max-width: 600px) {
 .listeningView .listeningPanel .listeningGroupPick > small { max-width: 100%; white-space: normal; text-align: right; }
 .listeningView .listeningPanel .listeningGroupPick > div { grid-template-columns: 44px minmax(0,1fr) 44px 56px; }
 .listeningView .listeningContentOptions { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .listeningView .listeningPanel .listeningPlayerModes { grid-template-columns: repeat(3,minmax(0,1fr)) 44px; }
 .listeningGroupWords { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 260px; }
}
/* Preserve the original glass treatment; only the level palette changes. */
.listeningView { --listen-accent: #8978b3; --listen-highlight: #a294c7; --listen-deep: #6650a4; --listen-soft: #f6f1ff; }
.listeningView[data-listen-level="N4"] { --listen-accent: #5e83c8; --listen-highlight: #8fb0e6; --listen-deep: #3d64ae; --listen-soft: #f0f5ff; }
.listeningView[data-listen-level="N3"] { --listen-accent: #c5598f; --listen-highlight: #e090b5; --listen-deep: #9f3c6e; --listen-soft: #fcf5f9; }
.listeningView[data-listen-level] .listeningPanel {
 background: radial-gradient(120% 170% at 100% 0%,color-mix(in srgb,var(--listen-highlight) 16%,transparent) 0%,rgba(255,255,255,0) 52%),rgba(255,255,255,.84) !important;
 border: 1px solid rgba(255,255,255,.72) !important;
 box-shadow: 0 0 0 1px color-mix(in srgb,var(--listen-deep) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.9),0 20px 48px color-mix(in srgb,var(--listen-deep) 12%,transparent) !important;
}
.listeningView[data-listen-level] .listeningNow {
 background: radial-gradient(70% 90% at 50% 12%,color-mix(in srgb,var(--listen-accent) 12%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--listen-soft) 90%,transparent),rgba(255,255,255,.86)) !important;
 border: 1px solid rgba(255,255,255,.8) !important;
 box-shadow: 0 0 0 1px color-mix(in srgb,var(--listen-deep) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px color-mix(in srgb,var(--listen-deep) 10%,transparent) !important;
}
.listeningView[data-listen-level] .listeningPlay, .listeningView[data-listen-level] .listeningHeaderBadge, .listeningView[data-listen-level] .listeningGroupPick button.active {
 background: linear-gradient(135deg,var(--listen-accent),var(--listen-highlight)) !important;
}
.listeningView[data-listen-level] .listeningPlay { box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px color-mix(in srgb,var(--listen-deep) 32%,transparent) !important; }
.listeningView[data-listen-level] .listeningHeaderBadge { box-shadow: inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px color-mix(in srgb,var(--listen-deep) 32%,transparent) !important; }
.listeningView[data-listen-level] .listeningGroupPick button.active { box-shadow: 0 5px 12px color-mix(in srgb,var(--listen-deep) 28%,transparent) !important; }
.listeningView[data-listen-level] .listeningProgressTrack { background: color-mix(in srgb,var(--listen-deep) 14%,transparent) !important; }
.listeningView[data-listen-level] .listeningProgressTrack span { background: linear-gradient(90deg,var(--listen-accent),var(--listen-highlight)) !important; box-shadow: 0 0 8px color-mix(in srgb,var(--listen-accent) 40%,transparent); }
.listeningView[data-listen-level] .listeningEqualizer span { background: linear-gradient(180deg,var(--listen-highlight),var(--listen-accent)); }
.listeningView[data-listen-level] .listeningCurrent > span, .listeningView[data-listen-level] .listeningGroupPick > span, .listeningView[data-listen-level] .listeningHeader p { color: var(--listen-deep) !important; }
.listeningView[data-listen-level] .listeningHeader p { background: color-mix(in srgb,var(--listen-deep) 9%,transparent); }
.listeningView[data-listen-level] .listeningContentOptions > button.active, .listeningView[data-listen-level] .listeningQueue > button.active {
 background: linear-gradient(180deg,color-mix(in srgb,var(--listen-soft) 95%,transparent),rgba(255,255,255,.9)) !important;
 border-color: color-mix(in srgb,var(--listen-accent) 55%,transparent) !important;
 box-shadow: 0 0 0 1.5px color-mix(in srgb,var(--listen-accent) 50%,transparent),0 12px 24px color-mix(in srgb,var(--listen-accent) 18%,transparent) !important;
}
.listeningView[data-listen-level] .listeningContentIcon { background: linear-gradient(180deg,var(--listen-soft),color-mix(in srgb,var(--listen-accent) 15%,white)); }
.listeningView[data-listen-level] .listeningContentOptions > button.active .listeningContentIcon, .listeningView[data-listen-level] .listeningContentOptions > button.active::before { background: linear-gradient(135deg,var(--listen-accent),var(--listen-highlight)); }
/* N3: same muted pink button palette as the existing home daily plan. */
.listeningView .listeningLevelGrid > button:nth-child(3) { --level: #c5598f !important; }

/* Match the existing N4 flashcard audio button colors. */
.listeningView[data-listen-level="N4"] .listeningPlay {
 background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,#5e83c8 0%,#8fb0e6 55%,color-mix(in srgb,#8fb0e6 70%,white) 100%) !important;
}

/* Horizontal primary buttons share the round audio button's soft colors. */
.listeningView[data-listen-level="N4"] .listeningGroupPick button.active,
.listeningView[data-listen-level="N4"] .listeningGroupUse,
.listeningView[data-listen-level="N4"] .listeningShuffleBtn.active {
 background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,#5e83c8 0%,#8fb0e6 55%,color-mix(in srgb,#8fb0e6 70%,white) 100%) !important;
 color: white !important;
}
.listeningView[data-listen-level="N3"] .listeningGroupPick button.active,
.listeningView[data-listen-level="N3"] .listeningGroupUse,
.listeningView[data-listen-level="N3"] .listeningShuffleBtn.active {
 background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.42),transparent 55%),linear-gradient(135deg,#c77fa1,#d99db7) !important;
 color: white !important;
}

/* N3 matches the existing flashcard's round pink audio button. */
.listeningView[data-listen-level="N3"] .listeningPlay,
.listeningView[data-listen-level="N3"] .listeningGroupPick button.active,
.listeningView[data-listen-level="N3"] .listeningGroupUse,
.listeningView[data-listen-level="N3"] .listeningShuffleBtn.active {
 background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,#c5598f 0%,#e090b5 55%,color-mix(in srgb,#e090b5 70%,white) 100%) !important;
}

/* Player hierarchy: centered transport, secondary mode controls underneath. */
.listeningView .listeningPanel .listeningPlayer {
  width: 100%; max-width: 100%; margin: 0;
  grid-template-columns: minmax(0, 1fr); justify-content: stretch;
  padding: 18px 24px 14px; gap: 14px; border-radius: 28px;
  background: linear-gradient(160deg, #fff, var(--listen-soft));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--listen-deep) 10%, transparent), inset 0 1px 0 #fff;
}
.listeningView .listeningPanel .listeningPlayerNow { grid-column: 1; justify-content: center; }
.listeningView .listeningPanel .listeningPlayerStatus { font-size: 13px; font-weight: 650; letter-spacing: .04em; color: var(--listen-deep); }
.listeningView .listeningPanel .listeningTransport { display: flex; justify-content: center; align-items: center; gap: 32px; }
.listeningView .listeningPanel .listeningTransport .listeningPlay { width: 72px; height: 72px; min-width: 72px; border-radius: 50%; }
.listeningView .listeningPanel .listeningTransport .listeningPlay svg { width: 30px; height: 30px; }
.listeningView .listeningPanel .listeningTransport .listeningSkip { width: 48px; height: 48px; border-radius: 50%; background: transparent; }
.listeningView .listeningPanel .listeningTransport .listeningSkip svg { width: 24px; height: 24px; }
.listeningView .listeningPanel .listeningPlayerModes {
  width: min(300px, 100%); box-sizing: border-box; justify-self: center;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--listen-line);
}
.listeningView .listeningPanel .listeningPlayerModes > button { height: 44px; border-radius: 50%; }
.listeningView .listeningPanel .listeningPlayerModes > button.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--listen-deep) 22%, transparent); }
.listeningView .listeningPanel .listeningPlayerModes .listeningStop { margin-left: 0; border-left: 0; }
@media (max-width: 520px) {
  .listeningView .listeningPanel .listeningPlayer { padding: 16px 18px 12px; border-radius: 24px; }
  .listeningView .listeningPanel .listeningTransport { gap: 26px; }
}

/* Active word: soft background and colored text. */
.listeningView[data-listen-level] .listeningPanel .listeningQueue > button.active > b,
.listeningView[data-listen-level] .listeningPanel .listeningQueue > button.active > span {
  color: var(--listen-deep) !important;
}
/* Keep playback controls open, without an enclosing frame or oval mode outlines. */
.listeningView .listeningPanel .listeningPlayer {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.listeningView .listeningPanel .listeningPlayerModes > button {
  border: 0; border-radius: 12px; box-shadow: none;
}
.listeningView .listeningPanel .listeningPlayerModes > button.active {
  box-shadow: none; background: var(--listen-soft); color: var(--listen-deep);
}

/* One transport row, with equal numbers of controls around the centered play button. */
.listeningView .listeningPanel .listeningPlayer {
  grid-template-columns: repeat(3, 44px) 72px repeat(3, 44px);
  justify-content: center; align-items: center; gap: 10px 14px;
  padding: 14px 0;
}
.listeningView .listeningPanel .listeningPlayerNow { grid-column: 1 / -1; grid-row: 1; }
.listeningView .listeningPanel .listeningTransport,
.listeningView .listeningPanel .listeningPlayerModes { display: contents; }
.listeningView .listeningPanel .listeningTransport > button,
.listeningView .listeningPanel .listeningPlayerModes > button { grid-row: 2; justify-self: center; width: 44px; height: 44px; min-width: 0; margin: 0; }
.listeningView .listeningPanel .listeningTransport > button:nth-child(1) { grid-column: 3; }
.listeningView .listeningPanel .listeningTransport > button.listeningPlay { grid-column: 4; width: 72px; height: 72px; min-width: 0; }
.listeningView .listeningPanel .listeningTransport > button:nth-child(3) { grid-column: 5; }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(1) { grid-column: 1; }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(2) { grid-column: 2; }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(3) { grid-column: 6; }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(4) { grid-column: 7; }
@media (max-width: 520px) {
  .listeningView .listeningPanel .listeningPlayer { grid-template-columns: repeat(3, minmax(0, 1fr)) 56px repeat(3, minmax(0, 1fr)); column-gap: 2px; }
  .listeningView .listeningPanel .listeningTransport > button,
  .listeningView .listeningPanel .listeningPlayerModes > button { width: 100%; max-width: 44px; }
  .listeningView .listeningPanel .listeningTransport > button.listeningPlay { width: 56px; height: 56px; max-width: 56px; }
  .listeningView .listeningPanel .listeningTransport .listeningSkip svg,
  .listeningView .listeningPanel .listeningPlayerModes svg { width: 20px; height: 20px; }
}

/* Supporting character palette: level tabs and small content icons. */
.listeningView .listeningPanel .listeningLevelGrid > button:nth-child(1) { --level-pastel: #C7B6E4; --level-ink: #66508A; background: color-mix(in srgb, #C7B6E4 15%, white); color: #66508A; border-color: color-mix(in srgb, #C7B6E4 55%, white); }
.listeningView .listeningPanel .listeningLevelGrid > button:nth-child(2) { --level-pastel: #B4C8EC; --level-ink: #365B91; background: color-mix(in srgb, #B4C8EC 15%, white); color: #365B91; border-color: color-mix(in srgb, #B4C8EC 55%, white); }
.listeningView .listeningPanel .listeningLevelGrid > button:nth-child(3) { --level-pastel: #EFB3CE; --level-ink: #943A64; background: color-mix(in srgb, #EFB3CE 15%, white); color: #943A64; border-color: color-mix(in srgb, #EFB3CE 55%, white); }
.listeningView .listeningPanel .listeningLevelGrid > button.active { background: color-mix(in srgb, var(--level-pastel) 38%, white); border-color: var(--level-ink); box-shadow: inset 0 0 0 1px var(--level-pastel); }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(3) { color: #785613; }
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(3).active { background: #FFF3CD; }

/* Large animated companion beside the listening title. */
.listeningView .listeningHeader { position: relative; min-height: 148px; box-sizing: border-box; padding-right: 200px; }
.listeningView .listeningHeaderBody { min-width: 0; }
.listeningView .listeningHeader .np-in-listening { pointer-events: none; }
@media (max-width: 600px) {
  .listeningView .listeningHeader { min-height: 118px; padding-right: 128px; gap: 10px; }
  .listeningView .listeningHeaderBadge { display: none; }
  .listeningView .listeningHeader h2 { font-size: clamp(20px, 5vw, 26px); }
}

/* LG_PICKER_20261014 分組選擇整合卡：分組＋順序/亂數＋號碼列預覽（取代原生下拉選單） */
.listeningView .listeningPanel .listeningSelectors.lgMode { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; border: 0; }
.listeningView .lgBox { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--listen-line); border-radius: 16px; background: rgba(255,255,255,.86); min-width: 0; }
.listeningView .lgHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.listeningView .lgTitle { font-size: 12px; font-weight: 800; color: var(--listen-deep); }
.listeningView .lgOrder { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--listen-soft); }
.listeningView .lgOrder button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #7a7088; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.listeningView .lgOrder button.on { background: white; color: var(--listen-deep); box-shadow: 0 1px 3px rgba(60,40,90,.14); }
.listeningView .lgRow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.listeningView .lgStep { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--listen-line); border-radius: 12px; background: white; color: var(--listen-deep); cursor: pointer; }
.listeningView .lgStep:disabled { opacity: .35; cursor: default; }
.listeningView .lgToggle { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--listen-line); border-radius: 12px; background: var(--listen-canvas, #faf7fe); color: var(--listen-deep); font: inherit; text-align: left; cursor: pointer; }
.listeningView .lgToggle b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.listeningView .lgToggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #847a91; font-size: 13px; }
.listeningView .lgToggle .lgChevron { transform: rotate(90deg); transition: transform .2s ease; color: var(--listen-accent); }
.listeningView .lgToggle[aria-expanded="true"] { border-color: var(--listen-accent); background: white; }
.listeningView .lgToggle[aria-expanded="true"] .lgChevron { transform: rotate(-90deg); }
.listeningView .lgPanel { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--listen-line); }
.listeningView .lgStrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.listeningView .lgStrip button { flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--listen-line); border-radius: 999px; background: white; color: #6f6680; font: inherit; font-size: 14px; font-weight: 700; scroll-snap-align: center; cursor: pointer; position: relative; }
.listeningView .lgStrip button.cur { border-color: var(--listen-accent); color: var(--listen-deep); }
.listeningView .lgStrip button.cur::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--listen-accent); }
.listeningView .lgStrip button.on { background: var(--listen-accent); border-color: var(--listen-accent); color: white; }
.listeningView .lgStrip button.on.cur::after { background: white; }
.listeningView .lgStrip .lgAll { padding: 0 14px; }
.listeningView .lgMeta { display: grid; gap: 2px; }
.listeningView .lgMeta b { font-size: 15px; color: var(--listen-deep); }
.listeningView .lgMeta small { font-size: 11px; color: #8a8096; }
.listeningView .lgPanel .listeningGroupUse:disabled { background: var(--listen-soft); color: var(--listen-deep); cursor: default; }
@media (max-width: 520px) {
  .listeningView .lgBox { padding: 10px; }
  .listeningView .lgRow { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
  .listeningView .lgToggle { padding: 0 10px; gap: 8px; }
  .listeningView .lgToggle span { font-size: 12px; }
}
/* LG_PICKER_20261014b 使用者：「拉霸的視覺有點醜」→ 隱藏號碼列捲軸，改用左右淡出提示可滑動 */
.listeningView .lgStrip { scrollbar-width: none; padding: 2px 18px 2px 2px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
.listeningView .lgStrip.atStart { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.listeningView .lgStrip.atEnd { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px); mask-image: linear-gradient(90deg, transparent 0, #000 14px); }
.listeningView .lgStrip::-webkit-scrollbar { display: none; }
.listeningView .lgPanel .listeningGroupWords { max-height: none; overflow: visible; }
@media (max-width: 520px) {
  .listeningView .lgPanel .listeningGroupWords { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .listeningView .lgPanel .listeningGroupWords > div { padding: 7px 6px; }
  .listeningView .lgPanel .listeningGroupWords strong { font-size: 15px; }
  .listeningView .lgPanel .listeningGroupWords small { font-size: 11px; }
}
/* 2026-10-14 角色原本 z-index:-1 被面板背景蓋住而看不見 → 標題區自成一層 */
.listeningView .listeningHeader { isolation: isolate; }
/* GROUP_GRID_20261016 聽力的組別號碼也一樣：多列格子、不橫向捲動 */
.listeningView .lgStrip,.listeningView .lgStrip.atStart,.listeningView .lgStrip.atEnd{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;overflow:visible;padding:8px 2px 2px;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none;user-select:none;-webkit-user-select:none}
.listeningView .lgStrip button{min-width:0;width:100%;height:38px;padding:0;scroll-snap-align:none}
.listeningView .lgStrip .lgAll{grid-column:span 2;padding:0}
.listeningView .lgPages{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;padding:2px 2px 0;user-select:none;-webkit-user-select:none}
.listeningView .lgPage{height:30px;padding:0 4px;white-space:nowrap;border:1px solid var(--listen-line);border-radius:999px;background:#fff;color:#7a7088;font:inherit;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer}
.listeningView .lgPage.hasOn{color:var(--listen-deep);border-color:var(--listen-accent)}
.listeningView .lgPage.isCur{background:color-mix(in srgb,var(--listen-accent) 14%,#fff);border-color:var(--listen-accent);color:var(--listen-deep)}
.listeningView .lgPage.isAll.isOn{background:var(--listen-accent);border-color:var(--listen-accent);color:#fff}
/* LG_MULTI_20261021 多組一起播：面板頂端「單組／多組一起播」切換，多組時號碼鈕是勾選（右上角小勾），下面列出已選的組 */
.listeningView .lgSelMode{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--listen-soft)}
.listeningView .lgSelMode button{min-height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#7a7088;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.listeningView .lgSelMode button.on{background:#fff;color:var(--listen-deep);box-shadow:0 1px 3px rgba(60,40,90,.14)}
.listeningView .lgClear{min-height:30px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--listen-deep);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.listeningView .lgClear:hover{background:var(--listen-soft)}
.listeningView .lgPanel.isMulti .lgStrip button.pick{background:var(--listen-accent);border-color:var(--listen-accent);color:#fff}
.listeningView .lgPanel.isMulti .lgStrip button.pick.cur::after{background:#fff}
.listeningView .lgTick{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--listen-accent);box-shadow:0 1px 3px rgba(60,40,90,.22);font-style:normal;pointer-events:none}
.listeningView .lgPickList{display:grid;gap:6px}
.listeningView .lgPickList > div{display:grid;grid-template-columns:auto minmax(0,1fr) 32px;align-items:center;gap:2px 10px;padding:8px 6px 8px 12px;border-radius:12px;background:var(--listen-canvas,#faf7fe);border:1px solid var(--listen-line)}
.listeningView .lgPickList b{font-size:14px;font-weight:800;color:var(--listen-deep);white-space:nowrap}
.listeningView .lgPickList span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#847a91;font-size:12.5px}
.listeningView .lgPickList .lgPickWords{grid-column:1/3;margin:0;color:#4a4458;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.listeningView .lgPickList button{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#8a8096;cursor:pointer}
.listeningView .lgPickList button:hover{background:var(--listen-soft);color:var(--listen-deep)}
@media (max-width:520px){.listeningView .lgSelMode button{padding:0 12px;font-size:12.5px}.listeningView .lgPickList .lgPickWords{font-size:12.5px}}
/* LG_COMPACT_20261021 分組卡整併：標題列＝單組／多組一起播＋順序／亂數（不再有「分組」字樣、虛線與獨立模式列），間距收緊；全部取消在「已選 N 組」右邊 */
.listeningView .lgBox{gap:8px}
.listeningView .lgHead{flex-wrap:wrap;row-gap:6px}
.listeningView .lgPanel{gap:8px;padding-top:2px;border-top:0}
.listeningView .lgStrip,.listeningView .lgStrip.atStart,.listeningView .lgStrip.atEnd{padding-top:4px}
.listeningView .lgMeta.hasClear{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.listeningView .lgMeta.hasClear > b,.listeningView .lgMeta.hasClear > small{grid-column:1}
.listeningView .lgMeta.hasClear > .lgClear{grid-column:2;grid-row:1/3;align-self:center}
@media (max-width:520px){.listeningView .lgSelMode button,.listeningView .lgOrder button{padding:0 10px}.listeningView .lgPages{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.listeningView .lgPage{height:28px;padding:0 2px;font-size:11.5px}}
/* 2026-10-25 使用者：「希望有個外框才知道是按鈕」→「外框線不好看，不要線但看得出外框」
   播放鈕以外的控制鈕用淡色底＋柔和陰影做出按鈕形狀，不畫邊線；選中的模式底色加深 */
.listeningView .listeningPanel .listeningTransport > button.listeningSkip,
.listeningView .listeningPanel .listeningPlayerModes > button{
  border:0;border-radius:12px;
  background:color-mix(in srgb,var(--listen-soft) 70%,#fff);
  box-shadow:0 1px 2px color-mix(in srgb,var(--listen-deep) 10%,transparent),0 3px 8px color-mix(in srgb,var(--listen-deep) 8%,transparent);
}
.listeningView .listeningPanel .listeningPlayerModes > button.active{
  background:color-mix(in srgb,var(--listen-accent) 22%,#fff);
}
.listeningView .listeningPanel .listeningPlayerModes > button:nth-child(3).active{background:#FFEBB0}
.listeningView .listeningPanel .listeningTransport > button.listeningSkip:disabled,
.listeningView .listeningPanel .listeningPlayerModes > button:disabled{opacity:.5;box-shadow:none}