/* =========================================================
   畅畅背单词 · 词库列表页 (vocab.css)
   ---------------------------------------------------------
   只放 vocab.html 专属的东西：工具栏、5 列单词表、等级徽章、
   状态栏、词条详情弹窗。
   导航 / 卡片 / 按钮 / 弹窗骨架 / 表单 / 提示 都在 base.css。
   ========================================================= */

/* ---------------------------------------------------------
   1. 工具栏
   --------------------------------------------------------- */
.toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
}

.toolbar-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

.book-select {
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
  min-width: 220px;
  font-family: inherit;
}

.book-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.12);
}

/* ---------------------------------------------------------
   2. 操作卡片区
   --------------------------------------------------------- */
.toolbar-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.action-card {
  background: #fafdfa;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
}

.button-row-distributed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.button-row-distributed.is-end {
  justify-content: flex-end;
}

/* 批量按钮：文案固定、禁止换行，避免勾选时宽度抖动 */
#btnBatchKill,
#btnBatchDelete {
  white-space: nowrap;
}

/* 补全进度文字 */
.enrich-progress {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 2px;
}

/* ---------------------------------------------------------
   2.5 批量补全进度弹窗
   --------------------------------------------------------- */
.enrich-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enrich-summary {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.6;
}

.enrich-summary strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #15803d;
}

/* 进度条 */
.enrich-bar {
  height: 10px;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}

.enrich-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #66bb6a, #43a047);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.enrich-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.enrich-stats strong {
  font-weight: 900;
  color: var(--text-primary);
}

/* 运行期间锁住整页：只有进度弹窗可交互 */
body.is-busy {
  cursor: progress;
}

body.is-busy .header,
body.is-busy .main-container {
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
  filter: grayscale(25%);
}

/* ---------------------------------------------------------
   3. 单词表（6 列 Grid）
   ---------------------------------------------------------
   勾选 / 单词 / 音标 / 释义 / 状态 / 操作
   音标与释义各自独立成列，一个词性一行，行高自适应。
   --------------------------------------------------------- */
.word-grid-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.table-grid-row {
  display: grid;
  /* 三个文字列（单词 / 音标 / 释义）等宽分配剩余空间，表头间距因此一致。
     状态列加宽到 186px，保证「⏰ 时间 ⏳ 排队待测」这类第二行完整显示不截断。 */
  grid-template-columns:
    34px                            /* 勾选 */
    minmax(90px, 1fr)               /* 单词 */
    minmax(112px, 1fr)              /* 音标 */
    minmax(130px, 1fr)              /* 释义 */
    186px                           /* 状态 */
    128px;                          /* 操作 */
  gap: 14px;
  align-items: center;      /* 行内所有格子垂直居中 */
  padding: 10px 16px;
}

/* 表头：与数据行同一套列宽 / 内边距 / 盒子模型，
   文字统一左对齐 —— 这样标题与下面内容的起点必然在同一条竖线上。
   首列勾选与末列操作跟随数据行的对齐方式。 */
.table-header {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color);
  padding: 0 0 8px 0;
  align-items: center;
}

.table-header > * {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  min-width: 0;
  padding: 0;
}

.table-header > .cell-check {
  justify-content: flex-start;
}

/* 「操作」标题：右对齐后往左推一段，落在 ⚡ 按钮正上方。
   三按钮组宽约 108px、⚡ 宽 30px，所以标题右边缘相对列右边缘内缩约 78px。 */
.table-header > .cell-actions {
  justify-content: flex-end;
  padding-right: 78px;
}

/* 数据行：整行垂直居中，行高一致 */
.word-row {
  background: #ffffff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  transition: all 0.15s ease;
  align-items: center;
}

.word-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
}

/* 每个格子内部再垂直居中一次，保证单行内容也在格子中间。
   注意：格子本身不设 padding，否则会和表头错位。 */
.word-row > .cell-check,
.word-row > .cell-word,
.word-row > .cell-phonetic,
.word-row > .cell-trans,
.word-row > .cell-status,
.word-row > .cell-actions {
  display: flex;
  align-items: center;
  min-height: 40px;
  min-width: 0;
  padding: 0;
}

.word-row > .cell-word,
.word-row > .cell-status {
  justify-content: flex-start;
}

/* 操作按钮右对齐 —— 标题也是右对齐，两者贴同一右边缘 */
.word-row > .cell-actions {
  justify-content: flex-end;
}

/* 空行框架（末尾的「+ 新增」提示行）
   注意：它没有 .word-row 类，所以必须单独写格内对齐规则，
   否则操作列会保持默认左对齐，与数据行（右对齐）错位。 */
.add-row-blank {
  background: #fafdfa;
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-md);
  min-height: 64px;
}

.add-row-blank > .cell-check,
.add-row-blank > .cell-word,
.add-row-blank > .cell-phonetic,
.add-row-blank > .cell-trans,
.add-row-blank > .cell-status,
.add-row-blank > .cell-actions {
  display: flex;
  align-items: center;
  min-height: 40px;
  min-width: 0;
  padding: 0;
}

.add-row-blank > .cell-actions {
  justify-content: flex-end;
}

