/* ============================================================
   青鸟乐学网 · 模块视觉层
   适用：成语(chengyu) / 词语(ciyu) / 语文(yuwen) / 游戏(youxi)
   依赖：app.css（设计变量 :root）、app2.css
   说明：本文件只做「看得见的美化」，不改任何交互逻辑；
         所有类名统一以 mo- / cy- / gt- / gm- / quiz- 前缀，避免与全站冲突。
   ============================================================ */

/* ------------------------------------------------------------
   1. 模块主题色板
   每个模块一个 class 挂在最外层容器上，内部所有 mo-* 组件
   自动继承该模块的主色（--mo-a 深 / --mo-b 浅 / --mo-bg 底色 / --mo-line 描边）
   ------------------------------------------------------------ */
.mo     { --mo-a:#1A5CBE; --mo-b:#4C8DE8; --mo-bg:#EFF5FD; --mo-line:#D7E6FA; }
.mo-cy  { --mo-a:#C0392B; --mo-b:#EE7B3D; --mo-bg:#FDF1EC; --mo-line:#F8D9CB; }
.mo-cyu { --mo-a:#0B7285; --mo-b:#22A6B3; --mo-bg:#EAF7F8; --mo-line:#C6E8EC; }
.mo-yw  { --mo-a:#364FC7; --mo-b:#5C7CFA; --mo-bg:#EEF1FE; --mo-line:#D8DEFB; }
.mo-yx  { --mo-a:#6741D9; --mo-b:#9C7BFA; --mo-bg:#F1ECFE; --mo-line:#DED4FB; }
.mo-en  { --mo-a:#C2185B; --mo-b:#E8518A; --mo-bg:#FCEAF1; --mo-line:#F6CFE0; }

/* ------------------------------------------------------------
   2. 模块页头（Hero）
   渐变底 + 光晕 + 大号图标徽章 + 标题/副标题/统计/动作条
   ------------------------------------------------------------ */
.mo-hero {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 28px 30px;
  background: linear-gradient(120deg, var(--mo-a) 0%, var(--mo-b) 100%);
  color: #fff; display: flex; align-items: center; gap: 22px;
  box-shadow: 0 12px 30px rgba(16, 28, 48, .18);
}
/* 右上角柔光 */
.mo-hero::after {
  content: ""; position: absolute; right: -70px; top: -80px; width: 280px; height: 280px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,0) 68%);
}
/* 右下角大号 Unicode 图标水印（纯装饰） */
.mo-hero-mark {
  position: absolute; right: 22px; bottom: -26px;
  font-size: 132px; line-height: 1; opacity: .15;
  pointer-events: none; user-select: none;
}
.mo-ico {
  width: 68px; height: 68px; flex: none; border-radius: 18px;
  display: grid; place-items: center; font-size: 33px; line-height: 1;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.mo-hero-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.mo-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.mo-title { font-size: 29px; line-height: 1.22; color: #fff; letter-spacing: -.01em; }
.mo-title small {
  display: block; font-size: 14.5px; font-weight: 500; letter-spacing: 0;
  color: rgba(255,255,255,.85); margin-top: 7px;
}
.mo-sub {
  color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.75;
  margin-top: 11px; max-width: 660px;
}
.mo-sub b { color: #fff; }
.mo-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.mo-stats > div { display: flex; flex-direction: column; }
.mo-stats strong {
  font-size: 23px; font-weight: 800; color: #fff;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.mo-stats span { font-size: 12px; color: rgba(255,255,255,.74); margin-top: 2px; }

/* Hero 内的动作按钮 */
.mo-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; z-index: 1; }
.mo-act {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.mo-act:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.mo-act.solid { background: #fff; color: var(--mo-a); border-color: #fff; }
.mo-act.solid:hover { box-shadow: 0 8px 20px rgba(0,0,0,.18); background: #fff; }

/* ------------------------------------------------------------
   4. 入口磁贴（模块内二级入口）
   ------------------------------------------------------------ */
.mo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.mo-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mo-line); }
.mo-tile .ti {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: var(--mo-bg); border: 1px solid var(--mo-line);
}
.mo-tile .tb { flex: 1 1 auto; min-width: 0; }
.mo-tile .mt-n { display: block; font-size: 15.5px; font-weight: 700; color: var(--c-ink); }
.mo-tile .mt-d { display: block; font-size: 12.5px; color: var(--c-ink-3); margin-top: 3px; line-height: 1.6; }
.mo-tile .ta {
  flex: none; font-size: 17px; color: var(--c-ink-3);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.mo-tile:hover .ta { transform: translateX(4px); color: var(--mo-a); }

/* ------------------------------------------------------------
   5. 横排标签行（替代误用 .pill-stack 的竖排 chip）
   ------------------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.chip-row .rel-chip { font-size: 14px; }
/* 选中态（学期切换、游戏类型切换、积分标签都用它） */
.rel-chip.is-on {
  background: var(--mo-a); border-color: var(--mo-a); color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px rgba(16, 28, 48, .16);
}
.rel-chip.is-on:hover { background: var(--mo-a); color: #fff; }

/* ------------------------------------------------------------
   6. 列表页顶部工具条
   ------------------------------------------------------------ */
.mo-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.mo-toolbar .tl { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.mo-toolbar .tl em { font-style: normal; font-size: 17px; }
.mo-toolbar .tr { font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.mo-toolbar .tr b { color: var(--mo-a); font-weight: 700; }

/* 分页增强：上一/下一页按钮更醒目 */
.pager .pg {
  min-width: 36px; height: 36px; padding: 0 15px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-2);
  transition: all var(--t) var(--ease);
}
.pager .pg:hover { border-color: var(--mo-line); color: var(--mo-a); background: var(--mo-bg); }
.pager .pg.pg-next { border-color: var(--mo-line); color: var(--mo-a); font-weight: 600; }

/* ------------------------------------------------------------
   7. 成语 / 词语 卡片（列表与精选共用）
   ------------------------------------------------------------ */
.mo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
.mo-card {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mo-line); }
/* 左侧主题色竖条 */
.mo-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(var(--mo-a), var(--mo-b));
  opacity: .55; transition: opacity var(--t) var(--ease);
}
.mo-card:hover::before { opacity: 1; }
.mo-card .mc-body { flex: 1 1 auto; min-width: 0; display: block; }
.mo-card .mc-word {
  display: block;
  font-size: 20px; font-weight: 700; color: var(--c-ink); line-height: 1.35;
  letter-spacing: .02em; word-break: break-all;
}
.mo-card.cy .mc-word { letter-spacing: .06em; }
.mo-card .mc-word a { color: inherit; }
.mo-card .mc-word a:hover { color: var(--mo-a); }
.mo-card .mc-py {
  display: block;
  font-size: 12.5px; color: var(--mo-a); font-weight: 600; margin-top: 5px;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.mo-card .mc-go {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; color: var(--mo-a); background: var(--mo-bg); border: 1px solid var(--mo-line);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.mo-card:hover .mc-go { transform: translateX(3px); }

/* ------------------------------------------------------------
   8. 详情页 · 大字展示台（成语 / 词语）
   ------------------------------------------------------------ */
.mo-hero-card {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 26px 28px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.mo-hero-card::after {
  content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--mo-bg), rgba(255,255,255,0) 70%);
}
.cy-blocks { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.cy-blk {
  width: 74px; height: 74px; border-radius: 13px; display: grid; place-items: center;
  font-size: 42px; font-weight: 700; color: var(--c-ink); line-height: 1;
  background: linear-gradient(180deg, #fff, var(--mo-bg));
  border: 1.5px solid var(--mo-line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.cy-blk::before {
  content: ""; position: absolute; inset: 7px; border-radius: 8px;
  border: 1px dashed rgba(0, 0, 0, .07); pointer-events: none;
}
.cy-blk.tail { width: 66px; height: 66px; font-size: 34px; }
.mo-word-big {
  font-size: 40px; font-weight: 800; color: var(--c-ink); line-height: 1.3;
  letter-spacing: .04em; word-break: break-all;
}
.mo-py-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.mo-py {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--mo-a);
  background: var(--mo-bg); border: 1px solid var(--mo-line);
  border-radius: 999px; padding: 5px 15px; font-variant-numeric: tabular-nums;
}
.mo-hero-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; position: relative; z-index: 1; }
.mo-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--mo-a);
  background: var(--mo-bg); border: 1px solid var(--mo-line);
  border-radius: 10px; padding: 8px 14px; white-space: nowrap;
}
.mo-badge em { font-style: normal; font-size: 15px; }
a.mo-badge { transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
a.mo-badge:hover { background: var(--mo-a); color: #fff; border-color: var(--mo-a); }

/* ------------------------------------------------------------
   9. 详情页 · 内容面板 / 释义列表 / 引证 / 故事
   ------------------------------------------------------------ */
.mo-panel {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.mo-panel + .mo-panel { margin-top: 18px; }
.mo-panel-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 700; color: var(--c-ink);
  padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--c-line-2);
}
.mo-panel-h em { font-style: normal; font-size: 19px; line-height: 1; }
.mo-panel-h small { font-size: 12.5px; font-weight: 400; color: var(--c-ink-3); margin-left: 4px; }

/* 释义列表（带序号徽章 + 引证块） */
.mean-list { list-style: none; padding: 0; margin: 0; counter-reset: mn; }
.mean-list > li {
  position: relative; counter-increment: mn;
  padding: 0 0 15px 44px; margin-bottom: 15px;
  border-bottom: 1px dashed var(--c-line-2);
}
.mean-list > li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.mean-list > li::before {
  content: counter(mn); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--mo-a); background: var(--mo-bg); border: 1px solid var(--mo-line);
}
.mean-txt { font-size: 15px; line-height: 1.9; color: var(--c-ink); }
.mean-quote {
  margin-top: 9px; padding: 9px 13px; border-radius: 0 9px 9px 0;
  border-left: 3px solid var(--mo-line); background: var(--mo-bg);
  font-size: 13px; line-height: 1.8; color: var(--c-ink-2);
}
.mean-quote cite { display: block; margin-top: 5px; font-size: 12px; font-style: normal; color: var(--c-ink-3); }

/* 详细释义折叠：无 JS 时全部展开（SEO 友好），有 JS 且未点开时隐藏第 6 条起 */
html.js .exp-wrap:not(.open) .exp-list > li:nth-child(n+6) { display: none; }
.exp-more {
  display: none;            /* 默认隐藏；仅当义项数 > 5 且 JS 可用时由 app.js 显示 */
  margin: 14px auto 0; padding: 9px 22px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--mo-a); background: var(--mo-bg); border: 1px solid var(--mo-line);
  border-radius: 999px; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.exp-more:hover { background: var(--mo-a); color: #fff; border-color: var(--mo-a); }
.mean-list li.muted { color: var(--c-ink-3); font-size: 14px; padding-left: 0; }
.mean-list li.muted::before { display: none; }

/* 键值表（属性） */
.kv-list { border: 1px solid var(--c-line); border-radius: 13px; overflow: hidden; background: #fff; }
.kv-row { display: grid; grid-template-columns: 108px 1fr; border-bottom: 1px solid var(--c-line-2); }
.kv-row:last-child { border-bottom: none; }
.kv-k {
  display: flex; align-items: center; gap: 6px; padding: 12px 15px;
  font-size: 13px; font-weight: 600; color: var(--c-ink-2); background: #FAFBFD;
  border-right: 1px solid var(--c-line-2);
}
.kv-v { padding: 12px 16px; font-size: 13.5px; line-height: 1.85; color: var(--c-ink); }
.kv-v cite { display: block; margin-top: 3px; font-size: 12.5px; font-style: normal; color: var(--c-ink-3); }

/* 字音字形：双排四列网格（仅汉字详情页使用，不影响 wenzi/detail） */
.kv-list.kv-grid4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--c-line-2); padding: 0;
}
.kv-list.kv-grid4 .kv-row {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: none; border-bottom: none; padding: 0;
}
.kv-list.kv-grid4 .kv-k {
  border-right: none; background: transparent; padding: 11px 14px 1px;
}
.kv-list.kv-grid4 .kv-v { padding: 0 14px 12px; font-size: 14px; font-weight: 600; line-height: 1.6; }
@media (max-width: 720px) {
  .kv-list.kv-grid4 { grid-template-columns: repeat(2, 1fr); }
}

/* 引用块（引证 / 出处 / 例句） */
.quote-list { display: flex; flex-direction: column; gap: 12px; }
.quote-item {
  position: relative; padding: 13px 16px 13px 40px;
  background: #FAFBFD; border: 1px solid var(--c-line-2); border-radius: 12px;
  font-size: 14px; line-height: 1.85; color: var(--c-ink);
}
.quote-item::before {
  content: "❝"; position: absolute; left: 13px; top: 10px;
  font-size: 19px; line-height: 1; color: var(--mo-b); opacity: .65;
}
.quote-item cite { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--c-ink-3); }

/* 故事 / 长文 */
.story-body { font-size: 14.5px; line-height: 2; color: var(--c-ink-2); }
.story-body p { margin: 0 0 12px; }
.story-body p:last-child { margin-bottom: 0; }

/* 词语/成语的「逐字查询」字块 */
.char-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.jump-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 62px; padding: 10px 12px 9px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  transition: all var(--t) var(--ease);
}
.jump-item:hover { border-color: var(--mo-line); background: var(--mo-bg); transform: translateY(-2px); }
.jump-item .ji-ch { font-size: 26px; font-weight: 700; color: var(--c-ink); line-height: 1.2; }
.jump-item:hover .ji-ch { color: var(--mo-a); }
.jump-item .ji-py { font-size: 11px; color: var(--c-ink-3); }
.jump-item .ji-py:empty { display: none; }
.jump-item.plain { cursor: default; }
.jump-item.plain:hover { transform: none; background: #fff; border-color: var(--c-line); }
.jump-item.plain:hover .ji-ch { color: var(--c-ink); }

/* 近义 / 反义 标签组 */
.ant-lab { font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 8px; }
.ant-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ant-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; padding: 5px 13px; border-radius: 999px;
  background: var(--mo-bg); color: var(--mo-a); border: 1px solid var(--mo-line);
}
.ant-chip.opp { background: #F5F7FB; color: var(--c-ink-2); border-color: var(--c-line); }

/* ------------------------------------------------------------
   10. 语文模块 · 年级卡 / 学期切换
   ------------------------------------------------------------ */
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }
.gt {
  background: #fff; border: 1px solid var(--c-line); border-radius: 15px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.gt:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mo-line); }
.gt-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  border-bottom: 1px solid var(--c-line-2);
  background: linear-gradient(120deg, var(--mo-bg), #fff 82%);
}
.gt-no {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 6px 14px rgba(16, 28, 48, .16);
}
.gt-name { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.gt-name span { display: block; font-size: 11.5px; font-weight: 500; color: var(--c-ink-3); margin-top: 2px; }
.gt-total {
  margin-left: auto; flex: none; text-align: right;
  font-size: 11.5px; color: var(--c-ink-3);
}
.gt-total b { display: block; font-size: 18px; font-weight: 800; color: var(--mo-a); font-variant-numeric: tabular-nums; }
.gt-terms { display: grid; grid-template-columns: 1fr 1fr; }
.gt-term {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border-right: 1px solid var(--c-line-2);
  transition: background var(--t) var(--ease);
}
.gt-term:last-child { border-right: none; }
.gt-term:hover { background: var(--mo-bg); }
.gt-term b { font-size: 13.5px; color: var(--c-ink); font-weight: 600; }
.gt-term i {
  font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--mo-a); font-variant-numeric: tabular-nums;
}
.gt-term .gt-arrow { font-size: 12px; color: var(--c-ink-3); }

.term-switch {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px; margin-bottom: 20px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 15px;
  box-shadow: var(--shadow-sm);
}
.ts-item {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 8px 15px; border-radius: 10px;
  background: #FBFCFE; border: 1px solid var(--c-line);
  font-size: 13px; color: var(--c-ink-2); font-weight: 600;
  transition: all var(--t) var(--ease);
}
.ts-item i { font-style: normal; font-size: 11px; font-weight: 500; opacity: .78; }
.ts-item:hover { border-color: var(--mo-line); background: var(--mo-bg); color: var(--mo-a); }
.ts-item.on {
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px rgba(16, 28, 48, .18);
}

/* ------------------------------------------------------------
   11. 游戏模块 · 游戏卡 / 答题台
   ------------------------------------------------------------ */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(286px, 1fr)); gap: 18px; }
.gm-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.gm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mo-line); }
.gm-top { display: flex; align-items: center; gap: 14px; padding: 20px 20px 0; }
.gm-ico {
  width: 58px; height: 58px; flex: none; border-radius: 16px;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b)); color: #fff;
  box-shadow: 0 8px 18px rgba(16, 28, 48, .18);
}
.gm-bod { flex: 1 1 auto; min-width: 0; }
.gm-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  color: var(--mo-a); background: var(--mo-bg); border: 1px solid var(--mo-line);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 7px;
}
.gm-name { font-size: 18px; font-weight: 700; color: var(--c-ink); }
.gm-desc { flex: 1 1 auto; padding: 14px 20px 16px; font-size: 13.5px; line-height: 1.85; color: var(--c-ink-2); }
.gm-desc ul { list-style: none; padding: 0; margin: 10px 0 0; }
.gm-desc li {
  position: relative; padding-left: 16px; font-size: 12.5px; color: var(--c-ink-3); margin-bottom: 5px;
}
.gm-desc li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--mo-line);
}
.gm-foot { padding: 0 20px 20px; }
.gm-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 11px; font-size: 14.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 8px 18px rgba(16, 28, 48, .16);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.gm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16, 28, 48, .22); filter: brightness(1.05); }

