/* ===== 统一配色 ===== */
:root {
  --md-primary-fg-color: #34557f;
  --md-primary-fg-color--light: #4a6c96;
  --md-primary-fg-color--dark: #284465;
  --md-accent-fg-color: #c8704a;
}

/* 锚点跳转时标题不被固定顶栏遮住 */
.md-content h1, .md-content h2 { scroll-margin-top: 4.5rem; }

/* 加宽正文区，桌面端给卡片图更多空间 */
.md-grid { max-width: 72rem; }
.md-content { padding: 0 .4rem; }

/* 章/节标题美化 */
.md-content h1 {
  font-weight: 700;
  border-bottom: 3px solid var(--md-primary-fg-color, #3f51b5);
  padding-bottom: .3rem;
}
.md-content h2 {
  font-weight: 700;
  margin-top: 1.6rem;
  padding: .2rem .6rem;
  border-left: 5px solid var(--md-primary-fg-color, #3f51b5);
  background: color-mix(in srgb, var(--md-primary-fg-color, #3f51b5) 8%, transparent);
  border-radius: 0 4px 4px 0;
}

/* ===== 知识点卡片 ===== */
.kp {
  --c: #34557f;                              /* 类型强调色，下方按类型覆盖 */
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--c);
  border-radius: 8px;
  padding: .55rem 1.1rem 1rem;
  margin: 1.1rem 0;
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .15s;
  content-visibility: auto;                  /* 跳过屏幕外卡片渲染，提升滚动性能 */
  contain-intrinsic-size: auto 360px;
}
.kp:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
h3.kp-title {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  padding: .2rem .7rem;
  border-radius: 999px;                      /* 胶囊标签，更雅致 */
  margin: 0 0 .55rem 0;
  font-size: .88rem;
  line-height: 1.6;
  scroll-margin-top: 4.5rem;
}
h3.kp-title::before {                         /* 类型色圆点 */
  content: "";
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--c);
}
/* 各类型强调色（柔和、协调） */
.kp.definition { --c: #34557f; }   /* 蓝 */
.kp.theorem    { --c: #2f7d62; }   /* 绿 */
.kp.property   { --c: #a8741c; }   /* 金 */
.kp.result     { --c: #6f57a0; }   /* 紫 */
.kp.problem    { --c: #b15247; }   /* 红 */
.kp.example    { --c: #5d6b7a; }   /* 灰蓝 */

.card-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: .3rem 0;
}
.has-blank { cursor: pointer; }

/* 顶部浮动工具条（搜索 + 开关），统一成一个胶囊容器 */
#kp-bar {
  position: fixed;
  top: 3.4rem;
  right: .8rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .35rem;
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
#kp-bar button {
  font-size: .75rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  color: var(--md-primary-fg-color);
  border-radius: 999px;
  padding: .25rem .7rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#kp-bar button:hover { background: color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent); }
#kp-bar button.on {
  background: var(--md-primary-fg-color);
  color: #fff;
}
#kp-q {
  font-size: .8rem;
  border: none;
  background: transparent;
  color: var(--md-default-fg-color);
  border-radius: 999px;
  padding: .25rem .7rem;
  width: 10rem;
  outline: none;
}

/* 搜索结果面板 */
#kp-results {
  position: fixed;
  top: 5.4rem;
  right: .8rem;
  z-index: 50;
  width: 23rem;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
a.kp-r {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color) !important;
  text-decoration: none;
}
a.kp-r:last-child { border-bottom: none; }
a.kp-r:hover { background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent); }
.kp-r-c {
  flex: none;
  font-size: .66rem;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  border-radius: 999px;
  padding: .05rem .45rem;
}
.kp-r-t { font-size: .82rem; }
.kp-r-empty { padding: .7rem; color: var(--md-default-fg-color--light); font-size: .8rem; }

/* ===== \blank 点击显示 ===== */
.blank {
  background: #c9ced6;
  color: transparent;
  border-radius: 3px;
  padding: 0 .15em;
  cursor: pointer;
  transition: color .15s, background .15s;
  -webkit-user-select: none;
  user-select: none;
}
.blank.revealed {
  background: #fff3b0;
  color: inherit;
}
/* KaTeX 内的 \blank（\htmlClass{blank}{}）：隐藏其内部公式 */
.blank:not(.revealed) .katex,
.blank:not(.revealed) > * { color: transparent; }
.blank.revealed .katex { color: inherit; }

.tips {
  background: #eee;
  border-radius: 3px;
  padding: 0 .15em;
  font-family: "KaiTi", "STKaiti", serif;
}

/* 仅供搜索、视觉隐藏 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== 响应式：手机/平板 ===== */
/* 平板：开关条略缩 */
@media screen and (max-width: 76.1875em) {
  #kp-bar { top: 3rem; }
}
/* 手机：开关条与搜索移到底部，搜索框自适应宽度 */
@media screen and (max-width: 44.9375em) {
  #kp-bar {
    top: auto; bottom: .5rem; left: .5rem; right: .5rem;
    background: var(--md-default-bg-color, #fff);
    padding: .35rem; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
  }
  #kp-q { flex: 1 1 auto; width: auto; min-width: 0; }
  #kp-bar button { white-space: nowrap; }
  #kp-results {
    top: auto; bottom: 3.2rem; left: .5rem; right: .5rem;
    width: auto; max-width: none; max-height: 60vh;
  }
  .md-main__inner { padding-bottom: 3.5rem; }   /* 给底部栏留白 */
  /* 手机端：尽量让图撑满屏宽 —— 收窄页面与卡片内边距，图 width:100% 拉伸 */
  .md-content__inner { margin-left: .25rem; margin-right: .25rem; }
  .md-typeset { padding: 0; }
  .kp { padding: .5rem .3rem .7rem; }
  .card-img {
    width: calc(100% + .2rem);     /* 略微突破卡片内边距，贴近卡片两侧 */
    margin-left: -.1rem;
  }
  /* 手机端标题缩小 */
  .md-content h1 { font-size: 1.35rem; }
  .md-content h2 { font-size: 1.05rem; }
  h3.kp-title { font-size: .8rem; padding: .1rem .45rem; }
}