/* ---------------------------------------------------------
   4. 单元格内容
   --------------------------------------------------------- */
.col-word {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.35;
  word-break: break-word;
}

.col-word:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 4.1 音标列 / 4.2 释义列（共用同一套行结构） --- */
.cell-phonetic,
.cell-trans {
  min-width: 0;
  width: 100%;
}

/* 多行容器：整块在格子里垂直居中；最多显示 2 行 */
.col-lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

/* 单行：词性按自身宽度占位 + 内容撑满剩余空间，两者起点对齐 */
.col-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.5;
}

/* 单行变体：横跨整行，内容居中（用于三行及以上的省略号） */
.col-line.is-solo {
  display: flex;
  justify-content: center;
}

/* 省略号行 */
.col-line-more {
  font-size: 13px;
  font-weight: 800;
  color: var(--neutral-400);
  letter-spacing: 2px;
  line-height: 1.5;
}

/* 词性标签列：固定格宽 —— 必须容得下最长的标准词性缩写。
   实测标准词性长度：modal.(6) prep./conj./pron./abbr.(5) adj./adv./num./art./int./phr./aux.(4) vt./vi.(3) n.(2)
   所以按 6 个等宽字符 + 胶囊内边距给 42px，保证所有行内容起点严格对齐。 */
.col-line-pos {
  flex: 0 0 42px;
  line-height: 1.5;
  white-space: nowrap;
}

/* 胶囊：放在固定格宽里，尺寸随内容，看起来紧凑好读 */
.col-line-pos > span {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  color: #065f46;
  background: #d1fae5;
  border-radius: 3px;
  padding: 0 5px;
}

/* 释义列的词性用蓝色底，区分两列 */
.cell-trans .col-line-pos > span {
  color: #2563eb;
  background: #eff6ff;
}

/* 行内容：单行，超出省略号。
   左边留一点呼吸空间，避免音标紧贴词性看不清。 */
.col-line-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* 音标正文：专用 IPA 字体 + 绿色，字距略放宽，符号不粘连。
   ⚠️ font-weight 必须是 400 或 700 —— 这两个是 Charis SIL 实际提供的字重。
   写 600 会让浏览器用 400 合成加粗（把笔画涂抹加粗），
   小符号如 ə ʃ ˈ 会糊在一起，正是「音标看不清」的主因。 */
.col-line-text.is-ipa {
  font-family: var(--font-ipa);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #047857;
}

/* 占位符（无音标 / 无释义） */
.col-lines.is-empty {
  color: var(--neutral-300);
  font-style: italic;
  font-size: 13px;
}

.col-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* ---------------------------------------------------------
   5. 状态栏
   ---------------------------------------------------------
   两行结构，整块在格子里垂直居中，两行左边界严格对齐：
     第一行：等级数字框 + 等级文字 —— 主信息，字号大、颜色深
     第二行：时间 + 状态 —— 次要信息，字号小、颜色淡
   --------------------------------------------------------- */
.status-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

/* 第一行：等级。
   结构是「数字框 + 等级文字」一组靠左，图标单独靠右，
   中间的空隙把图标与汉字明显拉开（种子/树苗/花朵等图标都不再贴字）。 */
.status-line-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  padding: 1px 0;
}

/* 图标由 JS 拆成独立元素，这里让它独占右侧位置 */
.status-line-1 .status-icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  /* 不再用 margin 挤向文字，位置由 space-between 决定 */
}

.level-num-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--neutral-300);
  border-radius: 5px;
  background-color: var(--neutral-50);
  color: var(--neutral-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  box-sizing: border-box;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}

.level-text-label {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

/* 第二行：时间 + 状态。
   字号从 10.5px 提到 11.5px（太小看不清），
   配合上方加宽的状态列，保证整行完整显示不被省略。 */
.status-line-2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 1px;      /* 与数字框边框对齐，视觉更齐 */
  font-size: 11.5px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
}

