/* ===== 交互式填空学习模式（demo: kaoyan/story_1） ===== */

/* 工具栏 */
.lm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #f7f8fc;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  font-size: 14px;
  color: #2b2f3a;
}
.lm-modes { display: inline-flex; gap: 6px; }
.lm-mode {
  border: 1px solid #d4d9e6;
  background: #fff;
  color: #4a5066;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
}
.lm-mode:hover { border-color: #7c4dff; color: #7c4dff; }
.lm-mode.active {
  background: #7c4dff;
  border-color: #7c4dff;
  color: #fff;
  font-weight: 600;
}
.lm-tools { display: inline-flex; align-items: center; gap: 8px; }
.lm-tools button {
  border: 1px solid #d4d9e6;
  background: #fff;
  color: #4a5066;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.lm-tools button:hover { border-color: #7c4dff; color: #7c4dff; }
.lm-font { display: inline-flex; align-items: center; gap: 4px; }
.lm-font button {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid #d4d9e6; background: #fff;
  border-radius: 8px; cursor: pointer; font-weight: 700; color: #4a5066;
}
.lm-font #lm-font-val { min-width: 28px; text-align: center; font-size: 13px; color: #707a90; }
.lm-progress {
  margin-left: auto;
  font-size: 13px;
  color: #707a90;
  font-variant-numeric: tabular-nums;
}
.lm-progress b { color: #2e7d32; }
.lm-progress .lm-wrong { color: #c62828; }
.lm-nav { display: flex; gap: 10px; width: 100%; margin-top: 2px; }
.lm-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #4a5066;
  border: 1px solid #d4d9e6;
  background: #fff;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 13px;
}
.lm-nav a:hover { border-color: #7c4dff; color: #7c4dff; }
.lm-nav a.disabled { opacity: .4; pointer-events: none; }

/* 生词包裹 */
.lm-word { display: inline; }
.lm-en { color: #e91e63; font-weight: 600; cursor: pointer; }
.lm-cn { color: #2b2f3a; }

/* ===== 填空输入框 —— OS 原生手写风格（对标 linxiaoci.com .practice-input） ===== */
/*
 * 核心设计：填空框完全透明、无边框，高度=行高。
 * 用户用触控笔点击时 → 系统 IME 弹出手写面板 → 识别后文字直接落入填空框。
 * 看起来就像在纸上写字一样——没有框的痕迹。
 *
 * ★ 实现变更（Android 手写兼容）：
 *   由 <input type="text"> 改为 <div contenteditable="true">。
 *   Android WebView / Chrome 对 contenteditable 更倾向于唤起系统手写面板，
 *   而原生 <input> 只走标准软键盘 IME，手写可用性依赖用户 IME 实现。
 *   随之带来三处样式适配：
 *     1) div 默认 display:block，必须显式改为 inline-block 才能行内显示；
 *     2) contenteditable 没有 input 那样的内部横向滚动，故用 min-width + 自动增宽
 *        替代固定 width，避免长单词被裁剪；
 *     3) 空的 contenteditable 会塌陷成 0 高度，故用 min-height 兜底。
 */

/* 默认状态：透明融入行内 */
.lm-input {
  display: inline-block;                /* ★ div 默认 block，必须转行内块 */
  min-width: 5.5em;                     /* ★ 原 width:5.5em → 最小宽度，内容超出时自动增宽 */
  padding: 0 4px;
  margin: 0 1px;
  border: none !important;            /* ★ 无边框 */
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  background: transparent !important;   /* ★ 透明背景 */
  outline: none;
  transition: background .15s, box-shadow .15s;
  /* ★ 关键：高度=行高，完美对齐文字（min-height 防止空内容时塌陷） */
  min-height: 1.08em;
  line-height: 1.08em;
  vertical-align: baseline;
  /* ★ Android 手写兼容：纯文本编辑模式，禁止富文本片段进入，更易唤起手写面板 */
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-user-select: text;
  user-select: text;
  /* 保留用户输入的空格；超长内容换行而不是撑破段落 */
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left !important;            /* ★ 强制左对齐，防止父级 justify/center 继承覆盖 */
  text-indent: 0 !important;             /* ★ 防止首行缩进把文字推到中间 */
  padding-left: 0.5em !important;         /* ★ 左侧留一字格呼吸空间 */
  cursor: text;
}

/* placeholder 模拟：contenteditable 无 placeholder 属性，改用 data-placeholder + ::before */
.lm-input:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;                 /* 不拦截触控笔/点击，保证能正常聚焦 */
  -webkit-user-select: none;
  user-select: none;
}
/* 聚焦时隐藏占位文字，避免与光标/手写轨迹重叠（须写在 :empty 规则之后以覆盖之） */
.lm-input:focus::before {
  content: none;
}

/* 聚焦时：微妙的底色提示 */
.lm-input:focus {
  background: rgba(233,30,99,.06) !important;
  box-shadow: 0 1px 0 0 rgba(233,30,99,.25);
}

/* 隐藏英文模式（填英文）→ 淡粉色底（像 linxiaoci #f8dcea）*/
body.mode-hide-en .lm-input,
.app-shell.mode-hide-en .lm-input {
  color: #3b1f2b;
  background: rgba(248,220,234,.55) !important;
}
body.mode-hide-en .lm-input:focus,
.app-shell.mode-hide-en .lm-input:focus {
  background: rgba(248,220,234,.8) !important;
  box-shadow: 0 1px 0 0 rgba(220,123,171,.35);
}

/* 隐藏中文模式（填中文）→ 淡绿色底 + 隐藏中文释义文字 */
body.mode-hide-zn .lm-input,
.app-shell.mode-hide-zn .lm-input {
  color: #203820;
  background: rgba(217,242,215,.55) !important;
}
body.mode-hide-zn .lm-input:focus,
.app-shell.mode-hide-zn .lm-input:focus {
  background: rgba(217,242,215,.8) !important;
  box-shadow: 0 1px 0 0 rgba(121,191,122,.35);
}
/* ★ 真正隐藏中文释义 */
body.mode-hide-zn .lm-cn,
.app-shell.mode-hide-zn .lm-cn {
  display: none !important;
}

/* 正确答案 */
.lm-input.correct {
  background: rgba(200,230,201,.7) !important;
  color: #1b5e20;
  box-shadow: none;
}

/* 错误答案（手写模式下会被自动隐藏并重试） */
.lm-input.wrong {
  background: rgba(254,235,236,.7) !important;
  color: #b71c1c;
}

/* 眼睛图标 + 答案揭示 */
.lm-eye {
  cursor: pointer;
  margin: 0 1px 0 3px;
  font-size: .85em;
  opacity: .65;
  user-select: none;
}
.lm-eye:hover { opacity: 1; }
.lm-reveal {
  margin-left: 4px;
  font-size: .82em;
  color: #7c4dff;
  background: #f3eeff;
  padding: 0 6px;
  border-radius: 6px;
  vertical-align: middle;
}

/* ===== OS 原生手写增强（handwriting-input.js） ===== */
/* 不再需要 canvas / 浮动面板。
 * 现在完全依赖浏览器/OS 原生 IME 手写输入：
 *   - pen pointerType 检测 → 标记输入来源
 *   - 英文手写答错 → 自动重新聚焦重写
 *   - 无需额外 UI 元素
 */

/* 答题模式工具栏按钮（保留用于核对等功能）*/
.lm-hw-tools { margin-left: 4px; }
.lm-hw-tools button {
  border: 1px solid #d4d9e6;
  background: #fff;
  color: #4a5066;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
}
.lm-hw-tools button:hover { border-color: #7c4dff; color: #7c4dff; }
.lm-hw-tools #lm-hw-answer {
  border-color: #e91e63;
  background: #fce4ec;
  color: #c2185b;
  font-weight: 600;
}
.lm-hw-tools #lm-hw-answer.active {
  background: #e91e63;
  border-color: #e91e63;
  color: #fff;
  box-shadow: 0 2px 8px rgba(233,30,99,.35);
}

/* 移动端优化：输入框在小屏上稍小一点 */
@media (max-width: 768px) {
  .lm-input {
    min-height: .96em;
    line-height: .96em;
    font-size: .92em;
    min-width: 4em;
  }
}

/* ===== 以下规则由批量同步自标杆 kaoyan/story_1.html（学习模式增强）===== */
/* 即时反馈文字（正确/再想想） */
.lm-feedback { margin-left: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.lm-feedback.correct { color: #4caf50; }
.lm-feedback.wrong { color: #f44336; }

/* 章节计数器（上一章 / 下一章 之间）：当前序号 / 本分类总数 */
.lm-counter {
  margin: 0 4px;
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: #7b1fa2;
  white-space: nowrap;
}

/* 单词表顶部操作按钮：加入全部 / 删除全部（样式与"连播:关"一致：紫边、圆角、紫字） */
.vocab-top-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.add-all-btn, .remove-all-btn {
  flex: 1;
  padding: 6px 12px;
  border: 1.5px solid #ce93d8;
  background: rgba(255,255,255,0.7);
  color: #7b1fa2;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.add-all-btn:hover:not(:disabled), .remove-all-btn:hover:not(:disabled) {
  background: rgba(206,147,216,0.2);
}
.add-all-btn:disabled, .remove-all-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ===== content-protect:begin ===== */
/* 防复制盗用三重措施：A 精准锁选 / C 用户水印 / F 版权声明
 * 配套 JS：learning-mode.js → applyContentProtect()
 * 范围：仅作用于正文 .passage。顶部导航、工具栏、单词面板、设置面板一律不受影响。
 */

/* A —— 精准锁选：只锁正文，阻止拖选整段 */
.passage {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;          /* 为水印覆盖层提供定位上下文 */
}

/* A —— 放开：填空框（contenteditable）与查词卡必须可选中 / 可编辑。
 * 缺了这条，「隐藏英文」模式的 .lm-input 会因继承 user-select:none 而无法输入。 */
.passage .lm-input,
.passage .lm-input *,
.vocab-card,
.vocab-card * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* C —— 用户水印覆盖层。
 * 平铺采用 SVG data-URI 背景图（见 buildWatermarkDataUri），覆盖层内无任何文本节点，
 * 因此不会污染 passage.innerText，也就不会破坏生词本例句提取 lmExtractSentence()。
 * pointer-events:none 保证不拦截对 .lm-input 的点击与输入。 */
.content-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  background-repeat: repeat;
  -webkit-user-select: none;
  user-select: none;
}

/* F —— 版权声明（低调灰色小字，置于正文下方） */
.content-copyright {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #999;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  text-indent: 0;              /* 抵消 .passage 系列的首行缩进继承 */
  -webkit-user-select: none;
  user-select: none;
}
/* ===== content-protect:end ===== */

/* ===== word-card-popup:begin ===== */
/* 点击正文高亮词弹出的「单词本同款」浮层词卡。配套 JS：learning-mode.js → word-card-popup 模块。
 * 设计要点：
 *   - 视觉严格对齐 notebook.html 的 .word-card：淡粉渐变 #fff8f8→#fff0f5、圆角 16、
 *     粉边 #f8bbd0、单词蓝 #1a237e、词性紫 #7b1fa2、掌握度三色（绿 / 橙 / 红）；
 *   - 遮罩 position:fixed 挂在 <body> 上，flex 居中，不参与正文流，
 *     因此不与 .chapter-nav / .lm-toolbar 抢位置，也不受 .passage 的 user-select:none 影响；
 *   - z-index 取 99999：story 页内存在 z-index:10000 的固定元素，必须压过它；
 *   - 显隐用 opacity + visibility 而非 display，才能跑完 scale + fade 的浮现动画。
 */

/* 卡片常驻右下角（固定像素，不随 vh 波动），容器不拦截点击、仅卡片可交互 */
.wc-float-overlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  top: auto;
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
  z-index: 99999;
  -webkit-user-select: none;
  user-select: none;
}
.wc-float-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 卡片本体：小尺寸、居中浮现 */
.wc-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 280px;              /* 桌面端固定高度：切换单词时卡片尺寸始终一致 */
  max-height: 82vh;
  pointer-events: auto;       /* 卡片本身可交互，容器不拦截点击 */
  overflow: hidden;           /* 整体不滚动，释义区内部滚动 */
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8f8, #fff0f5);
  border: 1px solid #f8bbd0;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  text-indent: 0;                /* 抵消 .passage 系列的首行缩进继承 */
  outline: none;
  opacity: 0;
  transform: scale(.96);
  transition: transform .16s ease, opacity .16s ease;
}
.wc-float-overlay.is-open .wc-card {
  opacity: 1;
  transform: scale(1);
}

/* 头部：左 = 发音钮 + 单词 + 状态徽章，右 = 关闭 */
.wc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.wc-speak {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 2px solid #f8bbd0;
  border-radius: 50%;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-speak:hover { background: #fce4ec; transform: scale(1.1); }
.wc-word {
  font-size: 22px;
  font-weight: 700;
  color: #1a237e;
  word-break: break-word;
}
.wc-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.wc-badge-mastered { background: #e8f5e9; color: #2e7d32; }
.wc-badge-familiar { background: #fff3e0; color: #e65100; }
.wc-badge-unknown  { background: #ffebee; color: #c62828; }
.wc-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(248, 187, 208, .35);
  color: #c2185b;
  font-size: 18px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-close:hover { background: #f8bbd0; }

/* 音标行 */
.wc-phonetic {
  margin: 2px 0 6px;
  font-size: 12px;
  color: #999;
  word-break: break-word;
}

/* 释义区（沿用单词本 .vocab-pos-row 的排版）：占据卡片剩余高度并内部滚动 */
.wc-defs {
  margin-top: 2px;
  flex: 1 1 auto;             /* 吃掉除固定区块外的全部高度 */
  min-height: 55px;            /* 至少显示约3行中文释义，防止被其他区块挤压到不可见 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 头部/音标/按钮行/导航等固定区块不参与收缩，保证卡片整体高度恒定 */
.wc-card > *:not(.wc-defs) { flex-shrink: 0; }
.wc-pos-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}
.wc-pos {
  flex-shrink: 0;
  min-width: 32px;
  color: #7b1fa2;
  font-weight: 700;
  font-size: 13px;
  font-style: italic;
}
.wc-pos-defs {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.wc-pos-defs.meaning-only { font-size: 14px; }

/* 掌握度三按钮（已掌握 / 还不熟 / 不认识） */
.wc-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wc-status {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  color: #666;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wc-status:hover { transform: translateY(-1px); }
.wc-status.active { font-weight: 700; }
.wc-status.wc-mastered.active { background: #e8f5e9; border-color: #43a047; color: #2e7d32; }
.wc-status.wc-familiar.active { background: #fff3e0; border-color: #f57c00; color: #ef6c00; }
.wc-status.wc-unknown.active { background: #ffebee; border-color: #e53935; color: #c62828; }

/* 底部导航：上一个 / 计数 / 下一个 */
.wc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f8bbd0;
}
.wc-prev,
.wc-next {
  padding: 5px 12px;
  border: 1px solid #f8bbd0;
  border-radius: 999px;
  background: #fff;
  color: #c2185b;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.wc-prev:hover,
.wc-next:hover { background: #fce4ec; }
.wc-prev:active,
.wc-next:active { transform: scale(.96); }
.wc-count {
  font-size: 12px;
  color: #999;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 方案A：底部导航行合并「加词本」按钮，省出独立行高度给释义区。
   三按钮等宽（加词本略宽 1.3），去掉顶部边框/内边距，整体更紧凑 */
.wc-nav.combined {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
  flex-shrink: 0;
}
.wc-nav.combined .wc-prev,
.wc-nav.combined .wc-next {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid #f8bbd0;
  border-radius: 10px;
  background: #fff;
  color: #c2185b;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.wc-nav.combined .wc-prev:hover,
.wc-nav.combined .wc-next:hover { background: #fce4ec; }
.wc-nav.combined .wc-prev:active,
.wc-nav.combined .wc-next:active { transform: scale(.96); }

/* 手机端：固定像素高度（不随 vh 波动），保证所有区块（头/音标/释义/按钮/导航）可见；
   固定值让所有手机尺寸统一；max-height 防止在极小屏溢出 */
@media (max-width: 768px) {
  .wc-float-overlay {
    left: 16px;
    right: 16px;
  }
  .wc-card {
    width: calc(100vw - 32px);
    height: 230px;
    max-height: 36vh;
  }
}

/* 小屏适配：卡片更贴边、按钮更紧凑 */
@media (max-width: 380px) {
  .wc-card {
    width: calc(100vw - 32px);
    padding: 10px 12px;
  }
  .wc-word { font-size: 18px; }
  /* 掌握度按钮移动端样式已移除 */
  .wc-add-inline { padding: 5px 2px; font-size: 10.5px; }
  .wc-prev,
  .wc-next { padding: 4px 8px; font-size: 11px; }
}

/* 降低动效偏好：只关掉过渡时长，保留 transform */
@media (prefers-reduced-motion: reduce) {
  .wc-float-overlay,
  .wc-card {
    transition-duration: .01s;
  }
}
/* ===== word-card-popup:end ===== */

/* ===== word-card-popup:extras（v2：加入按钮 / 模式切换 / 右侧单词表加掌握度按钮） ===== */

/* 卡片底部「加词本」按钮（已并入 .wc-nav.combined 行，见上方） */
.wc-add-inline {
  flex: 1.3 1 0;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid #f8bbd0;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff0f5, #fce4ec);
  color: #c2185b;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.wc-add-inline:hover { background: #f8bbd0; }
.wc-add-inline:active { transform: scale(.98); }
.wc-add-inline.added {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
  cursor: default;
}

/* 卡片 / 词表 模式切换（底部居中药丸） */
.wc-mode-toggle {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #f8bbd0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  -webkit-user-select: none;
  user-select: none;
}
.wc-mode-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #888;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.wc-mode-btn:hover { color: #c2185b; }
.wc-mode-btn.active {
  background: linear-gradient(135deg, #e91e63, #ba68c8);
  color: #fff;
}

/* 覆盖各 story 页内联 .vocab-card 的 display:flex —— 加 flex-wrap 让按钮行在窄屏自动换行
 * 桌面端空间够时保持横排（🔊 内容 [✅🌗❌][+]）；手机端内容区独占整行，按钮换到下行 */
#vocab-panel .vocab-card {
  flex-wrap: wrap;
}
/* 内容区尽量占满剩余宽度 */
#vocab-panel .vocab-content {
  flex: 1 1 0;
  min-width: 200px;        /* 保证释义不会被压成窄条 */
}

/* 右侧单词表 .vocab-card 的掌握度三按钮 */
#vocab-panel .card-status-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
#vocab-panel .card-status-actions .cs-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#vocab-panel .card-status-actions .cs-btn:active { transform: scale(.95); }
#vocab-panel .card-status-actions .cs-btn.active { font-weight: 700; }
#vocab-panel .card-status-actions .cs-btn.active.cs-mastered { background: #e8f5e9; border-color: #43a047; color: #2e7d32; }
#vocab-panel .card-status-actions .cs-btn.active.cs-familiar { background: #fff3e0; border-color: #f57c00; color: #ef6c00; }
#vocab-panel .card-status-actions .cs-btn.active.cs-unknown { background: #ffebee; border-color: #e53935; color: #c62828; }

/* 单词卡片掌握度色条样式已移除 */

/* 双模式切换：卡片模式隐藏右侧单词表；词表模式隐藏浮动词卡 */
.wc-cardmode #vocab-panel { display: none !important; }
.wc-listmode .wc-float-overlay { display: none !important; }

/* 窄屏：切换按钮略缩、词表图标按钮更小 */
@media (max-width: 820px) {
  .wc-mode-btn { padding: 6px 10px; font-size: 12px; }
}