/*!
 * math-formulas.css — 数学公式（数竞 / 初中数学 / 高中数学）
 *
 * 约定：
 *   · 类名统一 mf- 前缀，不和 al-/wd-/cl-/cb- 混
 *   · 颜色全部走 chat.css 的 CSS 变量（深色主题自动生效）；变量缺失时有浅色兜底
 *   · [hidden] 兜底必须带 !important（.dsh-tools/check-hidden-css.mjs）
 *   · 375 宽：页面不横滚；公式本身在卡片/详情块内部横向滚动
 *   · 独立页 body[data-math-standalone] 自己定义一套变量，不污染 index.html
 */

/* 独立页（/math-formulas.html）的变量作用域：只作用于 body，不影响 index.html */
body[data-math-standalone] {
  --brand: #4d6bfe;
  --brand-strong: #3a56e0;
  --bg: #ffffff;
  --bg-side: #f7f8fa;
  --bg-hover: #eceef2;
  --bubble-user: #eff3ff;
  --ink: #1b1e28;
  --ink-soft: #4a5163;
  --muted: #8b93a7;
  --line: #e6e8ee;
  --code-bg: #f6f7f9;
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}
@media (prefers-color-scheme: dark) {
  body[data-math-standalone] {
    --bg: #17181c;
    --bg-side: #1e1f24;
    --bg-hover: #2a2c33;
    --bubble-user: #232731;
    --ink: #e8eaef;
    --ink-soft: #b9bfcc;
    --muted: #868da0;
    --line: #2e3038;
    --code-bg: #101114;
  }
  body[data-math-standalone] .mf-block-cond { background: #2a2314; }
  body[data-math-standalone] .mf-block-cond .mf-block-t { color: #fbbf24; }
  body[data-math-standalone] .mf-quick.is-on { background: #3b2f12; color: #fbbf24; border-color: #f59e0b; }
  body[data-math-standalone] .mf-mini.is-fav,
  body[data-math-standalone] .mf-btn.is-fav { background: #3b2f12; color: #fbbf24; }
  body[data-math-standalone] .mf-mini.is-mastered,
  body[data-math-standalone] .mf-btn.is-mastered { background: #12301c; color: #86efac; }
}
html[data-theme="dark"] .mf-block-cond { background: #2a2314; }
html[data-theme="dark"] .mf-block-cond .mf-block-t { color: #fbbf24; }
html[data-theme="dark"] .mf-quick.is-on { background: #3b2f12; color: #fbbf24; border-color: #f59e0b; }
html[data-theme="dark"] .mf-mini.is-fav,
html[data-theme="dark"] .mf-btn.is-fav { background: #3b2f12; color: #fbbf24; }
html[data-theme="dark"] .mf-mini.is-mastered,
html[data-theme="dark"] .mf-btn.is-mastered { background: #12301c; color: #86efac; }
body[data-math-standalone] .mf-panel { position: fixed; }
body.mf-open { overflow: hidden; }

/* 数竞板块欢迎区的入口卡（index.html 里的静态按钮，按板块显隐） */
.mf-board-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 16px;
  background: var(--bg-side, #f7f8fa);
  color: var(--ink, #1b1e28);
  text-align: left;
  cursor: pointer;
}
.mf-board-entry:hover { border-color: var(--brand, #4d6bfe); }
.mf-board-entry:active { background: var(--bg-hover, #eceef2); }
/* 三个数学板块各有一张卡；同一板块只显示一张，但 DOM 里三张都在，
   相邻时收紧一点间距，避免切换瞬间看起来像两张叠在一起。 */
.mf-board-entry + .mf-board-entry { margin-top: 10px; }
.mf-board-entry-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bubble-user, #eff3ff);
  font-size: 21px;
}
.mf-board-entry-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mf-board-entry-text b { font-size: 15px; font-weight: 800; color: var(--ink, #1b1e28); }
.mf-board-entry-text small { font-size: 12px; color: var(--muted, #8b93a7); line-height: 1.4; }
.mf-board-entry-arrow { flex: 0 0 auto; color: var(--muted, #8b93a7); font-size: 22px; line-height: 1; }

/* 面板 */
.mf-panel {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow: hidden;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* 顶栏 */
.mf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: var(--bg-side, #f7f8fa);
  border-bottom: 1px solid var(--line, #e6e8ee);
}
.mf-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--bg-hover, #eceef2);
  color: var(--ink-soft, #4a5163);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.mf-icon-btn:active { filter: brightness(.94); }
.mf-titles { flex: 1 1 auto; min-width: 0; }
.mf-title {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #8b93a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 搜索 / 筛选 */
.mf-toolbar {
  flex: 0 0 auto;
  padding: 8px 12px 9px;
  background: var(--bg-side, #f7f8fa);
  border-bottom: 1px solid var(--line, #e6e8ee);
}
.mf-search-row { display: flex; gap: 7px; align-items: center; }
.mf-search {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 11px;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  font: inherit;
  font-size: 16px;              /* 16px：避免 iOS 聚焦时自动放大 */
}
.mf-search:focus { outline: 2px solid var(--brand, #4d6bfe); outline-offset: 1px; }
.mf-clear {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--ink-soft, #4a5163);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mf-chiprow {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.mf-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 999px;
  background: var(--bg, #fff);
  color: var(--ink-soft, #4a5163);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.mf-chip.is-on {
  background: var(--brand, #4d6bfe);
  border-color: var(--brand, #4d6bfe);
  color: #fff;
  font-weight: 700;
}
.mf-quickrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.mf-count {
  margin-left: auto;
  color: var(--muted, #8b93a7);
  font-size: 12px;
  white-space: nowrap;
}
.mf-quick {
  padding: 5px 10px;
  border: 1px dashed var(--line, #e6e8ee);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft, #4a5163);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mf-quick.is-on {
  border-style: solid;
  border-color: #d97706;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}
/* ★「⚡ 只看二级」开关：关着是紫色虚线，打开是紫→蓝渐变实底（和收藏/已掌握的橙色区分） */
.mf-quick-sec {
  border-style: dashed;
  border-color: #c4b5fd;
  color: #6d28d9;
  background: transparent;
}
.mf-quick-sec.is-on {
  border-style: solid;
  border-color: #6366f1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 700;
}

/* 主体 */
.mf-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px 24px;
  -webkit-overflow-scrolling: touch;
}
.mf-view { display: flex; flex-direction: column; gap: 10px; }
.mf-list { display: flex; flex-direction: column; gap: 9px; }

/* 卡片 */
.mf-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 15px;
  background: var(--bg-side, #f7f8fa);
  text-align: left;
  cursor: pointer;
}
.mf-card:active { background: var(--bg-hover, #eceef2); }
.mf-card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.mf-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #1b1e28);
}
.mf-level {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.mf-level-0 { background: #dcfce7; color: #166534; }
.mf-level-1 { background: #dbeafe; color: #1e40af; }
.mf-level-2 { background: #ffedd5; color: #c2410c; }
.mf-level-3 { background: #ede9fe; color: #6d28d9; }
.mf-level-4 { background: #1f2937; color: #fbbf24; }

/* ★「⚡ 二级」徽章：蓝紫渐变 + 白字，和上面 5 档难度徽章（全是浅底深字）一眼区分 */
.mf-sec-badge {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(99, 102, 241, .35);
}
/* 二级公式的卡片：左侧一条淡紫竖线，扫列表时更好认 */
.mf-card-sec { border-color: #ddd6fe; box-shadow: inset 3px 0 0 #a78bfa; }
html[data-theme="dark"] .mf-card-sec { border-color: #3f3d63; box-shadow: inset 3px 0 0 #6d5bd0; }

.mf-formula {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  color: var(--ink, #1b1e28);
}
.mf-formula .katex-display { margin: .15em 0; }
.mf-formula .katex { font-size: 1.02em; }
.mf-plain {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--code-bg, #f6f7f9);
  color: var(--ink-soft, #4a5163);
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.mf-card-cond,
.mf-card-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #4a5163);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mf-card-cond b, .mf-card-note b { color: var(--muted, #8b93a7); font-weight: 700; }
.mf-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 11px;
  color: var(--muted, #8b93a7);
}
.mf-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e6e8ee);
  color: var(--ink-soft, #4a5163);
}
.mf-card-actions { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.mf-mini {
  border: 1px solid var(--line, #e6e8ee);
  background: var(--bg, #fff);
  color: var(--muted, #8b93a7);
  border-radius: 8px;
  padding: 2px 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}
.mf-mini.is-fav { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
.mf-mini.is-mastered { color: #166534; border-color: #16a34a; background: #f0fdf4; }

/* 空状态 / 加载 */
.mf-empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--muted, #8b93a7);
  font-size: 14px;
  line-height: 1.8;
}
.mf-more {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed var(--line, #e6e8ee);
  border-radius: 12px;
  background: transparent;
  color: var(--brand-strong, #3a56e0);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mf-msg {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-top: 1px solid var(--line, #e6e8ee);
  background: var(--bubble-user, #eff3ff);
  color: var(--brand-strong, #3a56e0);
  font-size: 13px;
}

/* 详情 */
.mf-detail { display: flex; flex-direction: column; gap: 10px; }
.mf-detail-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.mf-detail-title {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
}
.mf-detail-meta {
  font-size: 12px;
  color: var(--muted, #8b93a7);
}
.mf-detail-formula {
  padding: 14px 12px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 15px;
  background: var(--bg-side, #f7f8fa);
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}
.mf-detail-formula .katex-display { margin: .2em 0; }
.mf-detail-formula .katex { font-size: 1.32em; }
.mf-block {
  padding: 12px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 14px;
  background: var(--bg-side, #f7f8fa);
}
.mf-block-t {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-strong, #3a56e0);
}
.mf-block-cond {
  border-left: 4px solid #d97706;
  background: #fffbeb;
}
html[data-theme="dark"] .mf-block-cond { background: #2a2314; }
.mf-block-cond .mf-block-t { color: #92400e; }
html[data-theme="dark"] .mf-block-cond .mf-block-t { color: #fbbf24; }

/* ★ 二级公式的「怎么推的」区块：紫线 + 淡紫底，和「适用条件」的橙色块区分 */
.mf-block-derive {
  border-left: 4px solid #8b5cf6;
  background: #f5f3ff;
}
.mf-block-derive .mf-block-t { color: #5b21b6; }
.mf-derive-tip {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted, #8b93a7);
}
body[data-math-standalone] .mf-block-derive { background: #f5f3ff; }
@media (prefers-color-scheme: dark) {
  body[data-math-standalone] .mf-block-derive { background: #211d33; }
  body[data-math-standalone] .mf-block-derive .mf-block-t { color: #c4b5fd; }
  body[data-math-standalone] .mf-card-sec { border-color: #3f3d63; box-shadow: inset 3px 0 0 #6d5bd0; }
  body[data-math-standalone] .mf-quick-sec { color: #c4b5fd; border-color: #4c3f8f; }
}
html[data-theme="dark"] .mf-block-derive { background: #211d33; }
html[data-theme="dark"] .mf-block-derive .mf-block-t { color: #c4b5fd; }
html[data-theme="dark"] .mf-quick-sec { color: #c4b5fd; border-color: #4c3f8f; }
/* 深色下「收藏/已掌握」的橙色 is-on 规则比 mf-quick-sec 更具体，这里补回来，
   否则「只看二级」打开后会变成橙色，和收藏开关分不清 */
html[data-theme="dark"] .mf-quick.mf-quick-sec.is-on,
body[data-math-standalone] .mf-quick.mf-quick-sec.is-on {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: #818cf8;
  color: #fff;
}
.mf-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink, #1b1e28);
}
.mf-example {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line, #e6e8ee);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft, #4a5163);
}
.mf-example:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.mf-related {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mf-related-b {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mf-related-b .mf-related-arrow { margin-left: auto; color: var(--muted, #8b93a7); }
.mf-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mf-btn {
  padding: 9px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 11px;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mf-btn-main {
  border-color: var(--brand, #4d6bfe);
  background: var(--brand, #4d6bfe);
  color: #fff;
  font-weight: 700;
}
.mf-btn.is-fav { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.mf-btn.is-mastered { border-color: #16a34a; background: #f0fdf4; color: #166534; }

/* 桌面端：筛选 chips 换行显示，不横向滚动 */
@media (min-width: 700px) {
  .mf-toolbar { padding: 10px 16px 11px; }
  .mf-body { padding: 14px 18px 28px; }
  .mf-chiprow { flex-wrap: wrap; overflow: visible; }
  .mf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
  .mf-card { height: 100%; }
  .mf-more { grid-column: 1 / -1; }
  .mf-empty { grid-column: 1 / -1; }
}

/* 375 宽：收紧边距，公式内部横滚，页面绝不横滚 */
@media (max-width: 420px) {
  .mf-head { padding: 8px 10px; }
  .mf-title { font-size: 16px; }
  .mf-toolbar { padding: 7px 9px 8px; }
  .mf-body { padding: 9px 9px 22px; }
  .mf-card { padding: 11px 12px; }
  .mf-detail-formula { padding: 10px 6px; }
  .mf-detail-formula .katex { font-size: 1.08em; }
  .mf-detail-title { font-size: 17px; }
  .mf-quickrow { gap: 5px; }
  .mf-count { flex: 1 1 100%; margin-left: 0; }
  .mf-card-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; }
}

/* [hidden] 兜底：作者样式的 display:flex/grid 会覆盖浏览器默认规则 */
[hidden] { display: none !important; }

/* 打印：只留正文，隐藏按钮和筛选 */
@media print {
  .mf-panel { position: static; background: #fff; }
  .mf-head, .mf-toolbar, .mf-msg, .mf-detail-actions, .mf-card-actions, .mf-more { display: none !important; }
  .mf-body { overflow: visible; padding: 0; }
  .mf-card, .mf-block, .mf-detail-formula { break-inside: avoid; page-break-inside: avoid; border-color: #ddd; }
}