/* ==========================================================
   瓜瓜英语 · 国学经典板块样式
   主题色跟随各书 --c1/--c2（每本书独立配色）
   ========================================================== */

.gx-wrap { padding: 0 var(--s-4) var(--s-8); }

.gx-intro {
  margin: var(--s-4) 0 var(--s-3);
  color: var(--c-ink-2);
  font-size: var(--f-sm);
  line-height: 1.6;
}

/* ---- 书目卡片 ---- */
.gx-books { display: flex; flex-direction: column; gap: var(--s-3); }

.gx-book {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3);
  background: var(--c-card);
  border: none;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-pop);
}
.gx-book:active { transform: scale(.98); }

.gx-book img {
  width: 76px;
  height: 76px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
}

.gx-book-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gx-book-info b { font-size: var(--f-lg); color: var(--c-ink); }
.gx-book-info span { font-size: var(--f-xs); color: var(--c-ink-3); }
.gx-book-info i { font-style: normal; font-size: var(--f-xs); color: var(--c-ink-2); line-height: 1.4; }

.gx-book-modes { display: flex; flex-direction: column; gap: var(--s-2); flex: none; }

.gx-mode-chip {
  font-size: var(--f-xs);
  color: #fff;
  background: linear-gradient(135deg, var(--c1, var(--c-brand)), var(--c2, var(--c-brand-2)));
  padding: 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ---- 详情页头部 ---- */
.gx-hero {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-4) 0 var(--s-4);
  padding: var(--s-4);
  background: linear-gradient(135deg, var(--c1, var(--c-brand)), var(--c2, var(--c-brand-2)));
  border-radius: var(--r-lg);
  color: #fff;
}
.gx-hero-cover {
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex: none;
  box-shadow: var(--sh-2);
}
.gx-hero b { display: block; font-size: var(--f-xl); }
.gx-hero span { display: block; font-size: var(--f-xs); opacity: .85; margin-top: 2px; }
.gx-hero p { margin: var(--s-2) 0 0; font-size: var(--f-sm); line-height: 1.5; opacity: .95; }

/* ---- 模式切换 ---- */
.gx-tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: 4px;
  background: var(--c-card-2);
  border-radius: var(--r-pill);
}
.gx-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--c-ink-2);
  font-size: var(--f-sm);
  font-weight: 700;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.gx-tab.is-active {
  background: #fff;
  color: var(--c-ink);
  box-shadow: var(--sh-1);
}

/* ---- 跟读列表 ---- */
.gx-playall {
  display: block;
  width: 100%;
  margin-bottom: var(--s-3);
  padding: 12px 0;
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: var(--f-md);
  font-weight: 800;
  background: linear-gradient(135deg, var(--c1, var(--c-brand)), var(--c2, var(--c-brand-2)));
  box-shadow: var(--sh-brand);
  cursor: pointer;
}
.gx-playall:active { transform: scale(.98); }

.gx-sentences { display: flex; flex-direction: column; gap: var(--s-3); }

.gx-sentence {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-card);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border: 2px solid transparent;
  transition: border-color var(--t-base), background var(--t-base);
}
.gx-sentence.is-playing {
  border-color: var(--c1, var(--c-brand));
  background: var(--c-card-3);
}

.gx-play {
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-pill);
  color: #fff;
  background: linear-gradient(135deg, var(--c1, var(--c-brand)), var(--c2, var(--c-brand-2)));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gx-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gx-orig { font-size: var(--f-md); font-weight: 800; color: var(--c-ink); line-height: 1.5; }
.gx-zh { font-size: var(--f-xs); color: var(--c-ink-2); line-height: 1.4; }

/* ---- 故事 ---- */
.gx-bigplay {
  display: block;
  width: 100%;
  margin-bottom: var(--s-4);
  padding: 16px 0;
  border: none;
  border-radius: var(--r-lg);
  color: #fff;
  font-size: var(--f-lg);
  font-weight: 800;
  background: linear-gradient(135deg, var(--c1, var(--c-brand)), var(--c2, var(--c-brand-2)));
  box-shadow: var(--sh-brand);
  cursor: pointer;
}
.gx-bigplay:active { transform: scale(.98); }

.gx-story-text {
  padding: var(--s-4);
  background: var(--c-card);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.gx-para {
  margin: 0 0 var(--s-3);
  font-size: var(--f-md);
  line-height: 1.8;
  color: var(--c-ink);
}
.gx-para:last-child { margin-bottom: 0; }
.gx-para.is-reading { color: var(--c1, var(--c-brand)); font-weight: 700; }