/*
 * Qixing listening practice UI skin
 * Scope: listening-practice formal practice view and shared shell.
 */
body.qx-listening-practice {
  --qx-listening-blue-900: #071f63;
  --qx-listening-blue-800: #0b2d82;
  --qx-listening-blue-700: #123eaa;
  --qx-listening-blue-600: #1657d8;
  --qx-listening-blue-100: #eaf2ff;
  --qx-listening-cyan: #20c6d6;
  --qx-listening-mint: #45d6b0;
  --qx-listening-ink: #102033;
  --qx-listening-muted: #64748b;
  --qx-listening-line: rgba(18, 62, 170, 0.14);
  --qx-listening-line-strong: rgba(18, 62, 170, 0.24);
  --qx-listening-shadow: 0 18px 48px rgba(13, 38, 89, 0.1);
  --qx-listening-shadow-soft: 0 10px 28px rgba(13, 38, 89, 0.08);
  --lp-blue: var(--qx-listening-blue-600);
  --lp-blue-dark: var(--qx-listening-blue-800);
  --lp-line: rgba(18, 62, 170, 0.14);
  --lp-bg: #f5f8ff;
  --lp-ink: var(--qx-listening-ink);
  --lp-muted: var(--qx-listening-muted);
  background:
    radial-gradient(circle at 10% 8%, rgba(32, 198, 214, 0.14), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(22, 87, 216, 0.16), transparent 30%),
    linear-gradient(180deg, #f6f9ff 0%, #edf4ff 48%, #f8fbff 100%);
}

body.qx-listening-practice .lp-shell {
  width: min(100% - 40px, 1180px);
}

body.qx-listening-practice .lp-hero,
body.qx-listening-practice .lp-test-header,
body.qx-listening-practice .lp-toolbar,
body.qx-listening-practice .lp-beta-note,
body.qx-listening-practice .lp-audio,
body.qx-listening-practice .lp-question-group,
body.qx-listening-practice .lp-results,
body.qx-listening-practice .lp-error {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.9)),
    radial-gradient(circle at 100% 0%, rgba(32, 198, 214, 0.09), transparent 34%);
  box-shadow: var(--qx-listening-shadow-soft);
}

body.qx-listening-practice .lp-practice {
  display: grid;
  gap: 16px;
}

body.qx-listening-practice .lp-practice.is-hidden {
  display: none !important;
}

body.qx-listening-practice .lp-back {
  justify-self: start;
  border-color: rgba(18, 62, 170, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--qx-listening-blue-800);
  box-shadow: 0 8px 18px rgba(7, 31, 99, 0.06);
  font-weight: 800;
}

body.qx-listening-practice .lp-back:hover,
body.qx-listening-practice .lp-back:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(22, 87, 216, 0.34);
  color: var(--qx-listening-blue-900);
  background: var(--qx-listening-blue-100);
  box-shadow: 0 12px 24px rgba(7, 31, 99, 0.1);
}

body.qx-listening-practice .lp-test-header {
  margin: 0;
  padding: 22px;
  align-items: center;
}

body.qx-listening-practice .lp-test-header h1 {
  color: var(--qx-listening-ink);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  letter-spacing: 0;
}

body.qx-listening-practice .lp-kicker {
  color: var(--qx-listening-blue-700);
  font-weight: 900;
}

body.qx-listening-practice .lp-duration {
  border-color: rgba(18, 62, 170, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, var(--qx-listening-blue-100));
  color: var(--qx-listening-blue-900);
  box-shadow: 0 8px 20px rgba(7, 31, 99, 0.07);
}

body.qx-listening-practice .lp-audio {
  padding: 20px;
  border-color: rgba(18, 62, 170, 0.12);
}

body.qx-listening-practice .lp-audio-player {
  gap: 12px;
}

body.qx-listening-practice .lp-audio-controls {
  grid-template-columns: auto auto auto minmax(160px, 1fr) auto auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(18, 62, 170, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
}

body.qx-listening-practice .lp-footer {
  margin-top: 36px;
  padding: 34px max(20px, calc((100vw - 1180px) / 2));
  border-top: 1px solid #e5eaf5;
  background: #fff;
  color: var(--qx-listening-muted);
}

body.qx-listening-practice .lp-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

body.qx-listening-practice .lp-footer strong {
  display: block;
  color: var(--qx-listening-ink);
  font-size: 13px;
  line-height: 18px;
}

body.qx-listening-practice .lp-footer p {
  max-width: 250px;
  margin: 10px 0 0;
  font-size: 13px;
}

body.qx-listening-practice .lp-footer nav,
body.qx-listening-practice .lp-footer-note {
  display: grid;
  gap: 9px;
}

body.qx-listening-practice .lp-footer a,
body.qx-listening-practice .lp-footer span {
  color: var(--qx-listening-muted);
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
}

body.qx-listening-practice .lp-footer a:hover,
body.qx-listening-practice .lp-footer a:focus-visible {
  color: var(--qx-listening-blue-600);
  outline: none;
}

body.qx-listening-practice .lp-audio-button {
  min-height: 40px;
  border-color: rgba(18, 62, 170, 0.16);
  border-radius: 13px;
  background: #ffffff;
  color: var(--qx-listening-blue-800);
  box-shadow: 0 8px 18px rgba(7, 31, 99, 0.06);
}

body.qx-listening-practice .lp-audio-button:hover,
body.qx-listening-practice .lp-audio-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(22, 87, 216, 0.34);
  color: var(--qx-listening-blue-900);
  background: var(--qx-listening-blue-100);
}

