.listening-wrongbook-page .wrongbook-main { min-width: 0; display: grid; gap: 20px; }

.wrongbook-hero {
  min-height: 300px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(30px, 5vw, 58px);
  overflow: hidden;
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 88% 15%, rgba(22,133,121,.42), transparent 20rem),
    radial-gradient(circle at 52% 120%, rgba(255,107,74,.22), transparent 23rem),
    #142238;
  box-shadow: 0 24px 56px rgba(20,34,56,.18);
}
.wrongbook-hero .eyebrow { color: #78d8cd; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.wrongbook-hero h1 { margin: 14px 0; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(42px, 6vw, 72px); line-height: .98; letter-spacing: -.05em; }
.wrongbook-hero h1 span { color: #ff8065; }
.wrongbook-hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.70); font-size: 15px; line-height: 1.8; }
.wrongbook-hero-actions { min-width: 190px; display: grid; gap: 12px; justify-items: stretch; }
.wrongbook-sync { color: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; text-align: center; }

.wrongbook-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.wrongbook-metric { min-height: 142px; display: grid; align-content: space-between; gap: 8px; padding: 22px; border: 1px solid rgba(20,34,56,.10); border-radius: 20px; background: rgba(255,253,250,.96); box-shadow: 0 12px 34px rgba(20,34,56,.06); }
.wrongbook-metric span,.wrongbook-metric small { color: #66758a; font-size: 12px; font-weight: 800; }
.wrongbook-metric strong { color: #142238; font-family: Georgia, serif; font-size: 44px; }
.wrongbook-metric strong.metric-copy { font-family: inherit; font-size: 25px; }
.wrongbook-metric.dark { color: white; background: #142238; }
.wrongbook-metric.dark span,.wrongbook-metric.dark small { color: rgba(255,255,255,.62); }
.wrongbook-metric.dark strong { color: #ff8065; }

.wrongbook-panel { padding: 28px; border: 1px solid rgba(20,34,56,.10); border-radius: 26px; background: rgba(255,253,250,.96); box-shadow: 0 16px 45px rgba(20,34,56,.07); }
.wrongbook-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.wrongbook-panel-head span { color: #168579; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.wrongbook-panel-head h2 { margin: 7px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 32px; }
.wrongbook-filter { display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(20,34,56,.10); border-radius: 999px; background: #f4f3ef; }
.wrongbook-filter button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; color: #66758a; background: transparent; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.wrongbook-filter button.is-active { color: white; background: #142238; }
.wrongbook-list { display: grid; gap: 14px; }
.wrongbook-entry { overflow: hidden; border: 1px solid rgba(20,34,56,.10); border-radius: 19px; background: #f8f7f3; }
.wrongbook-entry-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; }
.wrongbook-entry-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wrongbook-entry-meta span { padding: 5px 8px; border-radius: 999px; color: #16756c; background: #e7f5f2; font-size: 11px; font-weight: 850; }
.wrongbook-entry h3 { margin: 0 0 6px; color: #142238; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: 22px; }
.wrongbook-entry p { margin: 0; color: #66758a; font-size: 13px; }
.wrongbook-score { min-width: 92px; text-align: right; }
.wrongbook-score strong { display: block; color: #e95438; font-family: Georgia, serif; font-size: 29px; }
.wrongbook-score span { color: #66758a; font-size: 11px; font-weight: 800; }
.wrongbook-items { display: grid; gap: 1px; border-top: 1px solid rgba(20,34,56,.09); background: rgba(20,34,56,.08); }
.wrongbook-item { display: grid; grid-template-columns: 54px minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr); gap: 14px; padding: 16px 22px; background: #fffdfa; }
.wrongbook-item .q { color: #e95438; font-family: Georgia, serif; font-size: 19px; font-weight: 800; }
.wrongbook-item div { min-width: 0; color: #485a73; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.wrongbook-item small { display: block; margin-bottom: 3px; color: #8995a5; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.wrongbook-entry-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid rgba(20,34,56,.08); background: #fffdfa; }
.wrongbook-empty { min-height: 180px; display: grid; place-items: center; padding: 28px; border: 1px dashed #cbd5df; border-radius: 18px; color: #7a8799; text-align: center; line-height: 1.8; }
.wrongbook-error { color: #a63e2c; }

@media (max-width: 980px) {
  .wrongbook-hero { align-items: start; flex-direction: column; }
  .wrongbook-hero-actions { width: 100%; }
  .wrongbook-item { grid-template-columns: 48px 1fr 1fr; }
  .wrongbook-item .explanation { grid-column: 2 / -1; }
}
@media (max-width: 680px) {
  .wrongbook-metrics { grid-template-columns: 1fr; }
  .wrongbook-panel-head,.wrongbook-entry-head { align-items: stretch; flex-direction: column; display: flex; }
  .wrongbook-filter { width: 100%; overflow-x: auto; }
  .wrongbook-item { grid-template-columns: 42px 1fr; }
  .wrongbook-item div,.wrongbook-item .explanation { grid-column: 2; }
  .wrongbook-score { text-align: left; }
}