/* ============================================================================
   MediLex 医词通 · 页面样式表（业务视图层）
   ----------------------------------------------------------------------------
   1. 页面通用结构
   2. 首页仪表盘（问候 / 统计 / 每日一词 / 打卡热力图）
   3. 词库（科室网格 / 词表 / 词详情）
   4. 学习（翻转卡片）
   5. 测验
   6. 复习计划
   7. 错题本
   8. 学习统计
   9. 设置
   10. AI 助手抽屉
   11. 动画关键帧
   12. 响应式
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 页面通用 */
.page { animation: fadeUp .5s var(--ease) both; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h2 { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.page-head .ph-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.page-head .ph-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 卡片交错入场（配合 style="--i:n"） */
.stagger { animation: fadeUp .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* 自适应网格：按容器宽度自动折叠列数，天然响应式 */
.g-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; }
.g-auto.narrow { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------------------------------------------------------- 2. 仪表盘 */
.dash-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 30px 32px;
  background: var(--grad); color: #fff; box-shadow: var(--shadow-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.dash-hero::before {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: rgba(255,255,255,.14); top: -190px; right: -80px; pointer-events: none;
}
.dash-hero::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.1); bottom: -140px; right: 160px; pointer-events: none;
}
.dash-hero .hero-text { position: relative; z-index: 2; }
.dash-hero h2 { font-size: 25px; font-weight: 800; letter-spacing: .01em; }
.dash-hero .hero-sub { font-size: 13.5px; opacity: .92; margin-top: 6px; }
.dash-hero .hero-meta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px;
  border-radius: var(--r-full); background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28); font-size: 13px; font-weight: 700;
}
.hero-pill svg.ic { width: 15px; height: 15px; }
.dash-hero .hero-ring { position: relative; z-index: 2; text-align: center; }
.dash-hero .hero-ring .ring-label { font-size: 12.5px; opacity: .9; margin-top: 8px; letter-spacing: .05em; }

/* Hero 操作按钮（开始 / 继续学习） */
.hero-actions { display: flex; gap: 11px; margin-top: 20px; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px;
  border-radius: var(--r-full); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero-btn svg.ic { width: 17px; height: 17px; }
.hero-btn-main { background: #fff; color: var(--primary); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .35); }
.hero-btn-main:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(0, 0, 0, .42); }
.hero-btn-main:active { transform: scale(.97); }
.hero-btn-sub { background: rgba(255, 255, 255, .18); color: #fff; border: 1.5px solid rgba(255, 255, 255, .38); }
.hero-btn-sub:hover { background: rgba(255, 255, 255, .3); transform: translateY(-2px); }

/* 环形进度（通用） */
.ring-box { position: relative; width: 128px; height: 128px; }
.ring-box svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring-box .ring-track { fill: none; stroke: rgba(255,255,255,.25); }
.ring-box .ring-val { fill: none; stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.ring-box .ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-box .ring-num { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.ring-box .ring-num small { font-size: 13px; font-weight: 700; opacity: .85; }
/* 卡片内的彩色环（非白） */
.ring-box.tinted .ring-track { stroke: var(--line-soft); }
.ring-box.tinted .ring-val { stroke: var(--primary); }
.ring-box.tinted .ring-num { color: var(--text); }

/* 统计磁贴 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.stat-tile { padding: 19px 20px; display: flex; flex-direction: column; gap: 3px; }
.stat-tile .st-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.stat-ic {
  width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.stat-ic.ok { background: var(--ok-soft); color: var(--ok); }
.stat-ic.warn { background: var(--warn-soft); color: var(--warn); }
.stat-ic.danger { background: var(--danger-soft); color: var(--danger); }
.stat-ic.info { background: var(--info-soft); color: var(--info); }
.stat-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat-num small { font-size: 13px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.stat-label { font-size: 12.5px; color: var(--text-3); font-weight: 600; }

/* 复习提醒横幅 */
.review-banner {
  display: flex; align-items: center; gap: 15px; padding: 17px 20px;
  border-radius: var(--r-lg); border: 1.5px dashed rgba(var(--primary-rgb), .45);
  background: var(--primary-soft); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.review-banner:hover { transform: translateY(-2px); border-style: solid; box-shadow: var(--shadow-primary); }
.review-banner .rb-ic {
  width: 44px; height: 44px; border-radius: 14px; background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary); flex: none;
}
.review-banner .rb-ic svg.ic { width: 21px; height: 21px; }
.review-banner .rb-text b { font-size: 15px; }
.review-banner .rb-text p { font-size: 12.5px; color: var(--text-2); }
.review-banner .rb-go { margin-left: auto; color: var(--primary); display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; }

/* 每日一词 */
.wotd { overflow: hidden; position: relative; }
.wotd .wotd-band { height: 72px; background: var(--grad); position: relative; }
.wotd .wotd-band::after {
  content: "TODAY'S TERM"; position: absolute; right: 18px; bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; color: rgba(255,255,255,.75);
}
.wotd .wotd-body { padding: 0 22px 22px; margin-top: -34px; position: relative; }
.wotd .wotd-card-in {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.wotd-word { font-size: 24px; font-weight: 800; font-family: var(--font-en); letter-spacing: -.01em; }
.wotd-ipa { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.wotd-def { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.wotd-def b { color: var(--text); }

/* 科室快捷入口 */
.dept-mini-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; }
.dept-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 8px 13px;
  border-radius: var(--r-md); border: 1px solid var(--line-soft); background: var(--card);
  transition: all var(--dur) var(--ease); cursor: pointer; text-align: center;
}
.dept-chip:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .4); box-shadow: var(--shadow); }
.dept-chip .dc-ic { font-size: 24px; line-height: 1; filter: saturate(.92); }
.dept-chip .dc-name { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* 打卡热力图 */
.heat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.heat-cell { width: 13px; height: 13px; border-radius: 3.5px; background: var(--line-soft); transition: transform .18s var(--ease); }
.heat-cell:hover { transform: scale(1.3); }
.heat-cell.l1 { background: rgba(var(--primary-rgb), .28); }
.heat-cell.l2 { background: rgba(var(--primary-rgb), .5); }
.heat-cell.l3 { background: rgba(var(--primary-rgb), .74); }
.heat-cell.l4 { background: var(--primary); }
.heat-legend { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); justify-content: flex-end; margin-top: 9px; }
.heat-legend .heat-cell { width: 11px; height: 11px; }

/* 柱状图容器 */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { width: 100%; display: block; }

/* ---------------------------------------------------------------- 3. 词库 */
.lib-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.search {
  position: relative; flex: 1; min-width: 220px; max-width: 520px;
}
/* 搜索框做得更醒目：加粗描边 + 主题色放大镜 + 聚焦光环，保证一眼看到 */
.search svg.ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--primary); width: 18px; height: 18px; opacity: .9;
}
.search .inp {
  height: 50px; border-radius: 15px; padding-left: 46px; padding-right: 14px;
  font-size: 14.5px; background: var(--card);
  border: 1.5px solid rgba(var(--primary-rgb), .30);
  box-shadow: 0 10px 24px -18px rgba(var(--primary-rgb), .7);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search .inp::placeholder { color: var(--text-2); opacity: .78; }
.search .inp:focus, .search:focus-within .inp {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 15px; }
.dept-card { padding: 19px 19px 17px; display: flex; flex-direction: column; gap: 12px; }
.dept-card .dc-head { display: flex; align-items: center; gap: 13px; }
.dept-ic {
  width: 48px; height: 48px; border-radius: 15px; font-size: 24px; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--primary-soft);
  transition: transform var(--dur) var(--ease-bounce);
}
.dept-card:hover .dept-ic { transform: scale(1.1) rotate(-4deg); }
.dept-card .dc-t { min-width: 0; }
.dept-card .dc-name { font-size: 15px; font-weight: 700; }
.dept-card .dc-en { font-size: 12px; color: var(--text-3); font-family: var(--font-en); letter-spacing: .01em; }
.dept-card .dc-desc { font-size: 12px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.dept-card .dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-3); }