body.qx-listening-practice .lp-audio-play {
  min-width: 74px;
  border-color: rgba(22, 87, 216, 0.28);
  color: #ffffff;
  background: linear-gradient(135deg, var(--qx-listening-blue-800), var(--qx-listening-blue-600));
  box-shadow: 0 12px 26px rgba(22, 87, 216, 0.22);
}

body.qx-listening-practice .lp-audio-play:hover,
body.qx-listening-practice .lp-audio-play:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, var(--qx-listening-blue-900), var(--qx-listening-blue-600));
}

body.qx-listening-practice .lp-audio-range {
  height: 8px;
  accent-color: var(--qx-listening-blue-600);
}

body.qx-listening-practice .lp-audio-time,
body.qx-listening-practice .lp-audio-separator {
  color: var(--qx-listening-muted);
  font-weight: 800;
}

body.qx-listening-practice .lp-question-group {
  padding: 22px;
  border-color: rgba(18, 62, 170, 0.12);
}

body.qx-listening-practice .lp-question-group h2 {
  color: var(--qx-listening-blue-900);
}

body.qx-listening-practice .lp-instruction {
  color: var(--qx-listening-muted);
}

body.qx-listening-practice .lp-group-html th {
  background: var(--qx-listening-blue-100);
  color: var(--qx-listening-blue-900);
}

body.qx-listening-practice .lp-group-html th,
body.qx-listening-practice .lp-group-html td,
body.qx-listening-practice .lp-group-html .flowchart-container,
body.qx-listening-practice .lp-group-html .flow-chart-container,
body.qx-listening-practice .lp-group-html .flowchart-step,
body.qx-listening-practice .lp-group-html .flow-chart-item,
body.qx-listening-practice .lp-group-html .flow-chart-content,
body.qx-listening-practice .lp-option-bank {
  border-color: rgba(18, 62, 170, 0.14);
}

body.qx-listening-practice .lp-group-html .flowchart-container,
body.qx-listening-practice .lp-group-html .flow-chart-container,
body.qx-listening-practice .lp-option-bank {
  border-radius: 16px;
  background: #f4f8ff;
}

body.qx-listening-practice .lp-group-html .flowchart-step,
body.qx-listening-practice .lp-group-html .flow-chart-item,
body.qx-listening-practice .lp-group-html .flow-chart-content,
body.qx-listening-practice .lp-group-html .drag-option,
body.qx-listening-practice .lp-group-html .flowchart-option {
  border-radius: 12px;
  background: #ffffff;
}

body.qx-listening-practice .lp-question {
  border-top-color: rgba(18, 62, 170, 0.1);
}

body.qx-listening-practice .lp-input,
body.qx-listening-practice .lp-select,
body.qx-listening-practice .lp-group-html .listening-inline-blank .lp-inline-input {
  border-color: rgba(18, 62, 170, 0.18);
  border-radius: 12px;
  background: #ffffff;
  color: var(--qx-listening-ink);
  box-shadow: 0 6px 16px rgba(7, 31, 99, 0.05);
}

body.qx-listening-practice .lp-input:focus,
body.qx-listening-practice .lp-select:focus,
body.qx-listening-practice .lp-group-html .listening-inline-blank .lp-inline-input:focus {
  outline: none;
  border-color: rgba(22, 87, 216, 0.56);
  box-shadow: 0 0 0 4px rgba(22, 87, 216, 0.1), 0 10px 22px rgba(7, 31, 99, 0.08);
}

body.qx-listening-practice .lp-choice {
  border-color: rgba(18, 62, 170, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

body.qx-listening-practice .lp-choice:hover {
  border-color: rgba(22, 87, 216, 0.28);
  background: #f3f7ff;
}

body.qx-listening-practice .lp-actions {
  position: static;
  z-index: auto;
  margin-top: 18px;
  padding: 8px 0 2px;
  background: transparent;
}

body.qx-listening-practice .lp-primary {
  min-height: 46px;
  max-width: 320px;
  border-radius: 14px;
  border-color: rgba(22, 87, 216, 0.3);
  background: linear-gradient(135deg, var(--qx-listening-blue-800), var(--qx-listening-blue-600));
  box-shadow: 0 12px 26px rgba(22, 87, 216, 0.22);
  font-weight: 900;
}

body.qx-listening-practice .lp-primary:hover,
body.qx-listening-practice .lp-primary:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--qx-listening-blue-900), var(--qx-listening-blue-600));
  box-shadow: 0 16px 32px rgba(22, 87, 216, 0.26);
}

