/* 单词词库前端样式（/words 总入口 + /words/{slug} 册页）
   页面级引入（仅 words 两页 {{define "head"}} 引用），不影响其他页面。
   断点：≤768px 移动端（词条卡片化、容器收窄）。 */

/* ===== 总入口 /words ===== */
.words-hero {
  text-align: center; padding: 44px 16px 8px;
}
.words-hero h1 { font-size: 30px; margin: 0 0 8px; }
.words-hero .ws-sub { color: var(--text-sub); font-size: 14.5px; margin: 0 auto; max-width: 640px; }
/* 英雄区数量统计标签（首页 hero-stats 同款上下两行结构） */
.wh-stats { display: inline-flex; align-items: stretch; gap: 26px; margin-top: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 32px; }
.wh-stat { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.35; font-size: 13px; color: var(--text-sub); }
.wh-stat b { color: var(--primary); font-size: 20px; line-height: 1.2; white-space: nowrap; }
.wh-stats i { width: 1px; background: var(--border); }

/* 筛选区：分类胶囊行 + 版本下拉/搜索/按钮行 */
.wfilter { margin-top: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px 10px; }
.wfilter-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.wcat-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font-size: 13px; color: var(--text-sub); text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.wcat-pill:hover { border-color: var(--primary); color: var(--primary); }
.wcat-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.wcat-pill em { font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .75; }
.wfilter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.wfilter-sub, .wfilter-q { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-sub); font-weight: 600; }
.wfilter-sub select, .wfilter-q input {
  box-sizing: border-box; height: 38px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text); font: inherit; font-size: 13.5px; padding: 0 10px;
}
.wfilter-sub select { min-width: 150px; }
.wfilter-q input { width: 260px; }
.wfilter-btn { height: 38px; display: inline-flex; align-items: center; border-radius: 8px; text-decoration: none; }
.wfilter-meta { margin: 8px 0 4px; font-size: 12.5px; color: var(--text-sub); }
.wcat-empty { text-align: center; padding: 44px 20px; }
.wcat-empty b { font-size: 15px; color: var(--text); }
.wcat-empty p { margin: 8px 0 0; font-size: 13px; color: var(--text-sub); }
.words-cats { margin-top: 22px; display: grid; gap: 22px; }

.wcat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; }
.wcat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.wcat-head h2 { font-size: 19px; margin: 0; }
.wcat-head .wcat-desc { font-size: 13px; color: var(--text-sub); }
.wcat-sub { font-size: 13.5px; color: var(--text-sub); font-weight: 600; margin: 14px 0 8px; }

.wbooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.wbook {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wbook:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(37,99,235,.35); }
.wbook b { font-size: 14px; color: var(--text); line-height: 1.45; }
.wbook .wbook-n {
  font-size: 12px; color: var(--primary); background: var(--primary-light);
  border-radius: 999px; padding: 2px 10px; align-self: flex-start; font-weight: 600;
}

/* ===== 册页 /words/{slug}：左词表主栏 + 右信息/下载侧栏 ===== */
.wb-crumb { font-size: 13px; color: var(--text-sub); margin: 22px 0 14px; }
.wb-crumb a { color: var(--text-sub); text-decoration: none; }
.wb-crumb a:hover { color: var(--primary); }
.wb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 20px; align-items: start; }
.wb-main { min-width: 0; }
.wb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wb-head h1 { font-size: 24px; margin: 0; }
.wb-count {
  font-size: 13px; color: var(--primary); background: var(--primary-light);
  border-radius: 999px; padding: 4px 14px; font-weight: 600; white-space: nowrap;
}