/* 词表行 */
.word-list { display: flex; flex-direction: column; gap: 9px; }

/* 规范名词速查行：中文 / 英文 / 标签 三行结构，长词自动断行、行数封顶，
   保证手机端每条词条高度统一，不再互相挤压换行 */
.g-list { display: flex; flex-direction: column; gap: 7px; }
.g-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px;
  transition: all var(--dur) var(--ease); cursor: pointer;
}
.g-row:hover { border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--shadow); transform: translateX(3px); }
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-cn, .g-en {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word;
}
.g-cn { font-size: 14.5px; font-weight: 650; line-height: 1.4; }
.g-en { font-size: 12.5px; color: var(--text-2); font-family: var(--font-en); line-height: 1.45; }
/* 标签独立成行：单行排列、超长省略，不再参与正文换行争抢宽度 */
.g-meta { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.g-meta .tag {
  flex: none; height: 20px; line-height: 20px; padding: 0 8px; font-size: 11px;
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-row .tag { flex: none; }

/* 速查详情：来源清单 */
.g-src-title { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.g-src-row { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.g-src-book { flex: 0 0 42%; font-size: 13px; color: var(--text-2); }
.g-src-cn { flex: 1; font-size: 13.5px; }
.g-def {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); font-size: 13.5px; line-height: 1.7; color: var(--text-2);
}

/* 缩写速查 */
.ab-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 66px; height: 30px; padding: 0 10px; border-radius: 9px;
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--font-en); font-weight: 800; font-size: 13.5px; letter-spacing: .03em;
}
.ab-big { font-family: var(--font-en); font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--primary); letter-spacing: -.01em; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; max-width: 720px; }
.ab-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: var(--r-full); border: 1px solid var(--line); background: var(--card);
  font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all var(--dur) var(--ease);
}
.ab-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ab-chip b { font-family: var(--font-en); font-size: 13px; color: var(--primary); }
.ab-chip span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 手机端速查行：压缩内边距、徽标与操作按钮，保证单屏信息密度 */
@media (max-width: 768px) {
  .g-row { padding: 9px 12px; gap: 8px; }
  .ab-badge { min-width: 48px; height: 26px; padding: 0 8px; font-size: 12px; border-radius: 8px; }
  .g-row .icon-btn { width: 32px; height: 32px; flex: none; }
  .g-row .icon-btn .ic { width: 15px; height: 15px; }
  .g-meta .tag { max-width: 150px; }
}