/* 积分 / 状态条 */
.pt-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.pt-bar .pt-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--mo-bg); border: 1px solid var(--mo-line);
}
.pt-bar .pt-bod { flex: 1 1 auto; min-width: 0; }
.pt-bar .pt-label { font-size: 12.5px; color: var(--c-ink-3); }
.pt-bar .pt-val { font-size: 22px; font-weight: 800; color: var(--mo-a); font-variant-numeric: tabular-nums; }
.pt-bar .pt-acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* 答题台 */
.quiz-stage { max-width: 800px; margin: 0 auto; }
.quiz-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 17px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 13px;
  box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--c-ink-2);
}
.quiz-bar .qb-l { display: flex; align-items: center; gap: 8px; }
.quiz-bar .qb-l em { font-style: normal; font-size: 16px; }
.quiz-bar .qb-r { font-variant-numeric: tabular-nums; color: var(--c-ink-3); }
.quiz-bar .qb-r b { color: var(--mo-a); font-size: 16px; font-weight: 800; }

.quiz-qbox {
  position: relative; overflow: hidden; text-align: center;
  padding: 32px 26px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 12px 28px rgba(16, 28, 48, .2);
}
.quiz-qbox::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 68%);
}
.quiz-qbox .qq { position: relative; z-index: 1; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.92); }
.quiz-qbox .qq strong {
  display: inline-block; font-size: 30px; font-weight: 800; color: #fff;
  letter-spacing: .03em; vertical-align: -.06em;
}
/* 成语模式的题干是整句释义，不能用 30px 大字 */
.quiz-qbox .qq .qq-long {
  display: block; margin-top: 8px;
  font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.75; color: #fff;
  vertical-align: baseline;
}
.quiz-hint {
  position: relative; z-index: 1; margin-top: 13px; font-size: 13px;
  color: rgba(255,255,255,.85);
}
.quiz-hint strong { color: #fff; }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.opt {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-sm); color: var(--c-ink);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.opt:hover { border-color: var(--mo-a); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.opt-k {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  color: var(--mo-a); background: var(--mo-bg); border: 1px solid var(--mo-line);
}
.opt-t { font-size: 22px; font-weight: 700; letter-spacing: .05em; line-height: 1.35; word-break: break-all; }
.opt-arrow { margin-left: auto; flex: none; color: var(--c-ink-3); font-size: 15px; transition: transform var(--t) var(--ease); }
.opt:hover .opt-arrow { transform: translateX(3px); color: var(--mo-a); }