/* 右侧栏：介绍卡 + 下载卡 */
.wb-aside { display: grid; gap: 16px; position: sticky; top: 76px; }
.wb-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.wb-info-card h2 { font-size: 15px; margin: 0 0 12px; color: var(--text); }
.wb-info-list { margin: 0; display: grid; gap: 10px; }
.wb-info-list > div { display: grid; gap: 3px; }
.wb-info-list dt { font-size: 12px; color: var(--text-sub); }
.wb-info-list dd { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.wb-info-list dd b { color: var(--primary); font-size: 16px; }
.wb-dl-list { display: grid; gap: 8px; }
.wb-dl-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  font-size: 13.5px; color: var(--text); text-decoration: none; font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
.wb-dl-item:hover { border-color: var(--primary); box-shadow: 0 6px 16px -10px rgba(37,99,235,.4); }
.wb-dl-item svg { color: var(--primary); flex-shrink: 0; }
.wb-dl-item span { flex: 1; min-width: 0; }
.wb-dl-item i { font-style: normal; color: var(--text-sub); font-size: 12px; }
.wb-dl-tip { margin: 10px 0 0; font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.wb-dl-empty { margin: 0; font-size: 13px; color: var(--text-sub); line-height: 1.7; }

.wtable { margin-top: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.wtable-grid { display: grid; grid-template-columns: 160px 200px 1fr; }
.wtable-head {
  background: var(--primary-light); color: var(--primary);
  font-size: 13px; font-weight: 600; padding: 10px 20px;
  /* 不用 sticky：容器 overflow:hidden 会使 sticky 表现异常（首词条被遮），
     词表按页浏览无长滚动需求 */
}
.wtable-row { padding: 10px 20px; border-top: 1px solid var(--border); align-items: baseline; }
.wtable-row:nth-child(even) { background: #FAFBFD; } /* head 是首子元素，even 落数据行 */
.wtable-row .w { font-weight: 600; color: var(--text); font-size: 14.5px; word-break: break-word; }
.wtable-row .p { color: #64748B; font-size: 12.5px; overflow-wrap: anywhere; } /* IPA 长串整体折行不逐字符 */
.wtable-row .m { color: var(--text-sub); font-size: 13.5px; line-height: 1.65; white-space: pre-line; }

.wpager { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px; }
.wpager .cur { background: var(--primary); color: #fff; pointer-events: none; }
.wpager .gap { color: var(--text-sub); padding: 0 2px; }
.wpager-info { font-size: 12.5px; color: var(--text-sub); }

/* ===== 移动端 ≤768：词条卡片化 ===== */
@media (max-width: 768px) {
  .words-hero { padding-top: 28px; }
  .words-hero h1 { font-size: 24px; }
  .wh-stats { gap: 14px; padding: 10px 18px; }
  .wh-stat b { font-size: 17px; }
  .wcat-pill { font-size: 12px; padding: 4px 11px; }
  .wfilter { padding: 12px 12px 8px; }
  .wfilter-q input { width: 100%; }
  .wfilter-row { align-items: stretch; }
  .wfilter-row .wfilter-btn { flex: 1; justify-content: center; }
  .wcat { padding: 16px 14px; }
  .wbooks { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wbook b { font-size: 13px; }

  .wb-head h1 { font-size: 20px; }
  /* 双栏降单列：下载卡提到词表上方（移动端下载优先） */
  .wb-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wb-aside { position: static; order: 0; }
  .wb-main { order: 1; }
  .wb-info-card { padding: 14px 16px; }
  .wtable { border-radius: var(--radius-sm); }
  /* 三栏折叠为两行卡片：行1=单词+音标，行2=释义通栏 */
  .wtable-grid { grid-template-columns: 1fr auto; }
  .wtable-head { display: none; }
  .wtable-row { padding: 10px 14px; }
  .wtable-row .w { font-size: 15px; }
  .wtable-row .p { text-align: right; max-width: 45%; }
  .wtable-row .m { grid-column: 1 / -1; margin-top: 3px; }
}
@media (max-width: 420px) {
  .wbooks { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .wb-layout { grid-template-columns: minmax(0, 1fr) 248px; gap: 14px; }
  .wb-aside { position: static; }
}