/* 词库分组标题 */
.lib-group-title { margin: 22px 0 12px; font-size: 14.5px; font-weight: 650; }
.lib-group-title:first-child { margin-top: 0; }

/* 数据完整性警示（js/data 漏传/传旧时出现） */
.data-warn { border-color: #f3c1c1; background: #fdf3f3; margin-bottom: 14px; padding: 14px 16px; }
.data-warn b { display: block; color: #c0392b; font-size: 13.5px; margin-bottom: 6px; }
.data-warn span { display: block; font-size: 12.5px; color: #a93226; line-height: 1.7; }

/* 名词速查无结果 → 词库联动 */
.g-cross { margin-top: 14px; text-align: left; }
.g-cross-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-soft);
  font-size: 12.5px; cursor: pointer; transition: border-color var(--dur) var(--ease);
}
.g-cross-row:hover { border-color: var(--primary); }
.g-cross-row b { font-weight: 600; flex: none; }
.g-cross-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-family: var(--font-en); }
.g-cross-row i { font-style: normal; flex: none; font-size: 11.5px; color: var(--text-3); }
.word-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 17px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: all var(--dur) var(--ease); cursor: pointer;
}
.word-row:hover { border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--shadow); transform: translateX(3px); }
.word-row .wr-main { min-width: 0; flex: 1; }
.word-row .wr-word { font-size: 16px; font-weight: 750; font-family: var(--font-en); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.word-row .wr-ipa { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.word-row .wr-cn { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }
.word-row .wr-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.wr-star { color: var(--text-3); transition: all .25s var(--ease-bounce); }
.wr-star:hover { transform: scale(1.18); color: var(--warn); }
.wr-star.on { color: var(--warn); }
.wr-star.on svg.ic { fill: var(--warn); stroke: var(--warn); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot.new { background: var(--line); }
.status-dot.learning { background: var(--warn); box-shadow: 0 0 0 3.5px var(--warn-soft); }
.status-dot.mastered { background: var(--ok); box-shadow: 0 0 0 3.5px var(--ok-soft); }

/* 词详情 */
.wd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: nowrap; }
.wd-head > div:first-child { flex: 1; min-width: 0; }
.wd-head > .row { flex: none; }
.wd-word { overflow-wrap: anywhere; }
.wd-word { font-size: 30px; font-weight: 800; font-family: var(--font-en); letter-spacing: -.02em; line-height: 1.15; }
.wd-cn { font-size: 17px; font-weight: 700; color: var(--primary); margin-top: 5px; }
.wd-ipa-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ipa-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: 13.5px; transition: all var(--dur) var(--ease); cursor: pointer;
}
.ipa-pill:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.ipa-pill b { font-size: 11px; color: var(--text-3); font-weight: 800; letter-spacing: .06em; }
.ipa-pill svg.ic { width: 15px; height: 15px; color: var(--primary); }
.wd-sec { margin-top: 18px; }
.wd-sec-t { font-size: 13px; font-weight: 800; color: var(--text-3); letter-spacing: .1em; margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.wd-sec-t svg.ic { width: 15px; height: 15px; color: var(--primary); }
.wd-sec-t::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.root-list { display: flex; flex-direction: column; gap: 9px; }
.root-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 13px;
  background: var(--card-soft); border: 1px solid var(--line-soft);
}
.root-item .rt-part { font-family: var(--font-en); font-size: 15px; font-weight: 800; color: var(--primary); min-width: 74px; }
.root-item .rt-type { flex: none; }
.root-item .rt-mean { font-size: 13px; color: var(--text-2); }

.ex-list { display: flex; flex-direction: column; gap: 11px; }
.ex-item { padding: 12px 15px; border-radius: 13px; background: var(--card-soft); border: 1px solid var(--line-soft); border-left: 3.5px solid var(--primary); }
.ex-scene { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--primary); margin-bottom: 7px; letter-spacing: .04em; }
.ex-scene::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.ex-en { font-size: 14.5px; font-family: var(--font-en); line-height: 1.65; }
.ex-en b { color: var(--primary); font-weight: 700; background: var(--primary-soft); padding: 1px 5px; border-radius: 5px; }
.ex-zh { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* ---------------------------------------------------------------- 4. 学习（翻转卡） */
.study-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.study-top .prog { flex: 1; min-width: 160px; }
.study-count { font-size: 13px; font-weight: 700; color: var(--text-3); white-space: nowrap; }

.flip-scene { perspective: 1800px; max-width: 680px; margin: 0 auto; }
.flip-card {
  position: relative; width: 100%; min-height: 620px;
  transform-style: preserve-3d; transition: transform .68s var(--ease);
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 26px;
  box-shadow: var(--shadow-lg); overflow-y: auto; padding: 34px 36px;
  display: flex; flex-direction: column;
}
.flip-back { transform: rotateY(180deg); }

.card-front { align-items: center; justify-content: center; text-align: center; gap: 4px; }
.front-tag { margin-bottom: 16px; }
.front-word { font-size: 40px; font-weight: 800; font-family: var(--font-en); letter-spacing: -.02em; line-height: 1.2; animation: fadeUp .5s var(--ease); }
.front-pos { font-size: 13px; color: var(--text-3); font-weight: 700; letter-spacing: .06em; margin-top: 2px;
  max-width: 88%; line-height: 1.55; word-break: break-word; }
.speak-row { display: flex; gap: 11px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.speak-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 19px;
  border-radius: var(--r-full); background: var(--primary-soft); color: var(--primary);
  font-size: 14px; font-weight: 700; transition: all var(--dur) var(--ease);
}
.speak-btn:hover { background: var(--grad); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-primary); }
.speak-btn.playing { animation: pulseSoft 1.2s infinite; }
.front-hint { margin-top: 30px; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.flip-cue {
  position: absolute; right: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
}

.back-meaning { font-size: 15px; line-height: 1.75; color: var(--text); }
.back-meaning .pos { color: var(--primary); font-weight: 800; font-family: var(--font-en); margin-right: 6px; font-size: 13.5px; }

/* 学习操作按钮 */
.study-actions { display: flex; gap: 13px; max-width: 680px; margin: 22px auto 0; }
.study-actions .btn { flex: 1; height: 52px; font-size: 15px; border-radius: 15px; }
.btn-know { background: var(--ok-soft); color: var(--ok); }
.btn-know:hover { background: var(--ok); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(16,185,129,.5); }
.btn-vague { background: var(--warn-soft); color: var(--warn); }
.btn-vague:hover { background: var(--warn); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(245,158,11,.5); }
.btn-unknown { background: var(--danger-soft); color: var(--danger); }
.btn-unknown:hover { background: var(--danger); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(239,68,68,.5); }

/* 完成页 */
.done-card { max-width: 560px; margin: 30px auto; text-align: center; padding: 46px 36px; }
.done-ic {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 26px; background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary);
  animation: popIn .5s var(--ease-bounce);
}
.done-ic svg.ic { width: 38px; height: 38px; }
.done-card h2 { font-size: 23px; font-weight: 800; }
.done-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.done-stat { padding: 15px 10px; border-radius: 15px; background: var(--card-soft); border: 1px solid var(--line-soft); }
.done-stat b { display: block; font-size: 23px; font-weight: 800; }
.done-stat span { font-size: 12px; color: var(--text-3); font-weight: 600; }