body.qx-listening-practice .lp-results {
  padding: 22px;
  border-color: rgba(18, 62, 170, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)),
    radial-gradient(circle at 100% 0%, rgba(32, 198, 214, 0.08), transparent 34%);
}

body.qx-listening-practice .lp-results h2 {
  margin: 0 0 16px;
  color: var(--qx-listening-blue-900);
  font-size: 1.45rem;
  letter-spacing: 0;
}

body.qx-listening-practice .lp-score {
  gap: 14px;
}

body.qx-listening-practice .lp-score-card {
  border-color: rgba(18, 62, 170, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, #ffffff, #f0f6ff);
  box-shadow: 0 12px 26px rgba(7, 31, 99, 0.07);
}

body.qx-listening-practice .lp-score-card span {
  color: var(--qx-listening-muted);
  font-weight: 850;
}

body.qx-listening-practice .lp-score-card strong {
  color: var(--qx-listening-blue-900);
  font-size: 2rem;
  line-height: 1.1;
}

body.qx-listening-practice .lp-result-table {
  overflow: hidden;
  border: 1px solid rgba(18, 62, 170, 0.12);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(7, 31, 99, 0.05);
}

body.qx-listening-practice .lp-result-table th {
  border-top: 0;
  background: linear-gradient(180deg, var(--qx-listening-blue-100), #f7fbff);
  color: var(--qx-listening-blue-900);
  font-size: 0.82rem;
  font-weight: 900;
}

body.qx-listening-practice .lp-result-table td {
  border-top-color: rgba(18, 62, 170, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: var(--qx-listening-ink);
  line-height: 1.58;
}

body.qx-listening-practice .lp-result-table tbody tr:nth-child(even) td {
  background: #f8fbff;
}

body.qx-listening-practice .lp-result-number {
  color: var(--qx-listening-blue-900);
  font-weight: 900;
}

body.qx-listening-practice .lp-result-user-answer,
body.qx-listening-practice .lp-result-correct-answer {
  overflow-wrap: anywhere;
}

body.qx-listening-practice .lp-correct,
body.qx-listening-practice .lp-wrong {
  font-size: 0.95rem;
  font-weight: 950;
}

body.qx-listening-practice .lp-correct {
  color: #0f8a5f;
}

body.qx-listening-practice .lp-wrong {
  color: #d14343;
}

body.qx-listening-practice .lp-location,
body.qx-listening-practice .lp-explanation,
body.qx-listening-practice .lp-transcript-details {
  border-radius: 12px;
}

body.qx-listening-practice .lp-location summary,
body.qx-listening-practice .lp-explanation summary,
body.qx-listening-practice .lp-transcript-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(18, 62, 170, 0.13);
  border-radius: 999px;
  background: #f4f8ff;
  color: var(--qx-listening-blue-800);
  font-size: 0.88rem;
}

body.qx-listening-practice .lp-location-snippet,
body.qx-listening-practice .lp-explanation p,
body.qx-listening-practice .lp-location-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(18, 62, 170, 0.1);
  border-radius: 12px;
  background: #f8fbff;
}

body.qx-listening-practice .lp-transcript-review {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(18, 62, 170, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(7, 31, 99, 0.05);
}

body.qx-listening-practice .lp-transcript-review h3 {
  color: var(--qx-listening-blue-900);
}

body.qx-listening-practice .lp-transcript-text {
  border-color: rgba(18, 62, 170, 0.12);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.qx-listening-practice .lp-answer-highlight {
  border-radius: 6px;
  background: #dff7ef;
  color: #075f48;
  box-shadow: 0 0 0 1px rgba(15, 138, 95, 0.14);
}

@media (max-width: 900px) {
  body.qx-listening-practice .lp-audio-controls {
    grid-template-columns: auto auto auto minmax(0, 1fr);
  }

  body.qx-listening-practice .lp-audio-range {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  body.qx-listening-practice .lp-shell {
    width: min(100% - 20px, 1180px);
  }

  body.qx-listening-practice .lp-test-header,
  body.qx-listening-practice .lp-audio,
  body.qx-listening-practice .lp-question-group {
    border-radius: 18px;
    padding: 16px;
  }

  body.qx-listening-practice .lp-audio-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.qx-listening-practice .lp-audio-play,
  body.qx-listening-practice .lp-audio-button {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  body.qx-listening-practice .lp-audio-time,
  body.qx-listening-practice .lp-audio-separator {
    justify-self: center;
  }

  body.qx-listening-practice .lp-question {
    gap: 10px;
  }

  body.qx-listening-practice .lp-group-html {
    max-width: 100%;
    margin-inline: -2px;
    padding: 0 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(22, 87, 216, 0.46) rgba(226, 237, 255, 0.9);
    scrollbar-width: thin;
  }

  body.qx-listening-practice .lp-group-html::-webkit-scrollbar {
    height: 9px;
  }

  body.qx-listening-practice .lp-group-html::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 237, 255, 0.9);
  }

  body.qx-listening-practice .lp-group-html::-webkit-scrollbar-thumb {
    border: 2px solid rgba(226, 237, 255, 0.9);
    border-radius: 999px;
    background: rgba(22, 87, 216, 0.58);
  }

  body.qx-listening-practice .lp-group-html table {
    width: max-content;
    min-width: 640px;
    max-width: none;
    table-layout: auto;
    font-size: 14px;
  }

  body.qx-listening-practice .lp-group-html th,
  body.qx-listening-practice .lp-group-html td {
    padding: 9px 10px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }

  body.qx-listening-practice .lp-group-html td:first-child,
  body.qx-listening-practice .lp-group-html th:first-child {
    min-width: 120px;
  }

  body.qx-listening-practice .lp-group-html td:nth-child(2),
  body.qx-listening-practice .lp-group-html th:nth-child(2) {
    min-width: 330px;
  }

  body.qx-listening-practice .lp-group-html td:last-child,
  body.qx-listening-practice .lp-group-html th:last-child {
    min-width: 120px;
  }

  body.qx-listening-practice .lp-group-html .listening-inline-blank .lp-inline-input,
  body.qx-listening-practice .lp-group-html .lp-input {
    width: 118px;
    min-width: 118px;
    max-width: 150px;
  }

  body.qx-listening-practice .lp-group-html table.question-table {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.qx-listening-practice .lp-group-html table.question-table thead {
    display: none;
  }

  body.qx-listening-practice .lp-group-html table.question-table tbody {
    display: grid;
    gap: 12px;
  }

  body.qx-listening-practice .lp-group-html table.question-table tr {
    display: block;
    padding: 12px;
    border: 1px solid rgba(18, 62, 170, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(7, 31, 99, 0.06);
  }

  body.qx-listening-practice .lp-group-html table.question-table th,
  body.qx-listening-practice .lp-group-html table.question-table td {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 7px 0;
    border: 0;
  }

  body.qx-listening-practice .lp-group-html table.question-table td:first-child {
    margin-bottom: 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(18, 62, 170, 0.1);
    color: var(--qx-listening-blue-900);
    font-weight: 850;
  }

  body.qx-listening-practice .lp-group-html table.question-table td:last-child {
    padding-bottom: 0;
  }

  body.qx-listening-practice .lp-group-html table.question-table .listening-inline-blank {
    display: inline-flex;
    max-width: 100%;
    margin: 3px 4px;
    vertical-align: middle;
  }

  body.qx-listening-practice .lp-group-html table.question-table .listening-inline-blank .lp-inline-input,
  body.qx-listening-practice .lp-group-html table.question-table .lp-input {
    width: min(160px, 52vw);
    min-width: 116px;
    max-width: 100%;
  }

  body.qx-listening-practice .lp-actions {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  body.qx-listening-practice .lp-results {
    padding: 16px;
  }

  body.qx-listening-practice .lp-score {
    gap: 10px;
  }

  body.qx-listening-practice .lp-score-card {
    padding: 12px;
  }

  body.qx-listening-practice .lp-result-table {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.qx-listening-practice .lp-result-table tr {
    border-radius: 16px;
    border-color: rgba(18, 62, 170, 0.13);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(7, 31, 99, 0.06);
  }

  body.qx-listening-practice .lp-result-table td {
    border-top: 0;
    border-bottom: 1px solid rgba(18, 62, 170, 0.08);
    background: transparent !important;
  }

  body.qx-listening-practice .lp-result-table td:last-child {
    border-bottom: 0;
  }

  body.qx-listening-practice .lp-review-cell {
    margin-top: 4px;
  }

  body.qx-listening-practice .lp-location summary,
  body.qx-listening-practice .lp-explanation summary,
  body.qx-listening-practice .lp-transcript-details summary {
    display: flex;
    width: fit-content;
    max-width: 100%;
  }

  body.qx-listening-practice .lp-location-snippet,
  body.qx-listening-practice .lp-explanation p,
  body.qx-listening-practice .lp-location-note {
    padding: 9px 10px;
  }

  body.qx-listening-practice .lp-transcript-review {
    padding: 14px;
  }

  body.qx-listening-practice .lp-transcript-text {
    max-height: 360px;
    padding: 12px;
  }
}