* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f8fafc; color: #1e293b; line-height: 1.65;
  /* 用 clip 而非 hidden：裁剪横向溢出但不创建滚动上下文，避免破坏 sticky */
  overflow-x: clip;
}
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: linear-gradient(90deg, #1e3a8a, #4c1d95);
  color: white; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.topbar h1 {
  font-size: 18px; font-weight: 600; flex: 1;
  text-align: center; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .actions { display: flex; gap: 8px; flex-shrink: 0; }
.topbar .actions a {
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  text-decoration: none; color: white;
  background: rgba(255,255,255,0.18);
}
.hamburger {
  display: none; background: rgba(255,255,255,0.18);
  color: white; border: none;
  width: 36px; height: 36px;
  border-radius: 6px; font-size: 20px; cursor: pointer;
  flex-shrink: 0;
}
.app-root { min-height: 100vh; }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px; margin-top: 56px; min-height: calc(100vh - 56px); }
.sidebar {
  background: white; border-right: 1px solid #e2e8f0;
  padding: 20px 12px; overflow-y: auto;
  height: calc(100vh - 56px);
  position: sticky; top: 56px;
  /* 关键：grid 默认 stretch 会把 sidebar 拉到与 content 等高，导致 sticky 失效；
     加 align-self: start 让 sidebar 只占自身高度，sticky 才能正常工作 */
  align-self: start;
}
.sidebar-group { margin-bottom: 20px; }
.sidebar-group h3 {
  padding: 8px 12px; border-radius: 6px;
  font-size: 14px; margin-bottom: 8px;
}
.sidebar-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-radius: 6px;
  font-size: 14px; color: #334155; text-decoration: none;
  cursor: pointer; margin-bottom: 2px;
}
.sidebar-item:hover { background: #f1f5f9; }
.sidebar-item.active { background: #1e3a8a; color: white; font-weight: 500; }
.sidebar-close {
  display: none; background: transparent;
  border: none; font-size: 24px; color: #94a3b8;
  cursor: pointer; float: right;
}
/* ============ v16: 右侧单元内快速导航 ============ */
.rightnav {
  padding: 20px 14px;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  align-self: start;
  overflow-y: auto;
  border-left: 1px solid #e2e8f0;
  background: #fafbfc;
}
.rightnav-title {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-left: 8px;
}
.rightnav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rightnav-item {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  line-height: 1.45;
  border-left: 2px solid transparent;
  transition: .15s;
}
.rightnav-item:hover {
  background: #eef2ff;
  color: #1e3a8a;
}
.rightnav-item.active {
  background: #eef2ff;
  color: #1e3a8a;
  font-weight: 600;
  border-left-color: #4c1d95;
}
/* ============ v16.1: 移动端横向单元导航条 ============ */
.unitbar {
  display: none; /* 桌面端隐藏，移动端在媒体查询里开启 */
  margin-bottom: 4px;
  position: sticky;
  top: 56px;
  z-index: 20;
  background: #f8fafc;
  padding: 10px 2px 8px;
  border-bottom: 1px solid #e2e8f0;
}
.unitbar-title {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0 4px;
}
.unitbar-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.unitbar-list::-webkit-scrollbar { display: none; }
.unitbar-item {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  text-decoration: none;
  transition: .15s;
}
.unitbar-item.active {
  background: #1e3a8a;
  color: white;
  border-color: #1e3a8a;
  font-weight: 500;
}
.content { padding: 28px 40px; max-width: 960px; width: 100%; margin: 0 auto; min-width: 0; }
.markdown-body { font-size: 16px; }
.markdown-body h1 { font-size: 28px; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0; text-align: center; }
.markdown-body h2 { font-size: 22px; margin: 28px 0 12px;
  color: #1e3a8a; padding-left: 12px;
  border-left: 4px solid #4c1d95; }
.markdown-body h3 { font-size: 18px; margin: 20px 0 10px; color: #4c1d95; }
.markdown-body p, .markdown-body ul, .markdown-body ol { margin-bottom: 14px; }
.markdown-body ul, .markdown-body ol { margin-left: 24px; }
.markdown-body code {
  background: #f1f5f9; padding: 2px 6px;
  border-radius: 4px; font-size: 13px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #b91c1c;
}
.markdown-body blockquote {
  border-left: 4px solid #cbd5e1;
  background: #f8fafc; padding: 12px 16px;
  margin: 14px 0;
}
.markdown-body table {
  border-collapse: collapse; width: 100%;
  margin: 14px 0; font-size: 14px;
}
.markdown-body th, .markdown-body td {
  border: 1px solid #e2e8f0; padding: 8px 12px;
}
.markdown-body th { background: #f1f5f9; }
.kg-pill {
  display: inline-block; padding: 2px 8px;
  border-radius: 4px; font-size: 12px;
  font-family: ui-monospace, monospace;
  background: #f1f5f9; color: #475569;
  cursor: pointer;
}
.kg-pill[data-subj="CH"] { background: #fee2e2; color: #b91c1c; }
.kg-pill[data-subj="MA"] { background: #dbeafe; color: #1d4ed8; }
.kg-pill[data-subj="EN"] { background: #dcfce7; color: #15803d; }
.ipa { color: #0e7490; font-style: italic;
  background: #ecfeff; padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, monospace; }
.math-inline { color: #92400e; font-style: italic;
  background: #fef3c7; padding: 1px 5px; border-radius: 3px; }
.meta-box {
  background: linear-gradient(135deg, #eef2ff, #ede9fe);
  border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 0; margin: 18px 0 24px; font-size: 14px;
  overflow: hidden;
}
.meta-box summary.meta-title {
  cursor: pointer;
  padding: 12px 18px;
  font-weight: 600;
  color: #4338ca;
  user-select: none;
  list-style: none;                 /* 隐藏默认三角标记 */
}
.meta-box summary.meta-title::-webkit-details-marker { display: none; }
.meta-box summary.meta-title::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform .2s;
}
.meta-box[open] summary.meta-title::before { transform: rotate(90deg); }
.meta-box .meta-table {
  width: calc(100% - 36px);
  margin: 0 18px 14px;
}
.meta-box[open] summary.meta-title { border-bottom: 1px solid #c7d2fe; }
.sidebar-backdrop {
  display: none; position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 98; opacity: 0;
  pointer-events: none; transition: opacity .25s;
}
.loading, .placeholder {
  padding: 60px 20px; text-align: center; color: #64748b;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.pills a {
  display: inline-block; padding: 8px 16px;
  background: #1e3a8a; color: white; border-radius: 6px;
  font-size: 14px; text-decoration: none; cursor: pointer;
}

@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rightnav { display: none; }
  .unitbar { display: block; }
  .topbar { padding: 0 12px; }
  .topbar .actions a { padding: 6px 10px; font-size: 12px; }
  .hamburger { display: flex; align-items: center; justify-content: center; }
  .content { padding: 20px 18px; }
  .sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0;
    width: 280px; max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 99;
  }
  .app-root.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: block; }
  .sidebar-backdrop { display: block; }
  .app-root.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .app-root:not(.sidebar-open) .sidebar-backdrop { opacity: 0; pointer-events: none; }
  .markdown-body h1 { font-size: 22px; }
  .markdown-body { font-size: 15px; }
}

@media (max-width: 640px) {
  .topbar h1 { font-size: 14px; }
  /* 移动端：隐藏次要导航链接，保留关键朗读按钮 */
  .topbar .actions a { display: none; }
  .topbar .actions .action-btn-essential { display: inline-flex; }
  .content { padding: 16px 12px; }
  .markdown-body { font-size: 14px; }
  /* 拼 + ▶ + 读选段 关键按钮：紧凑显示 */
  .topbar .actions .action-btn-essential { padding: 5px 9px; font-size: 12px; }
}

/* ============ KaTeX 数学公式排版 ============ */
/* 防止行内公式在窄屏溢出：inline-block + max-width + 横向滚动 */
.markdown-body .katex {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  /* KaTeX 内部用 nowrap，这里允许内层在窄屏下溢出触发横向滚动而不是被裁 */
  text-align: left;
}
.math-display {
  margin: 16px 0;
  padding: 12px 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;          /* 防止 display 公式超出父容器 */
  background: #fafafa;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}
.math-display .katex-display {
  margin: 0 !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.math-fallback {
  font-family: ui-monospace, Consolas, monospace;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  word-break: break-all;     /* 兜底：fallback 模式下长公式也能换行 */
  display: inline-block;
  max-width: 100%;
}
/* 兜底：长数字/连续中文在窄屏自动换行，避免把整行撑爆 */
.markdown-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============ v11.5: 拼音注音 (ruby) — 加大字号提升可读性 ============ */
.markdown-body ruby { ruby-align: center; }
.markdown-body ruby > rt {
  /* 拼音字号比例从 0.55em 升至 0.72em，更接近汉字大小 */
  font-size: 0.72em;
  color: #b91c1c;
  font-weight: 600;
  letter-spacing: -0.3px;
  font-family: ui-monospace, "PingFang SC", "Microsoft YaHei", monospace;
  line-height: 1.2;
  user-select: none;
  padding-top: 2px;
}
/* 拼音模式：整段字号 16px → 18px（让汉字本身更清晰） */
.markdown-body blockquote.with-pinyin {
  font-size: 18px;
  line-height: 2.1;
  background: #fff7ed;
  border-left: 4px solid #fb923c;
  padding: 14px 18px;
}
.markdown-body blockquote.with-pinyin p { margin: 0; }
/* ruby 元素内独立行高，避免被段落 line-height 挤压 */
.markdown-body ruby {
  line-height: 1;
}

/* ============ v12: 生字词 / 易错 / 要点 卡片 ============ */
.vocab-card, .mistake-card, .keypoint-card {
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.vocab-card-title, .mistake-card-title, .keypoint-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
/* 生字词卡片 */
.vocab-card {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.vocab-card-title { color: #c2410c; }
.vocab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 10px;
  line-height: 2.4;
}
.vocab-label {
  font-size: 13px;
  color: #92400e;
  font-weight: 600;
  background: #ffedd5;
  padding: 2px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.vocab-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.vocab-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: default;
  transition: background .15s;
}
.vocab-item:hover { background: #ffedd5; }
.vocab-item ruby { font-size: 22px; font-weight: 600; color: #1e293b; }
.vocab-item ruby rt { font-size: 0.62em; color: #b91c1c; font-weight: 600; }
.vocab-speak {
  background: #f97316;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  padding: 0;
}
.vocab-speak:hover { background: #ea580c; transform: scale(1.1); }
.vocab-speak.speaking {
  background: #dc2626;
  animation: vocab-pulse .6s ease-in-out infinite;
}
@keyframes vocab-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
/* 易错点卡片 */
.mistake-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.mistake-card-title { color: #b91c1c; }
.mistake-card ul, .keypoint-card ul {
  margin: 0 0 0 18px;
  padding: 0;
}
.mistake-card li, .keypoint-card li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.7;
}
/* 要点卡片 */
.keypoint-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.keypoint-card-title { color: #1d4ed8; }

/* ============ v13: 数学三卡片 ============ */
.detail-card, .method-card, .understand-card {
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.detail-card-title, .method-card-title, .understand-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.detail-card ul, .method-card ul, .understand-card ul {
  margin: 0 0 0 18px;
  padding: 0;
}
.detail-card li, .method-card li, .understand-card li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.7;
}
/* 知识点细则（蓝） */
.detail-card { background: #eff6ff; border: 1px solid #bfdbfe; }
.detail-card-title { color: #1d4ed8; }
/* 多角度解题（青绿） */
.method-card { background: #ecfdf5; border: 1px solid #a7f3d0; }
.method-card-title { color: #047857; }
/* 理解技巧（紫） */
.understand-card { background: #faf5ff; border: 1px solid #e9d5ff; }
.understand-card-title { color: #7e22ce; }

/* ============ v13: 英语生词卡片 ============ */
.envocab-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.envocab-card-title {
  color: #15803d;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.envocab-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.envocab-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  transition: background .15s;
}
.envocab-item:hover { background: #dcfce7; }
.envocab-word {
  font-weight: 700;
  font-size: 17px;
  color: #166534;
}
.envocab-item .ipa {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #0e7490;
  font-size: 13px;
  background: #ecfeff;
  padding: 1px 6px;
  border-radius: 4px;
}
.envocab-zh {
  color: #475569;
  font-size: 13px;
}
.envocab-item .vocab-speak {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

/* ============ v11.5: 选段朗读浮动按钮 ============ */
.tts-selection-btn {
  position: absolute;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1e3a8a, #4c1d95);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(30,58,138,.32);
  z-index: 200;
  cursor: pointer;
  display: none;
  font-family: inherit;
  transition: .2s;
  white-space: nowrap;
}
.tts-selection-btn:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 6px 16px rgba(30,58,138,.42);
}
.tts-selection-btn:active { transform: translateX(-50%) translateY(0); }
.tts-selection-btn.reading {
  background: linear-gradient(135deg, #b91c1c, #4c1d95);
}

/* ============ v11.5+: 移动端底部短提示 ============ */
.tts-mobile-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 58, 138, 0.94);
  color: white;
  padding: 12px 22px;
  border-radius: 22px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  max-width: 86vw;
  text-align: center;
  line-height: 1.4;
}
.tts-mobile-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .tts-mobile-hint { font-size: 13px; padding: 10px 16px; }
}

/* 选区高亮 */
::selection { background: #fed7aa; color: #1e293b; }
::-moz-selection { background: #fed7aa; color: #1e293b; }

/* ============ v11: TopBar 行动按钮 ============ */
.action-btn {
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: .2s;
  flex-shrink: 0;
  font-family: inherit;
}
.action-btn:hover { background: rgba(255, 255, 255, 0.32); }
.action-btn.active {
  background: #fbbf24;
  color: #78350f;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .topbar .actions .action-btn {
    padding: 5px 9px;
    font-size: 12px;
  }
}