/* 学习设置条（学习页顶部） */
.study-setup { max-width: 680px; margin: 0 auto; }
.setup-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 15px; background: var(--card-soft); border: 1px solid var(--line-soft); margin-bottom: 11px; }
.setup-row .sr-t { flex: 1; }
.setup-row .sr-t b { font-size: 14.5px; display: block; }
.setup-row .sr-t span { font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- 5. 测验 */
.quiz-wrap { max-width: 720px; margin: 0 auto; }
.quiz-top { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; flex-wrap: wrap; }
.quiz-q {
  padding: 30px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow); text-align: center; margin-bottom: 20px;
}
.quiz-q .q-word { font-size: 34px; font-weight: 800; font-family: var(--font-en); letter-spacing: -.02em; }
.quiz-q .q-cn { font-size: 24px; font-weight: 800; }
.quiz-q .q-ipa { margin-top: 8px; }
.quiz-q .q-hint { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 13px; padding: 17px 19px; text-align: left;
  background: var(--card); border: 1.8px solid var(--line); border-radius: 16px;
  font-size: 15px; font-weight: 600; transition: all var(--dur) var(--ease); position: relative; overflow: hidden;
}
.opt .opt-key {
  width: 27px; height: 27px; border-radius: 9px; background: var(--hover); color: var(--text-3);
  font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
  transition: all var(--dur);
}
.opt:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.opt:hover .opt-key { background: var(--primary-soft); color: var(--primary); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); animation: popIn .4s var(--ease-bounce); }
.opt.right .opt-key { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--danger); background: var(--danger-soft); animation: shake .45s ease; }
.opt.wrong .opt-key { background: var(--danger); color: #fff; }
.opt.dim { opacity: .45; pointer-events: none; }

.quiz-input-row { display: flex; gap: 11px; max-width: 460px; margin: 0 auto; }
.quiz-input-row .inp { text-align: center; font-size: 20px; font-weight: 700; font-family: var(--font-en); letter-spacing: .04em; height: 54px; }
.spell-blanks { display: flex; justify-content: center; gap: 7px; margin-top: 18px; flex-wrap: wrap; }
.blk {
  width: 34px; height: 42px; border-radius: 10px; background: var(--card-soft); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
  font-family: var(--font-en); text-transform: lowercase;
}
.blk.filled { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); animation: popIn .2s var(--ease-bounce); }
.blk.given { color: var(--text-3); background: var(--hover); }

.quiz-feedback { text-align: center; margin-top: 20px; font-size: 14.5px; font-weight: 700; animation: fadeUp .3s var(--ease); }
.quiz-feedback.ok { color: var(--ok); }
.quiz-feedback.no { color: var(--danger); }