/* 答题反馈 */
.quiz-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; margin-bottom: 16px; border-radius: 13px;
  font-size: 14.5px; font-weight: 600; line-height: 1.6;
}
.quiz-msg em { font-style: normal; font-size: 19px; line-height: 1; }
.quiz-msg.ok { color: #0F7A4A; background: rgba(31, 157, 99, .10); border: 1px solid rgba(31, 157, 99, .28); }
.quiz-msg.no { color: #B23B3B; background: rgba(214, 69, 69, .09); border: 1px solid rgba(214, 69, 69, .24); }
.quiz-msg a { color: inherit; text-decoration: underline; }

.quiz-next {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px; margin-top: 18px; border-radius: 11px;
  font-size: 14.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 8px 18px rgba(16, 28, 48, .16);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.quiz-next:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16, 28, 48, .22); }
.quiz-foot { text-align: center; }

/* 空状态 */
.mo-empty {
  text-align: center; padding: 46px 24px;
  background: #fff; border: 1px dashed var(--c-line); border-radius: 15px;
  color: var(--c-ink-3); font-size: 14px;
}
.mo-empty em { display: block; font-style: normal; font-size: 34px; margin-bottom: 10px; opacity: .8; }

/* ------------------------------------------------------------
   12. 响应式
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mo-hero-card { grid-template-columns: 1fr; }
  .mo-hero-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 860px) {
  .mo-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
  .mo-hero-mark { font-size: 100px; right: 10px; }
  .mo-title { font-size: 24px; }
  .mo-ico { width: 58px; height: 58px; font-size: 28px; border-radius: 15px; }
  .mo-stats { gap: 20px; }
  .mo-stats strong { font-size: 20px; }
}
@media (max-width: 720px) {
  .mo-cards { grid-template-columns: 1fr; }
  .gt-grid { grid-template-columns: 1fr; }
  .gm-grid { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  .cy-blk { width: 62px; height: 62px; font-size: 35px; border-radius: 11px; }
  .cy-blk.tail { width: 54px; height: 54px; font-size: 28px; }
  .mo-word-big { font-size: 30px; }
  .mo-hero-card { padding: 20px 18px; }
  .mo-panel { padding: 18px 16px; }
  .kv-row { grid-template-columns: 86px 1fr; }
  .kv-k { padding: 11px 12px; font-size: 12.5px; }
  .kv-v { padding: 11px 13px; font-size: 13px; }
  .mean-list > li { padding-left: 38px; }
  .term-switch { padding: 12px; gap: 7px; }
  .ts-item { flex: 1 1 auto; text-align: center; align-items: center; }
  .quiz-qbox { padding: 24px 18px; }
  .quiz-qbox .qq strong { font-size: 25px; }
  .opt-t { font-size: 19px; }
  .mo-toolbar { padding: 12px 14px; }
}

/* ------------------------------------------------------------
   13. 汉字模块（hanzi）· 松绿主题
   ------------------------------------------------------------ */
.mo-hz  { --mo-a:#1B7A52; --mo-b:#43B183; --mo-bg:#EAF7F0; --mo-line:#C6E8D6; }

/* 汉字列表页排序切换（拼音 / 部首 / 笔画） */
.hz-sort {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 18px;
}
.hz-sort-label {
  font-size: 13px; color: var(--ink-2, #5a6678); font-weight: 600; margin-right: 2px;
}
.hz-sort-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border: 1px solid var(--mo-line); border-radius: 999px;
  background: var(--mo-bg); color: var(--mo-a); font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: .18s;
}
.hz-sort-btn:hover { background: #fff; border-color: var(--mo-a); }
.hz-sort-btn.active { background: var(--mo-a); color: #fff; border-color: var(--mo-a); box-shadow: 0 4px 12px rgba(27,122,82,.22); }
@media (max-width: 720px) {
  .hz-sort { gap: 6px; }
  .hz-sort-btn { padding: 6px 13px; font-size: 13px; }
}

/* 详情页展示台：左「米字格 + 四线三格」/ 中「字头 + 速览 + 操作」/ 右「入口徽标」
   在 .mo-hero-card 基础上只改列宽，其余底色 / 描边 / 圆角 / 柔光全部复用 */
/* 默认（无拼音）：主区（米字格 + 汉字详情）横排 | 侧栏 */
.mo-hero-card.hz-hero { grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
/* 有拼音：四线三格拼音单独成最左列 | 主区 | 侧栏 */
.mo-hero-card.hz-hero.hz-py { grid-template-columns: auto 1fr auto; }

/* 主区：米字格（吝）+ 汉字详情标题/速览/按钮 横排并列 */
.hz-main { display: flex; align-items: center; gap: 28px; min-width: 0; position: relative; z-index: 1; }
/* 最左列：四线三格拼音，与【吝】和【汉字详情】两排并列 */
.hz-pycol { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; min-width: 0; }

.hz-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 1; }
.hz-frame {
  padding: 9px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff, var(--mo-bg));
  border: 1.5px solid var(--mo-line);
  box-shadow: var(--shadow-sm);
}
/* 米字格外框已由 .hz-frame 提供，内层去掉重复描边与阴影 */
.hz-frame .mz-big { border-radius: 10px; box-shadow: none; }
/* 四线三格宽度：必须给足最小宽度，否则 auto 列会把它压成内容宽（实测仅 75px，太单薄） */
.hz-pycol .py-grid { min-width: 150px; width: 100%; max-width: 180px; }

/* 入口徽标列：三个入口等宽居中，竖排成一条整齐的窄栏（原来各自宽度参差、只靠右对齐） */
.mo-hero-card.hz-hero .mo-hero-side { min-width: 180px; }
.mo-hero-card.hz-hero .mo-hero-side .mo-badge { width: 100%; justify-content: center; }

.hz-info { position: relative; z-index: 1; min-width: 0; }
.hz-title {
  font-size: 34px; font-weight: 800; color: var(--c-ink);
  line-height: 1.15; letter-spacing: .02em;
}
.hz-title small {
  display: block; margin-top: 7px;
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--c-ink-3);
}
.hz-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.hz-fact {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--mo-bg); border: 1px solid var(--mo-line);
  font-size: 14px; font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.hz-fact b { font-size: 12.5px; font-weight: 500; color: var(--c-ink-3); }
.hz-fact .badge { align-self: center; }

/* 展示台上的操作按钮（复制 / 朗读） */
.hz-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hz-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: #fff; color: var(--mo-a); border: 1px solid var(--mo-line);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.hz-btn:hover { background: var(--mo-bg); transform: translateY(-1px); }
.hz-btn.solid {
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(16, 28, 48, .16);
}
.hz-btn.solid:hover { box-shadow: 0 12px 24px rgba(16, 28, 48, .22); filter: brightness(1.05); }
/* app.js 朗读时会给按钮加 .speaking */
.hz-btn.speaking { background: var(--mo-a); color: #fff; border-color: transparent; }

/* ---- 主题色纠偏：app2.css 里这几个类是硬编码蓝色，这里按模块主色重着色 ---- */
/* 详细释义（.exp-list，由 fn.asp 的 CharDetailHtml 输出） */
.mo-hz .exp-list > li::before { color: var(--mo-a); background: var(--mo-bg); border-color: var(--mo-line); }
.mo-hz .exp-quote {
  position: relative; padding-left: 38px;
  border-left-color: var(--mo-line); background: var(--mo-bg);
}
.mo-hz .exp-quote::before {
  content: "❝"; position: absolute; left: 13px; top: 8px;
  font-size: 18px; line-height: 1; color: var(--mo-b); opacity: .6;
}
/* 相关成语 / 词语 chip（.rel-chip，由 fn.asp 的 RelIdiomForChar / RelWordForChar 输出） */
.mo-hz .rel-chip { background: var(--mo-bg); color: var(--mo-a); border-color: var(--mo-line); }
.mo-hz .rel-chip:hover { background: var(--mo-a); color: #fff; border-color: var(--mo-a); }
/* 汉字列表页：生字卡抬升 + 主色描边 / 拼音着色 */
.mo-hz .char-card {
  border-radius: 14px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mo-hz .char-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mo-line); }
.mo-hz .cc-py { color: var(--mo-a); }
.mo-hz .pager .cur { background: var(--mo-a); }
.mo-hz .pager a:hover { border-color: var(--mo-line); color: var(--mo-a); background: var(--mo-bg); }
.mo-hz .pn-tag:hover { color: var(--mo-a); border-color: var(--mo-line); background: var(--mo-bg); }
.mo-hz .section-title::before { background: var(--mo-a); }

/* 汉字模块响应式 */
@media (max-width: 1024px) {
  .mo-hero-card.hz-hero { grid-template-columns: 1fr auto; }
  .mo-hero-card.hz-hero.hz-py { grid-template-columns: auto 1fr; }
  .mo-hero-card.hz-hero .mo-hero-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; }
  /* 徽标改横排后，取消桌面端的等宽竖栏，恢复自适应宽度、左对齐 */
  .mo-hero-card.hz-hero .mo-hero-side .mo-badge { width: auto; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .mo-hero-card.hz-hero { grid-template-columns: 1fr; gap: 18px; }
  .mo-hero-card.hz-hero.hz-py { grid-template-columns: 1fr; }
  .mo-hero-card.hz-hero .mo-hero-side { grid-column: auto; }
  .hz-main { flex-direction: column; align-items: stretch; gap: 16px; }
  .hz-stage { align-items: flex-start; }
  /* 米字格跟随容器收缩（内联 style 的 --sz 优先级更高，故直接改 width/height） */
  .hz-frame { width: 100%; }
  .hz-frame .mz-big { width: 100%; max-width: 190px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
  .hz-frame .mz-big .mz-ch { font-size: clamp(84px, 38vw, 130px); }
  .hz-pycol { justify-content: flex-start; }
  /* 移动端四线三格不必横跨整张卡片，收紧到约三个字母宽更精致 */
  .hz-pycol .py-grid { max-width: 220px; }
  .hz-title { font-size: 27px; }
  .hz-acts .hz-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   14. 站点核心页面（首页 / 文字 / 语言 / 表情 / 搜索 / 登录注册 / 统一字符详情）
   与第 1~13 节同一套 mo-* 组件，只换主题色；本节新增首页三栏、
   语言排行、检索工作台、搜索框、登录注册卡与详情标签行。
   ============================================================ */

/* ------------------------------------------------------------
   14.1 主题色板（必须给 .mo 兜底：裸 .mo 时 --mo-* 未定义会让 var() 失效）
   ------------------------------------------------------------ */
.mo      { --mo-a:#1A5CBE; --mo-b:#4C8DE8; --mo-bg:#EFF5FD; --mo-line:#D7E6FA; }
.mo-home { --mo-a:#123C7A; --mo-b:#3C82DC; --mo-bg:#EEF4FD; --mo-line:#D3E3F8; }  /* 首页 · 深海蓝 */
.mo-wz   { --mo-a:#1A5CBE; --mo-b:#4C8DE8; --mo-bg:#EFF5FD; --mo-line:#D7E6FA; }  /* 文字 · 主蓝 */
.mo-lang { --mo-a:#0A6E96; --mo-b:#28A6CE; --mo-bg:#E8F6FA; --mo-line:#C2E6EF; }  /* 语言 · 湖蓝 */
.mo-emo  { --mo-a:#C97A06; --mo-b:#F2B23C; --mo-bg:#FEF5E6; --mo-line:#F8DFB2; }  /* 表情 · 琥珀 */
.mo-srch { --mo-a:#3D5673; --mo-b:#6E8CB0; --mo-bg:#F0F3F8; --mo-line:#D8E0EB; }  /* 搜索 · 石板蓝 */
.mo-auth { --mo-a:#1D6FA8; --mo-b:#42A7D8; --mo-bg:#EAF5FC; --mo-line:#C9E4F4; }  /* 登录注册 · 晴蓝 */

/* ------------------------------------------------------------
   14.2 首页 · 全宽 Hero（左文案 + 右字符格）
   ------------------------------------------------------------ */
.mo-hero.mo-hero-split {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 34px; padding: 34px 36px;
}
.mo-hero-split .mo-title { font-size: 34px; }
.mo-hero-split .mo-sub { font-size: 14.5px; max-width: 620px; }
.mo-hero-split .mo-stats { gap: 34px; margin-top: 20px; }
.mo-hero-split .mo-stats strong { font-size: 26px; }

/* Hero 内嵌检索框（首页专用：深色底上的半透明输入） */
.hm-search { display: flex; gap: 10px; margin-top: 20px; max-width: 540px; }
.hm-search input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px;
  border-radius: 11px; font-family: inherit; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hm-search input::placeholder { color: rgba(255,255,255,.72); }
.hm-search input:focus { outline: none; background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.62); }
.hm-search button {
  flex: none; height: 44px; padding: 0 22px; border: none; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--mo-a); background: #fff;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hm-search button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }

/* 右侧装饰字符格 */
.hm-cells { display: grid; grid-template-columns: repeat(3, auto); gap: 12px; position: relative; z-index: 1; }
.hm-cell {
  width: 78px; height: 78px; border-radius: 16px; display: grid; place-items: center;
  font-size: 36px; font-weight: 700; line-height: 1; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.hm-cell:nth-child(2n) { background: rgba(255,255,255,.07); }
.hm-cell:hover { transform: translateY(-3px) scale(1.03); background: rgba(255,255,255,.3); }

/* ------------------------------------------------------------
   14.3 首页 · 三栏布局（语言排行 / 内容流 / 检索工作台）
   ------------------------------------------------------------ */
.hm-grid {
  display: grid; grid-template-columns: 216px 1fr 300px;
  gap: 18px; margin-top: 20px; align-items: start;
}
.hm-side, .hm-main, .hm-tools { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* 语言排行（带名次徽章） */
.hm-rank { display: flex; flex-direction: column; }
.hm-rank-i {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--c-line-2);
}
.hm-rank-i:last-of-type { border-bottom: none; }
.hr-no {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--c-ink-3); background: #F4F6FA; border: 1px solid var(--c-line);
}
.hm-rank-i:nth-of-type(-n+3) .hr-no {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
}
.hr-b { flex: 1 1 auto; min-width: 0; }
.hr-b b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-b i { font-style: normal; font-size: 11.5px; color: var(--c-ink-3); }
.hr-c { flex: none; font-size: 12.5px; font-weight: 700; color: var(--mo-a); font-variant-numeric: tabular-nums; }
.hm-rank-i:hover .hr-b b { color: var(--mo-a); }
.hm-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; margin-top: 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--mo-a);
  background: var(--mo-bg); border: 1px solid var(--mo-line);
  transition: all var(--t) var(--ease);
}
.hm-more:hover { background: var(--mo-a); border-color: var(--mo-a); color: #fff; }

/* 检索工作台磁贴 */
.hm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border-radius: 12px; text-align: center;
  font-size: 12.5px; color: var(--c-ink-2);
  background: #FBFCFE; border: 1px solid var(--c-line);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hm-tile em { font-style: normal; font-size: 20px; line-height: 1; transition: transform var(--t) var(--ease); }
.hm-tile:hover { transform: translateY(-2px); background: var(--mo-bg); border-color: var(--mo-line); color: var(--mo-a); }
.hm-tile:hover em { transform: scale(1.1); }

/* 公告行 */
.hm-notice { display: flex; flex-direction: column; }
.hm-notice a {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px dashed var(--c-line-2);
  font-size: 13px; color: var(--c-ink-2);
}
.hm-notice a:last-child { border-bottom: none; }
.hm-notice a:hover { color: var(--mo-a); }
.hm-notice em { font-style: normal; font-size: 15px; line-height: 1; }
.hm-notice .nt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-notice .nd { flex: none; font-size: 12px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

/* 首页推荐卡（随机成语 / 随机词语）：列宽压到 4 列，并各按内容配色区分 */
.hm-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hm-cards .mo-card { padding: 12px 13px; gap: 10px; }
.hm-cards .mo-card .mc-word { font-size: 17px; }
.hm-cards .mo-card.cy .mc-word { font-size: 16.5px; letter-spacing: .03em; }
.hm-cards .mo-card .mc-py { font-size: 11.5px; margin-top: 3px; }
.hm-cards .mo-card .mc-go { width: 24px; height: 24px; font-size: 12px; border-radius: 8px; }
.hm-cards .mo-card.cy  { --mo-a:#C0392B; --mo-b:#EE7B3D; --mo-bg:#FDF1EC; --mo-line:#F8D9CB; }
.hm-cards .mo-card.cyu { --mo-a:#0B7285; --mo-b:#22A6B3; --mo-bg:#EAF7F8; --mo-line:#C6E8EC; }

/* 面板标题右侧的「查看全部」链接 */
.mo-panel-h .ph-more { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--mo-a); }
.mo-panel-h .ph-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   14.4 站内搜索页
   ------------------------------------------------------------ */
.sr-box {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow-sm);
}
.sr-form { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-input {
  flex: 1 1 260px; min-width: 0; height: 52px; padding: 0 18px;
  font-family: inherit; font-size: 16px; color: var(--c-ink);
  background: #FBFCFE; border: 1.5px solid var(--c-line); border-radius: 12px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sr-input:focus { outline: none; background: #fff; border-color: var(--mo-b); box-shadow: 0 0 0 4px var(--mo-bg); }
.sr-btn {
  flex: none; height: 52px; padding: 0 30px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 10px 22px rgba(16, 28, 48, .18);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.sr-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(16, 28, 48, .24); }
.sr-hot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 13px; color: var(--c-ink-3);
}
.sr-hot .pn-tag { cursor: pointer; }
.sr-tip {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 18px;
  padding: 13px 16px; border-radius: 12px; font-size: 13px; line-height: 1.85; color: var(--c-ink-2);
  background: var(--mo-bg); border: 1px solid var(--mo-line);
}
.sr-tip em { font-style: normal; font-size: 15px; line-height: 1.5; flex: none; }

/* ------------------------------------------------------------
   14.5 登录 / 注册
   ------------------------------------------------------------ */
.au-wrap { max-width: 466px; margin: 32px auto 64px; }
.au-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 20px;
  overflow: hidden; box-shadow: 0 16px 44px rgba(16, 28, 48, .10);
}
.au-top {
  position: relative; overflow: hidden; padding: 26px 28px 24px;
  background: linear-gradient(120deg, var(--mo-a), var(--mo-b)); color: #fff;
}
.au-top::after {
  content: ""; position: absolute; right: -60px; top: -84px; width: 224px; height: 224px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 68%);
}
.au-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.au-ico {
  width: 54px; height: 54px; flex: none; border-radius: 16px;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
}
.au-bt { min-width: 0; }
.au-bt b { display: block; font-size: 20px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.au-bt i { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.82); }
.au-note { position: relative; z-index: 1; margin-top: 14px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.9); }
.au-note b { color: #fff; }
.au-body { padding: 24px 28px 26px; }
.au-err {
  display: flex; align-items: center; gap: 9px; padding: 12px 15px; margin-bottom: 16px;
  border-radius: 11px; font-size: 13.5px; font-weight: 600;
  color: #B23B3B; background: rgba(214, 69, 69, .08); border: 1px solid rgba(214, 69, 69, .24);
}
.au-form { display: flex; flex-direction: column; gap: 15px; }
.au-lab { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.au-in {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  background: #FBFCFE; border: 1.5px solid var(--c-line); border-radius: 12px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.au-in em { font-style: normal; font-size: 16px; line-height: 1; opacity: .8; }
.au-in input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--c-ink);
}
.au-in:focus-within { background: #fff; border-color: var(--mo-b); box-shadow: 0 0 0 4px var(--mo-bg); }
.au-btn {
  height: 50px; margin-top: 4px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mo-a), var(--mo-b));
  box-shadow: 0 12px 26px rgba(16, 28, 48, .18);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.au-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(16, 28, 48, .24); }
.au-perks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.au-perks li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--c-ink-2); }
.au-perks em { font-style: normal; font-size: 15px; line-height: 1; flex: none; }
.au-foot { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--c-ink-3); }
.au-foot a { color: var(--mo-a); font-weight: 600; }
.au-foot a:hover { text-decoration: underline; }
.au-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin-top: 16px; font-size: 12.5px; color: var(--c-ink-3);
}
.au-links a { color: var(--c-ink-3); }
.au-links a:hover { color: var(--mo-a); }

/* ------------------------------------------------------------
   14.6 统一字符详情页（/wenzi/detail）· 标签行与代码样式
   ------------------------------------------------------------ */
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 13px; color: var(--c-ink-2);
  background: #F7F9FC; border: 1px solid var(--c-line);
}
.tag-chip.on { background: var(--mo-a); border-color: var(--mo-a); color: #fff; font-weight: 600; }
.tag-chip.on .badge { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; }
.tag-chip .badge { padding: 1px 8px; }
.code-chip {
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 13px; letter-spacing: .02em;
}
.kv-v .code-chip { color: var(--mo-a); font-weight: 600; }

/* ------------------------------------------------------------
   14.7 页面骨架间距（模块容器底部留白 + hero 与后续区块之间）
   ------------------------------------------------------------ */
.mo { padding-bottom: 34px; }
.mo > .mo-hero + .mo-toolbar,
.mo > .mo-hero + .mo-panel,
.mo > .mo-hero + .mo-cards,
.mo > .mo-hero + .grid { margin-top: 18px; }
.mo > .mo-toolbar + .pillnav { margin-top: 0; }
.mo > .pillnav + .mo-toolbar { margin-top: 14px; }

/* ------------------------------------------------------------
   14.8 主题色纠偏：以下类在 app.css / app2.css 里是硬编码主蓝，
   统一按当前模块主题色重着色（.mo 前缀 + 各页同时挂主题类）
   ------------------------------------------------------------ */
.mo .crumb a { color: var(--mo-a); }
.mo .section-title::before { background: var(--mo-a); }
.mo-en .section-title::before { background: var(--mo-a); }
.mo .btn-primary { background: var(--mo-a); }
.mo .btn-primary:hover { background: var(--mo-a); filter: brightness(.92); box-shadow: 0 6px 16px rgba(16, 28, 48, .22); }
.mo .btn-ghost { color: var(--mo-a); }
.mo .btn-ghost:hover { border-color: var(--mo-line); background: var(--mo-bg); }

/* 字符卡 / 米字格 */
.mo .char-card { border-radius: 14px; }
.mo .char-card:hover { border-color: var(--mo-line); }
.mo .char-card a.cc-glyph:hover { color: var(--mo-a); }
.mo .cc-py { color: var(--mo-a); }
/* 纯米字格字符卡（老板要求：只显示米字格，去掉中文名与分类/块名文字） */
.mo .char-card.glyph-only { display: grid; place-items: center; padding: 16px; }

/* 分页 / 标签 / 筛选 */
.mo .pager .cur { background: var(--mo-a); }
.mo .pager a:hover { border-color: var(--mo-line); color: var(--mo-a); background: var(--mo-bg); }
.mo .pn-tag:hover { color: var(--mo-a); border-color: var(--mo-line); background: var(--mo-bg); }
.mo .filter-input:focus { border-color: var(--mo-b); }

/* Tabs（文字区块 / 语言大区） */
.mo .tabs { background: #F7F9FC; }
.mo .tab:hover { color: var(--mo-a); }
.mo .tab.active { color: var(--mo-a); }
.mo .tab.active::before { background: var(--mo-a); }
.mo .tab-n { color: var(--mo-a); background: var(--mo-bg); }
.mo .tab.active .tab-n { background: var(--mo-a); color: #fff; }
.mo .tab-meta .tm-range { color: var(--mo-a); }

/* ============================================================
   14.9 英语音频模块（.mo-en）
   ============================================================ */
/* 顶部共享播放器（吸顶） */
.en-player {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--mo-line);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(16,28,48,.06);
}
.en-player .en-now { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-player .en-now .en-empty { color: var(--c-ink-3); font-weight: 500; }
.en-player audio { height: 38px; }

/* 单元分组 */
.en-unit { margin-bottom: 26px; }
.en-unit-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--mo-a); }
.en-unit-h h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--c-ink); }
.en-unit-h .en-ucount { font-size: 12.5px; color: var(--c-ink-3); }

/* 单元曲目表格 */
.en-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--mo-line); border-radius: 12px; overflow: hidden; margin-bottom: 6px; font-size: 14px; }
.en-table thead th { background: var(--mo-bg); color: var(--mo-a); font-weight: 700; text-align: left; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--mo-line); }
.en-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--mo-line); color: var(--c-ink); vertical-align: middle; }
.en-table tbody tr:last-child td { border-bottom: none; }
.en-table tbody tr:hover { background: var(--mo-bg); }
.en-table tbody tr.playing { background: var(--mo-bg); }
.en-table td.en-c-idx { width: 52px; color: var(--c-ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.en-table td.en-c-name { font-weight: 600; line-height: 1.4; }
.en-table tbody tr.playing td.en-c-name { color: var(--mo-a); }
.en-table td.en-c-size { width: 96px; color: var(--c-ink-3); font-size: 12.5px; white-space: nowrap; }
.en-table td.en-c-play { width: 66px; text-align: center; }
.en-play { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--mo-a), var(--mo-b)); font-size: 13px; display: inline-grid; place-items: center; transition: transform .12s; }
.en-play:hover { transform: scale(1.07); }
.en-play:active { transform: scale(.95); }
.en-table tbody tr.playing .en-play { box-shadow: 0 0 0 4px var(--mo-bg); }

