/* ============================================================
   26-dict.css —— 查词弹层 + 主页词典卡片 + 生词本
   复用 01-foundation.css 的设计变量（--card-bg / --primary / --border /
   --text-dark / --main-bg / --safe-top 等），暗色模式自动跟随。
   词典主色用 iOS 靛蓝 #5856d6，与蓝色天气卡片区分开。
   ============================================================ */

/* 长按取词时禁用系统「放大镜/选择菜单」，避免和长按查词打架 */
.lyrics-line, .lyrics-line-inner, .sub-line {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ================= 查词弹层 ================= */
.dict-pop {
  position: fixed;
  z-index: 4000;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card-bg, #fff);
  color: var(--text-dark, #1c1c1e);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 12px 14px 14px;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity .16s ease, transform .16s ease;
  overscroll-behavior: contain;
}
.dict-pop.is-in { opacity: 1; transform: translateY(0) scale(1); }

.dict-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dict-pop-titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.dict-pop-word { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; word-break: break-word; }
.dict-pop-ph { font-size: 14px; color: var(--input-placeholder, #8e8e93); font-family: "SF Pro Text", system-ui, sans-serif; }
.dict-pop-spk {
  border: none; background: rgba(88, 86, 214, 0.12); color: #5856d6;
  border-radius: 999px; width: 26px; height: 26px; font-size: 13px; line-height: 1;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.dict-pop-spk:active { transform: scale(0.9); }

.dict-pop-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dict-vocab-btn {
  border: 1px solid #5856d6; background: transparent; color: #5856d6;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 10px;
  cursor: pointer; white-space: nowrap;
}
.dict-vocab-btn.is-in { background: #5856d6; color: #fff; border-color: #5856d6; }
.dict-vocab-btn:active { transform: scale(0.96); }
.dict-pop-x {
  border: none; background: transparent; color: var(--input-placeholder, #8e8e93);
  font-size: 22px; line-height: 1; width: 26px; height: 26px; cursor: pointer; padding: 0;
}

.dict-pop-lemma {
  margin-top: 6px; font-size: 12px; color: var(--input-placeholder, #8e8e93);
  background: var(--main-bg, #f2f2f7); border-radius: 8px; padding: 5px 8px;
}
.dict-pop-lemma b { color: var(--text-dark); }

.dict-pop-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dict-badge { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 7px; line-height: 1.3; }
.dict-star { color: #ff9f0a; background: rgba(255, 159, 10, 0.14); letter-spacing: 1px; }
.dict-oxford { color: #34c759; background: rgba(52, 199, 89, 0.14); }
.dict-tag { color: #5856d6; background: rgba(88, 86, 214, 0.12); }

.dict-sec { margin-top: 12px; }
.dict-sec-t { font-size: 11px; font-weight: 700; color: var(--input-placeholder, #8e8e93); letter-spacing: 0.4px; margin-bottom: 5px; text-transform: uppercase; }
.dict-mean { font-size: 15px; line-height: 1.5; color: var(--text-dark); margin: 2px 0; }
.dict-mean.dict-en { font-size: 13.5px; color: var(--text-dark); opacity: 0.82; }

.dict-forms { display: flex; flex-wrap: wrap; gap: 6px; }
.dict-form {
  border: 1px solid var(--border, #e5e5ea); background: var(--main-bg, #f2f2f7);
  color: var(--text-dark); border-radius: 8px; padding: 4px 8px; font-size: 12.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.dict-form-l { font-size: 10px; color: var(--input-placeholder, #8e8e93); }
.dict-form:active { transform: scale(0.96); }

.dict-freq { margin-top: 10px; font-size: 12px; color: var(--input-placeholder, #8e8e93); }

.dict-examples .dict-ex { margin: 6px 0; padding-left: 9px; border-left: 2px solid rgba(88, 86, 214, 0.35); }
.dict-ex-en { font-size: 13.5px; line-height: 1.45; color: var(--text-dark); }
.dict-ex-cn { font-size: 12.5px; line-height: 1.4; color: var(--input-placeholder, #8e8e93); margin-top: 1px; }
.dict-ex-loading { font-size: 12px; color: var(--input-placeholder, #8e8e93); }

.dict-pop-loading, .dict-pop-empty { padding: 14px 2px 6px; font-size: 14px; color: var(--input-placeholder, #8e8e93); }
.dict-pop-empty b { color: var(--text-dark); }

/* ================= 主页词典卡片 ================= */
.home-dict-card {
  margin: 10px var(--edge-pad) 2px var(--edge-pad);
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.10), rgba(88, 86, 214, 0.02));
  border: 1px solid rgba(88, 86, 214, 0.16);
}
.home-dict-card.is-hidden { display: none; }

.dict-card-top { display: flex; align-items: center; justify-content: space-between; }
.dict-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-dark); }
.dict-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: #5856d6; color: #fff; font-weight: 800; font-size: 13px;
}

.dict-search { display: flex; gap: 8px; margin-top: 10px; }
.dict-search-input {
  flex: 1; min-width: 0; height: 38px; border-radius: 10px;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--card-bg, #fff); color: var(--text-dark);
  padding: 0 12px; font-size: 15px; outline: none;
}
.dict-search-input::placeholder { color: var(--input-placeholder, #8e8e93); }
.dict-search-input:focus { border-color: #5856d6; }
.dict-search-btn {
  flex-shrink: 0; height: 38px; padding: 0 16px; border: none; border-radius: 10px;
  background: #5856d6; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.dict-search-btn:active { transform: scale(0.97); }

.dict-vocab { margin-top: 12px; }
.dict-vocab-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dict-vocab-title { font-size: 12px; font-weight: 600; color: var(--input-placeholder, #8e8e93); }
.dict-vocab-title b { color: #5856d6; }
.dict-vocab-empty { font-size: 12.5px; color: var(--input-placeholder, #8e8e93); line-height: 1.5; padding: 4px 0; }

.dict-vocab-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dict-v-row {
  position: relative; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e5ea); border-radius: 10px;
  padding: 8px 34px 8px 10px; cursor: pointer;
}
.dict-v-row:active { background: var(--main-bg, #f2f2f7); }
.dict-v-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dict-v-word { font-size: 15px; font-weight: 600; color: var(--text-dark); }
.dict-v-ph { font-size: 12px; color: var(--input-placeholder, #8e8e93); }
.dict-v-trans { font-size: 12.5px; color: var(--input-placeholder, #8e8e93); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dict-v-del {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--input-placeholder, #8e8e93); font-size: 18px; line-height: 1; cursor: pointer;
}
.dict-v-del:active { color: var(--tab-active, #fa2d48); }

/* 暗色微调 */
@media (prefers-color-scheme: dark) {
  .home-dict-card {
    background: linear-gradient(135deg, rgba(94, 92, 230, 0.18), rgba(94, 92, 230, 0.05));
    border-color: rgba(94, 92, 230, 0.24);
  }
  .dict-pop { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
  .dict-pop-spk { background: rgba(94, 92, 230, 0.24); color: #7d7aff; }
  .dict-vocab-btn { color: #7d7aff; border-color: #5e5ce6; }
  .dict-vocab-btn.is-in { background: #5e5ce6; color: #fff; }
  .dict-tag { color: #7d7aff; background: rgba(94, 92, 230, 0.20); }
  .dict-card-ic, .dict-search-btn { background: #5e5ce6; }
  .dict-search-input:focus, .dict-vocab-title b, .dict-v-word ~ .dict-v-ph { border-color: #5e5ce6; }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .dict-pop { transition: opacity .12s ease; transform: none; }
  .dict-pop.is-in { transform: none; }
}

/* ============================================================
   ★ v5.3.0 独立「查词」Tab（#view-dict）
   —— 默认不显示在底部标签栏，可在「我的 → 标签栏 → 查词」打开。
   复用 .view-scroll / .common-header 的整站规格，词条部分复用上面
   弹层的 .dict-pop-* / .dict-sec / .dict-mean 等类，保证两处显示一致。
   ============================================================ */
.dict-page {
  padding: 0 var(--edge-pad, 16px) calc(120px + env(safe-area-inset-bottom, 0px));
}

/* 顶部搜索条 */
.dict-page-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 14px;
}
/* ★ v5.3.7 与「搜索」tab 的搜索框统一为 Apple 式玻璃胶囊：
   全圆(radius:999px) + 玻璃底 + 无彩色 focus 描边。
   原来是 12px 圆角方块 + 实色底 + 紫色 focus 描边 —— 彩色 focus ring 是
   Material/Bootstrap 的语言，iOS 从不这么干。查词按钮跟着变全圆，成对。
   高度 42→44：iOS 触摸目标下限。 */
.dict-page-input {
  flex: 1; min-width: 0;
  height: 44px;
  padding: 0 16px;
  font-size: 16px;                 /* ≥16px：iOS 聚焦时不会自动放大页面 */
  color: var(--text-dark, #1c1c1e);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 0.5px solid var(--hairline);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s;
}
@media (prefers-color-scheme: dark) {
  .dict-page-input { background: rgba(44, 44, 46, 0.55); }
}
.dict-page-input::placeholder { color: var(--input-placeholder, #8e8e93); }
/* focus 只加深底色，不加彩色描边 */
.dict-page-input:focus { background: rgba(255, 255, 255, 0.72); }
@media (prefers-color-scheme: dark) {
  .dict-page-input:focus { background: rgba(44, 44, 46, 0.72); }
}
.dict-page-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  font-size: 15px; font-weight: 600;
  color: #fff;
  background: #5856d6;             /* 词典的品牌紫保留 —— 它是"动作"，该有实色 */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.dict-page-btn:active { transform: scale(0.96); opacity: 0.9; }

/* 词条结果区（与弹层同款排版，去掉浮层的阴影/定位） */
.dict-page-result {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 16px;
  padding: 14px 14px 16px;
  margin-bottom: 18px;
}
.dict-page-result:empty { display: none; }
.dict-page-result .dict-pop-word { font-size: 26px; }

/* 生词本区块 */
.dict-page-vocab-head {
  display: flex; align-items: center;   /* v5.3.5: 右侧「清空」按钮已移除，无需 space-between */
  margin: 0 2px 8px;
}
.dict-page-vocab-title { font-size: 15px; font-weight: 700; color: var(--text-dark, #1c1c1e); }
.dict-page-vocab-title b { color: #5856d6; }
/* ★ v5.3.5: .dict-page-clear（清空生词本按钮）已移除 */
.dict-page-vocab-list {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 16px;
  padding: 6px 12px;
}

/* ============================================================
   ★ v5.4 词条排版升级
   目标：把「一坨灰字」变成有层次的词典排版。
   规则：中文释义 = 正文字重，英文 = 斜体衬线（一眼区分中英），
        词性 = 彩色小标签（按词类分色），例句关键词 = 高亮。
   放在文件末尾，靠层叠顺序覆盖上面的基础样式。
   ============================================================ */
:root {
  --d-indigo: #5856d6;
  --d-noun:   #0a84ff;   /* 名词类：蓝 */
  --d-verb:   #ff9500;   /* 动词类：橙 */
  --d-adj:    #af52de;   /* 形容词：紫 */
  --d-adv:    #ff375f;   /* 副词：  玫红 */
  --d-other:  #8e8e93;   /* 介词/连词/其它：灰 */
  --d-serif:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --d-indigo: #7d7aff;
    --d-noun:   #64d2ff;
    --d-verb:   #ffd60a;
    --d-adj:    #da8fff;
    --d-adv:    #ff6482;
    --d-other:  #98989d;
  }
}

/* —— 头部：单词标题用渐变字，音标用斜体等宽 —— */
.dict-pop-word,
.dict-page-result .dict-pop-word {
  background: linear-gradient(135deg, var(--text-dark) 30%, var(--d-indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dict-pop-ph {
  font-style: italic;
  color: var(--d-indigo);
  opacity: 0.9;
  letter-spacing: 0.2px;
}
/* 弹层顶部一条细渐变线，作为词典的视觉签名 */
.dict-pop { position: fixed; }
.dict-pop::before,
.dict-page-result::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  margin: -2px 0 10px;
  background: linear-gradient(90deg, var(--d-indigo), var(--d-adj) 55%, transparent);
  opacity: 0.75;
}

/* —— 词性彩色标签 —— */
.dict-pos {
  flex-shrink: 0;
  display: inline-block;
  min-width: 30px;
  margin-right: 7px;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: var(--d-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  vertical-align: 1px;
  color: var(--d-other);
  background: rgba(142, 142, 147, 0.14);
}
.dict-pos-n   { color: var(--d-noun); background: rgba(10, 132, 255, 0.13); }
.dict-pos-v   { color: var(--d-verb); background: rgba(255, 149, 0, 0.15); }
.dict-pos-adj { color: var(--d-adj);  background: rgba(175, 82, 222, 0.13); }
.dict-pos-adv { color: var(--d-adv);  background: rgba(255, 55, 95, 0.12); }

/* —— 释义行：词性挂在左边，义项用彩色间隔点分开 —— */
.dict-mean {
  display: flex;
  align-items: flex-start;
  margin: 5px 0;
  font-size: 15px;
  line-height: 1.55;
}
.dict-mean-t { flex: 1; min-width: 0; }
.dict-dot {
  font-style: normal;
  color: var(--d-indigo);
  opacity: 0.55;
  margin: 0 5px;
}
/* 英文释义：斜体衬线，和中文释义在视觉上彻底分开 */
.dict-mean.dict-en {
  font-family: var(--d-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.9;
}
.dict-mean.dict-en .dict-pos { font-size: 11.5px; }

/* —— 小节标题：前面加一根彩色短竖条 —— */
.dict-sec-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
}
.dict-sec-t::before {
  content: "";
  width: 3px; height: 11px;
  border-radius: 2px;
  background: var(--d-indigo);
  opacity: 0.8;
}

/* —— 例句：斜体衬线 + 关键词高亮 —— */
.dict-examples .dict-ex {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--d-indigo), rgba(88, 86, 214, 0.1)) 1;
  padding-left: 10px;
  margin: 8px 0;
}
.dict-ex-en {
  font-family: var(--d-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
}
.dict-ex-kw {
  font-weight: 700;
  font-style: italic;
  color: var(--d-indigo);
  background: linear-gradient(transparent 62%, rgba(88, 86, 214, 0.22) 62%);
  padding: 0 1px;
}
.dict-ex-cn { opacity: 0.85; }

/* —— 徽标 / 词形 / 词频 微调 —— */
.dict-star { letter-spacing: 1.5px; font-size: 11.5px; }
.dict-tag  { color: var(--d-indigo); background: rgba(88, 86, 214, 0.12); }
.dict-form-l {
  font-family: var(--d-serif);
  font-style: italic;
  color: var(--d-indigo);
  opacity: 0.85;
}
.dict-freq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  opacity: 0.85;
}
.dict-pop-lemma b { color: var(--d-indigo); }

/* ============================================================
   ★ v5.4 词典 Tab：生词本放大，占满页面剩余空间
   （查询结果卡片被清空后 :empty 自动隐藏，空间全给生词本）
   ============================================================ */
.dict-page-vocab-head { margin: 4px 2px 10px; }
.dict-page-vocab-title { font-size: 17px; }

.dict-page-vocab-list {
  padding: 8px;
  max-height: none;          /* 覆盖 .dict-vocab-list 的 240px 限制 */
  overflow: visible;
  gap: 8px;
}
.dict-page-vocab-list .dict-v-row {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--main-bg, #f2f2f7);
  border-color: transparent;
  transition: transform .12s ease;
}
.dict-page-vocab-list .dict-v-row:active { transform: scale(0.985); }
.dict-page-vocab-list .dict-v-word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.dict-page-vocab-list .dict-v-ph {
  font-style: italic;
  color: var(--d-indigo);
  opacity: 0.85;
  font-size: 12.5px;
}
.dict-page-vocab-list .dict-v-trans {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dark);
  opacity: 0.75;
  white-space: normal;                /* 允许换行，不再一行截断 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dict-page-vocab-list .dict-v-trans .dict-pos { margin-right: 6px; }

/* 行内工具：朗读 + 删除 */
.dict-v-tools {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.dict-v-spk {
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(88, 86, 214, 0.12);
  color: var(--d-indigo);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.dict-v-spk:active { transform: scale(0.9); }
.dict-v-del {
  position: static;               /* 覆盖上面的绝对定位，改由 .dict-v-tools 排布 */
  transform: none;
  width: 26px; height: 26px;
  font-size: 19px;
}
.dict-v-del:active { transform: none; color: var(--tab-active, #fa2d48); }
.dict-page-vocab-list .dict-v-row { padding-right: 66px; }

/* 空生词本时的提示更松弛一点 */
.dict-page-vocab-list .dict-vocab-empty { padding: 14px 8px; font-size: 13px; }