.result-hero { text-align: center; padding: 40px 30px; }
.result-score { font-size: 58px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.result-score small { font-size: 20px; font-weight: 700; color: var(--text-3); }
.result-sub { color: var(--text-3); margin-top: 10px; font-size: 14px; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 26px 0 4px; }

/* ---------------------------------------------------------------- 6. 复习计划 */
.review-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.srs-stage-bar { display: flex; height: 13px; border-radius: var(--r-full); overflow: hidden; gap: 2px; margin: 14px 0 10px; }
.srs-stage-bar i { transition: flex-grow .9s var(--ease); min-width: 3px; }
.srs-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); }
.srs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.srs-legend i { width: 10px; height: 10px; border-radius: 3.5px; }

.due-item {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line-soft); transition: all var(--dur) var(--ease); cursor: pointer;
}
.due-item:hover { border-color: rgba(var(--primary-rgb), .4); transform: translateX(3px); }
.due-item .di-word { font-weight: 750; font-family: var(--font-en); font-size: 15px; }
.due-item .di-cn { font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- 7. 错题本 */
.wrong-row { display: flex; align-items: center; gap: 14px; padding: 15px 17px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md); transition: all var(--dur) var(--ease); cursor: pointer; border-left: 3.5px solid var(--danger); }
.wrong-row.resolved { border-left-color: var(--ok); opacity: .68; }
.wrong-row:hover { box-shadow: var(--shadow); transform: translateX(3px); }
.wrong-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--danger); background: var(--danger-soft); padding: 4px 10px; border-radius: var(--r-full); }

/* ---------------------------------------------------------------- 8. 统计 */
.stat-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 18px; }
.chart-card { padding: 20px 22px 16px; }
.chart-card .cc-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 9. 设置 */
.settings-wrap { max-width: 860px; }
.set-group { margin-bottom: 20px; overflow: hidden; }
.set-group .sg-hd {
  display: flex; align-items: center; gap: 11px; padding: 17px 22px; border-bottom: 1px solid var(--line-soft);
  font-size: 15px; font-weight: 800;
}
.set-group .sg-hd svg.ic { color: var(--primary); }
.set-group .sg-bd { padding: 6px 22px 14px; }
.set-row { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: none; }
.set-row .sr-label { flex: 1; min-width: 0; }
.set-row .sr-label b { font-size: 14px; font-weight: 650; display: block; }
.set-row .sr-label span { font-size: 12.5px; color: var(--text-3); }
.set-row .sr-ctl { flex: none; display: flex; align-items: center; gap: 10px; }