/* 索引页版本分册表格 */
.en-idx-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--mo-line); border-radius: 12px; overflow: hidden; }
.en-idx-table thead th { background: var(--mo-bg); color: var(--mo-a); font-weight: 700; text-align: left; padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--mo-line); }
.en-idx-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--mo-line); color: var(--c-ink); }
.en-idx-table tbody tr:last-child td { border-bottom: none; }
.en-idx-table tbody tr:hover { background: var(--mo-bg); }
.en-idx-table .en-i-name { font-weight: 700; font-size: 15px; }
.en-idx-table .en-i-sub { display: block; font-size: 12.5px; color: var(--c-ink-3); font-weight: 400; margin-top: 3px; }
.en-idx-table th.en-i-cnt, .en-idx-table td.en-i-cnt { text-align: right; width: 96px; white-space: nowrap; }
.en-idx-table .en-i-cnt b, .en-idx-table td.en-i-cnt { color: var(--mo-a); font-weight: 700; }
.en-idx-table th.en-i-go, .en-idx-table td.en-i-go { text-align: right; width: 92px; white-space: nowrap; }
.en-idx-table .en-i-go a { color: var(--mo-a); font-weight: 700; text-decoration: none; }
.en-idx-table .en-i-go a:hover { text-decoration: underline; }
.en-idx-table .en-vol { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; vertical-align: middle; line-height: 1.6; }
.en-idx-table .en-vol.vol-s { color: #0E7C5A; background: #E3F6EE; }
.en-idx-table .en-vol.vol-x { color: #C2410C; background: #FDEBDD; }

/* 索引页版本说明 */
.en-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.en-legend .lg { font-size: 12.5px; color: var(--c-ink-3); background: var(--mo-bg); border: 1px solid var(--mo-line); border-radius: 8px; padding: 5px 10px; }

/* 区块卡 / 语言卡 */
.mo .blk-card:hover .blk-name, .mo .lang-card:hover .lc-name { color: var(--mo-a); }
.mo .blk-card .blk-range, .mo .lang-card .lc-country { color: var(--mo-a); }
.mo .blk-card:hover .card-no, .mo .lang-card:hover .lc-no { color: var(--mo-line); }

/* 关联 chip / 释义 / 点赞收藏 */
.mo .rel-chip { background: var(--mo-bg); color: var(--mo-a); border-color: var(--mo-line); }
.mo .rel-chip:hover { background: var(--mo-a); color: #fff; border-color: var(--mo-a); }
.mo .exp-list > li::before { color: var(--mo-a); background: var(--mo-bg); border-color: var(--mo-line); }
.mo .exp-quote { border-left-color: var(--mo-line); background: var(--mo-bg); }
.mo .fl-btn:hover { border-color: var(--mo-b); color: var(--mo-a); }
.mo .fl-btn.on { background: var(--mo-bg); border-color: var(--mo-a); color: var(--mo-a); }
.mo .badge-hanzi { color: var(--mo-a); background: var(--mo-bg); }
.mo .badge-emoji { color: var(--mo-a); background: var(--mo-bg); }

/* ------------------------------------------------------------
   14.9 响应式
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .hm-grid { grid-template-columns: 202px 1fr 272px; }
  .mo-hero.mo-hero-split { gap: 26px; padding: 30px 28px; }
}
@media (max-width: 1024px) {
  .hm-grid { grid-template-columns: 1fr 288px; }
  .hm-side { display: none; }
  .hm-cells .hm-cell:nth-child(n+5) { display: none; }
}
@media (max-width: 860px) {
  .mo-hero.mo-hero-split { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .mo-hero-split .mo-title { font-size: 26px; }
  .mo-hero-split .mo-stats { gap: 22px; margin-top: 16px; }
  .mo-hero-split .mo-stats strong { font-size: 21px; }
  .hm-cells { grid-template-columns: repeat(4, 1fr); }
  .hm-cells .hm-cell:nth-child(n+5) { display: grid; }
  .hm-cell { width: 100%; height: auto; aspect-ratio: 1 / 1; font-size: 28px; border-radius: 13px; }
  .hm-grid { grid-template-columns: 1fr; gap: 16px; }
  .hm-main { order: 2; }
  .hm-tools { order: 1; }
  .hm-search { max-width: none; }
}
@media (max-width: 720px) {
  .au-wrap { margin: 20px auto 48px; }
  .au-top { padding: 22px 20px 20px; }
  .au-body { padding: 20px 20px 22px; }
  .sr-box { padding: 18px 16px; }
  .sr-input { flex: 1 1 100%; }
  .sr-btn { width: 100%; }
  .mo-hero-split .mo-acts { gap: 8px; }
  .mo-hero-split .mo-act { flex: 1 1 auto; justify-content: center; }
  .hm-search { flex-wrap: wrap; }
  .hm-search button { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   14.10 字符网格列数（老板定版：一排 12 个米字格）
   —— 全站 .char-grid 统一：首页「精选字符」/ 各列表页 / 搜索 / 生字表 / 详情页「相关字符」
   —— 米字格尺寸由 MiniMizige 内联 style="--sz:Npx" 给出，列变窄必须用 !important 覆盖，
      否则 84px 的米字格在 12 列里会溢出（!important 声明优先于内联样式）
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
  .char-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
  .char-grid .char-card.glyph-only { padding: 8px; }
  .char-grid .mz-mini { --sz: 64px !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .char-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
  .char-grid .char-card.glyph-only { padding: 8px; }
  .char-grid .mz-mini { --sz: 60px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .char-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  .char-grid .char-card.glyph-only { padding: 8px; }
  .char-grid .mz-mini { --sz: 60px !important; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .char-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .char-grid .char-card.glyph-only { padding: 8px; }
  .char-grid .mz-mini { --sz: 56px !important; }
}
@media (max-width: 559px) {
  .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .char-grid .char-card.glyph-only { padding: 6px; }
  .char-grid .mz-mini { --sz: 52px !important; }
}

/* ------------------------------------------------------------
   14.11 字符卡「自动紧缩」（老板要求：移动端米字格旁不要留白 + 整块白底）
   —— 与 app.css 末尾同值副本：米字格撑满卡片内容区、卡片 1:1、字形 62cqi
      （cqi 需容器查询，故卡片上挂 container-type: inline-size）
   —— 老浏览器不支持 cqi → 自动回退到 14.10 里的 --sz 固定字号
   ------------------------------------------------------------ */
.char-grid .char-card.glyph-only {
  background: #fff;
  padding: 6px;
  container-type: inline-size;
}
.char-grid .mz-mini { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.char-grid .mz-mini .mz-ch { font-size: 62cqi; }

/* ------------------------------------------------------------
   14.12 首页「词语推荐 / 四字成语精选」密集网格（老板定版：词语一排 12、成语一排 8）
   —— 窄列里放不下右侧箭头 → 隐藏 .mc-go 并收紧内边距；
      列数按断点逐级递减，手机端仍可读（词语 3 列 / 成语 2 列）
      特异性 (0,2,0) > 第 12 节媒体查询里的 .mo-cards{1fr}，故不受其影响
   ------------------------------------------------------------ */
.mo-cards.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.mo-cards.cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.mo-cards.cols-12 .mo-card,
.mo-cards.cols-8  .mo-card { padding: 10px 8px 10px 12px; gap: 0; }
.mo-cards.cols-12 .mo-card::before,
.mo-cards.cols-8  .mo-card::before { top: 9px; bottom: 9px; }
.mo-cards.cols-12 .mo-card .mc-go,
.mo-cards.cols-8  .mo-card .mc-go { display: none; }
.mo-cards.cols-12 .mo-card .mc-word,
.mo-cards.cols-8  .mo-card .mc-word { font-size: 18px; }
/* 拼音一律单行省略：窄列里 "mèng xiǎng diān dǎo" 这类长拼音会折行把卡片撑高，
   同排卡片高度不齐很难看 → nowrap + ellipsis（word-break 在此不生效） */
.mo-cards.cols-12 .mo-card .mc-py,
.mo-cards.cols-8  .mo-card .mc-py {
  font-size: 10.5px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1199px) {
  .mo-cards.cols-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mo-cards.cols-8  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .mo-cards.cols-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mo-cards.cols-8  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mo-cards.cols-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mo-cards.cols-8  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .mo-cards.cols-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mo-cards.cols-8  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mo-cards.cols-12 .mo-card, .mo-cards.cols-8 .mo-card { padding: 9px 6px 9px 10px; }
  .mo-cards.cols-12 .mo-card .mc-word,
  .mo-cards.cols-8  .mo-card .mc-word { font-size: 17px; }
  .mo-cards.cols-12 .mo-card .mc-py,
  .mo-cards.cols-8  .mo-card .mc-py { font-size: 10.5px; }
}