.status-sub-text {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 等级色彩主题 --- */
.status-theme-error .level-num-box   { background-color: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.status-theme-error .level-text-label { color: #dc2626; }

.status-theme-warning .level-num-box   { background-color: #fff7ed; border-color: #fdba74; color: #ea580c; }
.status-theme-warning .level-text-label { color: #ea580c; }

.status-theme-new .level-num-box   { background-color: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.status-theme-new .level-text-label { color: #1d4ed8; }

.status-theme-review .level-num-box   { background-color: #faf5ff; border-color: #d8b4fe; color: #9333ea; }
.status-theme-review .level-text-label { color: #7e22ce; }

.status-theme-mastered .level-num-box   { background-color: #f0fdf4; border-color: #86efac; color: #16a34a; }
.status-theme-mastered .level-text-label { color: #15803d; }

/* ---------------------------------------------------------
   6. 词条学习弹窗
   ---------------------------------------------------------
   用途：点开词条后「学习单词」用，不是管理界面。
   结构：单词 → 音标（旁边 🔊 可点朗读）→ 释义 → 详解
   --------------------------------------------------------- */

/* --- 6.0 后台补全时的忙碌提示条（拉取期间禁止关闭弹窗） --- */
.detail-busy {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin-bottom: 14px;
}

.detail-busy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
}

.detail-busy-text {
  flex: 1;
  min-width: 0;
}

/* 旋转指示器 */
.detail-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #86efac;
  border-top-color: #15803d;
  border-radius: 50%;
  animation: detail-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes detail-spin {
  to { transform: rotate(360deg); }
}

/* 不确定进度条：来回滑动，表示「后台在干活」 */
.detail-busy-bar {
  margin-top: 9px;
  height: 4px;
  background: #dcfce7;
  border-radius: 999px;
  overflow: hidden;
}

.detail-busy-bar > i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #86efac, #16a34a, #86efac);
  border-radius: 999px;
  animation: detail-slide 1.1s ease-in-out infinite;
}

@keyframes detail-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* 关闭按钮的禁用态 */
.modal-close-btn:disabled,
.modal-close-btn.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  background: none;
}

/* --- 6.1 头部：单词 + 喇叭 + 音标 --- */
.detail-hero {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 4px;
}

/* 单词与喇叭同一行：喇叭紧跟在单词右侧，不再单独占一行 */
.detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.detail-word {
  font-size: 34px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  word-break: break-word;
  letter-spacing: -0.5px;
  min-width: 0;
}

/* 音标栅格：定宽 5 列，音标不足 5 个时后面留空，保证各行对齐美观 */
.detail-phonetic-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}

/* 单个音标胶囊。
   字重固定 400 —— Charis SIL 只加载 400/700，写 600 会合成加粗糊字。 */
.detail-phonetic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  font-family: var(--font-ipa);
  font-size: 14px;
  font-weight: 400;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
}

/* 胶囊里的词性小标签，如 n. all. */
.detail-phonetic-pos {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 800;
  color: #047857;
  background: #d1fae5;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.5;
}

/* 音标文本：单行，超长用省略号；用 IPA 专用字体避免符号粘连。
   字重固定 400（Charis SIL 只有 400/700，用 600 会触发合成加粗而糊字）。 */
.detail-phonetic-text {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.detail-phonetic-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--neutral-400);
  font-style: italic;
}

/* 喇叭按钮：紧凑圆形，跟随单词同行 */
.detail-speaker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  background: var(--primary-light);
  border: 1.5px solid #a5d6a7;
  transition: all 0.15s ease;
  flex: 0 0 auto;
}

.detail-speaker:hover {
  background: #c8e6c9;
  transform: scale(1.06);
}

.detail-speaker:active {
  transform: scale(0.96);
}

.detail-speaker.is-playing {
  background: var(--primary);
  border-color: var(--primary);
  animation: speaker-pulse 1s ease-in-out infinite;
}

.detail-speaker.is-loading {
  cursor: progress;
  opacity: 0.7;
}

@keyframes speaker-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* --- 6.2 区块标题 --- */
.detail-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin: 20px 0 10px 0;
}

/* --- 6.3 释义列表 --- */
.detail-meaning-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 释义项：词性 + 释义两列，长释义最多两行后用省略号 */
.detail-meaning-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
}

.detail-meaning-pos {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 7px;
  border-radius: 4px;
  line-height: 1.6;
}

/* 最多两行，超出省略号 */
.detail-meaning-text {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* --- 6.4 详解区 --- */
.detail-rich-content {
  background: #fafdfa;
  border: 1.5px dashed var(--neutral-300);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--neutral-700);
  line-height: 1.75;
  min-height: 72px;
  /* ⚠️ 详细释义是**纯文本多行**（英美音标 / 分词性 / 例句 / 变形），
     必须 pre-wrap 才保留换行与缩进；写不下就**出滚动条**（用户要求）。 */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow-y: auto;
}

/* 滚动条窄一点，不破坏弹窗观感 */
.detail-rich-content::-webkit-scrollbar { width: 8px; }
.detail-rich-content::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 4px;
}
.detail-rich-content::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

.detail-explain-empty {
  color: var(--neutral-400);
  font-size: 13px;
  line-height: 1.8;
}

/* ---------------------------------------------------------
   7. 响应式
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .table-grid-row {
    grid-template-columns: 30px minmax(110px, 1.4fr) minmax(140px, 2fr) 150px 100px;
    gap: 8px;
    padding: 10px;
  }
}

@media (max-width: 700px) {
  .table-grid-row {
    grid-template-columns: 30px 1fr auto;
    grid-template-areas:
      "check word   actions"
      "check trans  actions"
      "check status actions";
    row-gap: 6px;
  }
  .table-grid-row > .cell-check   { grid-area: check; }
  .table-grid-row > .cell-word    { grid-area: word; }
  .table-grid-row > .cell-trans   { grid-area: trans; }
  .table-grid-row > .cell-status  { grid-area: status; }
  .table-grid-row > .cell-actions { grid-area: actions; }
  .table-header { display: none; }

  /* 音标区：窄屏改为 3 列 */
  .detail-phonetic-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-word { font-size: 28px; }
}

@media (max-width: 460px) {
  /* 更窄时 2 列，保证音标不被挤变形 */
  .detail-phonetic-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}