.palette-grid { display: flex; gap: 11px; flex-wrap: wrap; }
.palette-dot {
  width: 40px; height: 40px; border-radius: 13px; cursor: pointer; position: relative;
  transition: transform .25s var(--ease-bounce); border: none;
}
.palette-dot:hover { transform: scale(1.12); }
.palette-dot.on { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 5px var(--primary); }
.palette-dot.on::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.palette-dot[data-p="indigo"]  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.palette-dot[data-p="ocean"]   { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }
.palette-dot[data-p="emerald"] { background: linear-gradient(135deg, #10b981, #22c55e); }
.palette-dot[data-p="rose"]    { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.palette-dot[data-p="amber"]   { background: linear-gradient(135deg, #f59e0b, #f97316); }
.palette-dot[data-p="violet"]  { background: linear-gradient(135deg, #a855f7, #ec4899); }

.key-input { width: min(340px, 100%); }
.api-key-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 10. AI 抽屉 */
.ai-mask { position: fixed; inset: 0; background: var(--mask); z-index: 950; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ai-mask.show { opacity: 1; pointer-events: auto; }
.ai-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--ai-drawer-w), 94vw); z-index: 960;
  background: var(--card); border-left: 1px solid var(--line-soft); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 40px)); transition: transform .45s var(--ease);
}

/* 左边缘拖拽调宽 */
.ai-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 4; background: transparent;
  transition: background .18s var(--ease);
}
.ai-resizer:hover, .ai-resizer.active { background: var(--primary-soft); }

/* 历史对话列表 */
.ai-hist { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.ai-hist-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ai-hist-row:hover { border-color: rgba(var(--primary-rgb), .42); background: var(--input-bg); }
.ai-hist-main { flex: 1; min-width: 0; }
.ai-hist-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hist-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* 历史对话下拉面板（挂在 AI 抽屉内部，按钮正下方，不会被抽屉遮挡） */
.ai-hist-pop {
  position: absolute; right: 14px; z-index: 6;
  width: min(380px, calc(100% - 28px));
  max-height: min(62vh, 520px); overflow-y: auto;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: histPop .18s var(--ease);
}
.ai-hist-pop .ai-hist-row { padding: 10px 11px; }
.ai-hist-pop .ai-hist-foot {
  padding: 8px 6px 3px; font-size: 11.5px; color: var(--text-3); text-align: center;
}
@keyframes histPop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.ai-drawer.open { transform: none; }
.ai-head {
  display: flex; align-items: center; gap: 11px; padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.ai-head-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; }
.ai-head-title svg.ic { color: var(--primary); }
.ai-model-badge {
  font-size: 11px; font-weight: 700; padding: 3.5px 10px; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary); margin-left: auto;
}
.ai-model-badge.off { background: var(--hover); color: var(--text-3); }

.ai-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
/* 对话结构：头像在上，气泡在下，气泡与头像左/右边缘对齐，正文可用宽度最大化 */
.msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; animation: fadeUp .35s var(--ease); }
.msg.ai { align-items: flex-start; }
.msg.user { align-items: flex-end; }
.msg .m-avatar {
  width: 30px; height: 30px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.msg.ai .m-avatar { background: var(--grad); color: #fff; }
.msg.user .m-avatar { background: var(--info-soft); color: var(--info); }
.msg .bubble {
  padding: 12px 15px; border-radius: 15px; font-size: 13.8px; line-height: 1.7;
  max-width: 100%;                /* 气泡铺满整行，不再被头像挤窄 */
  word-break: break-word; white-space: pre-wrap;
}
.msg.ai .bubble { background: var(--card-soft); border: 1px solid var(--line-soft); border-top-left-radius: 5px; width: 100%; }
.msg.user .bubble { background: var(--grad); color: #fff; border-top-right-radius: 5px; max-width: 90%; }
.msg .bubble code { background: rgba(var(--primary-rgb), .12); padding: 1.5px 6px; border-radius: 6px; font-size: 12.5px; }
.msg .bubble .b-h { font-weight: 800; color: var(--primary); display: block; margin: 4px 0 2px; }
.msg.user .bubble .b-h { color: #fff; }

/* Markdown 表格（AI 汇总表） */
.md-table-wrap { margin: 10px 0 6px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.md-table {
  border-collapse: collapse; width: 100%; font-size: 12.8px; background: var(--card);
}
.md-table th, .md-table td {
  border: 1px solid var(--line); padding: 7px 10px;
  text-align: left; vertical-align: top; line-height: 1.6;
  min-width: 78px;                 /* 多列表格不被压成竖排单字，超出容器时横向滚动 */
}
.md-table th {
  background: var(--primary-soft); color: var(--primary);
  font-weight: 800; white-space: nowrap;
}
.md-table tbody tr:nth-child(even) td { background: var(--input-bg); }

/* 大项分隔：仅用于 AI 回复（用户消息是紫底白字，套用会颜色冲突且异常占空间） */
.msg.ai .md-h1 {
  display: block;
  margin: 4px 0 3px;        /* 前面已由正文空行留出间距，这里只补一点呼吸感 */
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 15px; font-weight: 800; color: var(--primary);
  letter-spacing: .01em;
}
.msg.ai .md-h1-body { display: block; margin: 2px 0 5px; font-size: 13.5px; color: var(--text-2); }

/* 思考过程面板（DeepSeek Reasoner 的 reasoning_content）
   宽度与正文气泡一致，右边缘对齐，不再单独收窄 */
.reason-box { width: 100%; max-width: 100%; }
.reason-msg { align-items: stretch; }
.reason-box summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-3);
  padding: 6px 12px; border: 1px dashed var(--line); border-radius: 10px;
  list-style: none; background: var(--input-bg);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.reason-box summary::-webkit-details-marker { display: none; }
.reason-box summary::before { content: '🧠 '; }
.reason-box summary:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), .4); }
.reason-box[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.reason-body {
  font-size: 12.3px; color: var(--text-3); line-height: 1.68;
  padding: 10px 13px; border: 1px dashed var(--line); border-top: none;
  border-radius: 0 0 10px 10px; white-space: pre-wrap;
  max-height: 260px; overflow-y: auto; background: var(--card);
}

/* 发送中：按钮切换为「停止」 */
.ai-send.stopping { background: var(--danger); box-shadow: 0 8px 18px -8px rgba(220, 38, 38, .55); }
.ai-send.stopping:hover { filter: brightness(1.05); }
#ai-reason-btn.on { color: var(--primary); background: var(--primary-soft); }
#ai-deep-btn.on { color: var(--primary); background: var(--primary-soft); }
#ai-deep-btn.on::after {
  content: ''; position: absolute; right: 6px; top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--text-3); animation: typingDot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.ai-input { display: flex; gap: 10px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
.ai-input textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 44px; padding: 11px 15px; border-radius: 14px;
  background: var(--input-bg); border: 1.5px solid var(--line); outline: none; font-size: 13.8px;
  transition: border-color var(--dur), box-shadow var(--dur); line-height: 1.5;
}
.ai-input textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ai-send { width: 46px; height: 46px; padding: 0; border-radius: 14px; flex: none; }

/* ---------------------------------------------------------------- 11. 动画关键帧 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideOutRight { to { opacity: 0; transform: translateX(50px); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes blobFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } 100% { transform: translate(-30px, 30px) scale(.95); } }
@keyframes bootBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes bootRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes bootLoad { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pulseSoft { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .4); } 50% { box-shadow: 0 0 0 11px rgba(var(--primary-rgb), 0); } }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4.5px); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .9s linear infinite; }

/* 彩带（学习目标达成时） */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti i {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2.5px; opacity: .95;
  animation: confettiFall 2.9s linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-3vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(106vh) rotate(660deg); opacity: .15; }
}

/* ---------------------------------------------------------------- 12. 响应式 */
@media (max-width: 1220px) {
  .stat-grid, .stat-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-mini-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-105%); box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-mask.show { opacity: 1; pointer-events: auto; }
  .main-wrap { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .bottom-nav { display: flex; }
  .view-root { padding: 20px 18px 110px; }
  .review-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .auth-panel { grid-template-columns: 1fr; max-width: 520px; }
  .auth-brand {
    padding: 36px 34px 32px;
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  }
  /* 图标与品牌名同处一行并垂直居中，避免手机上二者各占一行、基线错位 */
  .auth-brand .brand-mark { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 0; }
  .auth-brand .brand-mark .brand-glyph { font-size: 26px; }
  .auth-brand h1 { font-size: 24px; line-height: 1.2; margin: 0; }
  .auth-brand h1 em { font-size: 15px; margin-left: 6px; letter-spacing: .1em; }
  .auth-slogan { grid-column: 1 / -1; margin-top: 14px; font-size: 13px; }
  .auth-features { display: none; }
  .auth-foot { grid-column: 1 / -1; margin-top: 0; padding-top: 16px; }
  .auth-card { padding: 34px 32px 40px; }
  .quiz-opts { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .g-4, .g-3, .g-2 { grid-template-columns: 1fr; }

  /* 设置项：标签与控件改为上下排列，避免文字被挤成竖排 */
  .set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-row .sr-ctl { justify-content: flex-start; flex-wrap: wrap; }
  .set-row .sr-ctl .inp { flex: 1; min-width: 0; }

  /* 分段控件：允许横向滑动，选项多时不至于被裁掉 */
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented::-webkit-scrollbar { display: none; }
  .seg { padding: 0 12px; font-size: 13px; }

  /* 顶栏副标题单行省略，避免两行把 64px 顶栏撑开 */
  .topbar-title { min-width: 0; }
  .topbar-title h1, .topbar-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 弹窗：更贴近屏幕边缘，底部按钮一行两列（取消 / 确认并排，按钮保持 44px 高度） */
  .modal { width: calc(100vw - 20px); max-height: 92vh; border-radius: 16px; }
  .modal-hd { padding: 14px 16px; }
  .modal-bd { padding: 16px; }
  .modal-ft {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-end;
  }
  .modal-ft > .row { width: 100%; }
  .modal-ft .btn {
    flex: 1 1 calc(50% - 10px); min-width: 0; height: 44px;
    padding: 0 12px; justify-content: center;
  }
  .modal-ft > .btn { width: auto; }
  .modal-ft > .btn:only-child { flex: 1 1 100%; }
  /* 卡片背面：长词与星级标签在窄屏换行，避免标签被压扁 */
  .flip-back .row.between { flex-wrap: wrap; gap: 6px; }
  .flip-back .row.between > .tag { flex: none; }

  /* AI 抽屉：窄屏全屏展示，不再露出底页缝隙 */
  .ai-drawer { width: 100vw; border-left: none; }
  .ai-input { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  /* 对话气泡：头像在上、气泡在下，气泡占满整行宽度 */
  .ai-messages { padding: 12px 12px; gap: 12px; }
  .msg { gap: 6px; }
  .msg .m-avatar { width: 26px; height: 26px; border-radius: 9px; font-size: 12px; }
  .msg .bubble { font-size: 13.5px; padding: 11px 13px; }
  .msg.user .bubble { max-width: 92%; }
  /* 手机端搜索框独占一行，且柔光环常驻，不聚焦也醒目 */
  .lib-toolbar .search { flex: 1 1 100%; max-width: none; }
  .search .inp {
    height: 48px;
    border-color: rgba(var(--primary-rgb), .42);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .10), 0 10px 24px -18px rgba(var(--primary-rgb), .7);
  }
  .stat-grid, .stat-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-mini-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-hero { padding: 24px 22px; }
  .dash-hero .hero-ring { display: none; }
  .flip-face { padding: 22px 18px; border-radius: 22px; }
  /* 卡片高度跟随视口，背面内容在卡片内滚动，保证底部三档自评始终可见 */
  .flip-card { min-height: 420px; min-height: clamp(320px, calc(100dvh - 330px), 520px); }
  .front-word { font-size: 31px; }
  .study-actions { flex-wrap: wrap; margin-top: 14px; gap: 9px; }
  .study-actions .btn { min-width: 46%; }
  .done-stats, .result-grid { grid-template-columns: repeat(3, 1fr); }
  .page-head h2 { font-size: 19px; }
  .topbar { padding: 0 14px; gap: 9px; }
  .topbar-title h1 { font-size: 15.5px; }
  #toast-root { left: 14px; right: 14px; }
  .toast { max-width: none; }
}
@media (max-width: 480px) {
  .auth-card { padding: 28px 22px 34px; }
  .auth-brand { padding: 28px 24px; }
  .stat-grid, .stat-hero-grid { grid-template-columns: 1fr 1fr; }
  .done-stats, .result-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .quiz-q .q-word { font-size: 27px; }
  .front-word { font-size: 28px; }
  .front-hint { margin-top: 16px; font-size: 12px; }
  .study-actions { gap: 7px; }
  .study-actions .btn { min-width: 0; height: 46px; font-size: 14px; border-radius: 13px; }
  .study-top { gap: 10px; margin-bottom: 14px; }
  .study-count { font-size: 12px; }
  .speak-btn { height: 40px; padding: 0 15px; font-size: 13px; }
  .page-head { gap: 10px; }
  .page-head .btn { width: 100%; justify-content: center; }

  /* 学习页三个快捷入口：手机端排成一行，避免把科室网格挤到屏幕外 */
  .study-quick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .study-quick .stat-tile { padding: 12px 10px; }
  .study-quick .st-top .tag { display: none; }
  .study-quick .stat-ic { width: 30px; height: 30px; margin-bottom: 8px; }
  .study-quick .stat-num { font-size: 21px; }
  .study-quick .stat-num small { font-size: 10px; margin-left: 2px; }
  .study-quick .stat-label { font-size: 12.5px; }
  .study-quick .fs12.t3 { display: none; }
  /* AI 抽屉头部：窄屏隐藏模型徽标，给按钮留位置 */
  .ai-head { gap: 5px; padding: 13px 13px; }
  .ai-head-title { gap: 6px; font-size: 14px; }
  .ai-model-badge { display: none; }
  .ai-head .icon-btn { width: 34px; height: 34px; }
}

/* 打印（简单优化） */
@media print {
  .sidebar, .topbar, .bottom-nav, .ai-drawer, #toast-root { display: none !important; }
  .main-wrap { margin-left: 0; }
}

/* ============================================================================
   账号授权 / 云端同步
   ========================================================================== */
/* 到期横幅 */
.license-banner {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px; padding: 11px 16px;
  border-radius: 12px; border: 1px solid var(--warn-line, #f0d9a8);
  background: var(--warn-soft, #fdf6e6); color: var(--warn-text, #8a5a12);
  font-size: 13px; line-height: 1.55;
}
.license-banner .ic { width: 17px; height: 17px; flex: none; }
.license-banner.hidden { display: none; }

/* 登录页：忘记密码 / 返回登录 */
.auth-links { margin-top: 12px; text-align: center; }
.link-btn {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-size: 12.5px; color: var(--text-3); font-family: inherit;
  border-bottom: 1px dashed transparent; transition: all var(--dur) var(--ease);
}
.link-btn:hover { color: var(--primary); border-bottom-color: var(--primary); }
.auth-form-tip {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-soft, #f5f6fa); color: var(--text-2);
  font-size: 12.5px; line-height: 1.6;
}
.code-inp {
  font-family: var(--font-en); letter-spacing: .08em; font-weight: 600;
  text-transform: uppercase;
}

/* 同步状态两栏 */
.sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sync-cell {
  padding: 12px 14px; border-radius: var(--border-radius-md, 12px);
  background: var(--bg-soft, #f5f6fa); border: 0.5px solid var(--line-soft);
}
.sc-label { font-size: 12px; color: var(--text-3); }
.sc-num { font-size: 16px; font-weight: 600; color: var(--text-1); margin-top: 3px; line-height: 1.3; }
.sc-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* 登录后恢复 / 冲突弹窗 */
.sync-card {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--border-radius-md, 12px);
  background: var(--primary-soft); color: var(--text-1); font-size: 13.5px; line-height: 1.7;
}
.sync-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sync-pick-item {
  padding: 12px 14px; border-radius: var(--border-radius-md, 12px);
  border: 1px solid var(--line); background: var(--card);
}
.sync-pick-item.best { border-color: var(--primary); background: var(--primary-soft); }
.sp-title { font-size: 12.5px; color: var(--text-3); }
.sp-num { font-size: 17px; font-weight: 600; margin: 3px 0; }

/* 设备列表 */
.dev-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dev-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--border-radius-md, 12px); border: 1px solid var(--line-soft);
  background: var(--card);
}
.dev-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.dev-ic .ic { width: 17px; height: 17px; }
.dev-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev-meta b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-meta span { font-size: 11.5px; color: var(--text-3); }

.tag.danger { background: var(--danger-soft, #fdecec); color: var(--danger, #c0392b); }

@media (max-width: 480px) {
  .sync-grid, .sync-pick { grid-template-columns: 1fr; }
  .license-banner { border-radius: 0; margin: 0; padding: 10px 14px; font-size: 12.5px; }
}

/* ============================================================================
   首页快捷入口
   ========================================================================== */
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-card {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: var(--card);
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quick-card:hover {
  border-color: var(--primary); transform: translateY(-1px);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35);
}
.quick-card:active { transform: translateY(0); }
.qc-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.qc-ic .ic { width: 19px; height: 19px; }
.qc-ic.info { background: #eef2ff; color: #4f46e5; }
.qc-ic.warn { background: #fdf3e6; color: #b45309; }
.qc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qc-body b { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.qc-body span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-arrow { flex: none; color: var(--text-3); display: flex; }
.qc-arrow .ic { width: 15px; height: 15px; }

/* 手机底部导航：6 个入口，压缩字号与图标 */
.bottom-nav { padding-left: 6px; padding-right: 6px; }
.bottom-nav .bn-item { font-size: 10px; gap: 2px; }
.bottom-nav .bn-item svg.ic { width: 19px; height: 19px; }
.bottom-nav .bn-item span { white-space: nowrap; }

@media (max-width: 980px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .quick-card { padding: 11px 12px; gap: 9px; }
  .qc-ic { width: 34px; height: 34px; border-radius: 10px; }
  .qc-ic .ic { width: 17px; height: 17px; }
  .qc-arrow { display: none; }
  .bottom-nav .bn-item { font-size: 9.5px; }
}