/* ============================================================
   基础：reset / 排版 / 全局布局（页头、页脚、首页、视图切换）
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* 原先写了 text-rendering: optimizeLegibility——它既不改善中文（中文字形的字距
   * 由字体自身决定），又可能让拉丁字距忽紧忽松，还拖慢长列表渲染，故去掉。
   * font-kerning 才是真正生效的那项：让拉丁字体启用 OpenType 字距调整。 */
  font-kerning: normal;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ---------- 页头 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.brand-logo { width: 28px; height: 28px; }
.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--c-text);
}
.header-search {
  position: relative;
  margin-left: auto;
  width: min(320px, 42vw);
}
.header-search .search-icon,
.hero-search .search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--c-text-3);
  pointer-events: none;
}
.header-search input,
.hero-search input {
  width: 100%;
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  border-radius: var(--r-md);
  outline: none;
  color: var(--c-text);
}
.header-search input {
  height: 38px;
  padding: 0 12px 0 38px;
  font-size: var(--fs-14);
}
.header-search input:focus,
.hero-search input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-soft);
}

/* ---------- 官方公众号入口（页头搜索框右侧） ----------
 * 三种触发方式全覆盖，且不需要 JS：
 *   :hover          → 鼠标悬停
 *   :focus-within   → 键盘 Tab 聚焦，以及手机点按（button 被点即获得焦点）
 * 手机上没有悬停，靠 :focus-within 撑住；再点页面别处即失焦收起。 */
/* ---------- 反馈引导（页头，公众号入口左侧） ----------
 * 一句话提示，告诉访客「有建议去公众号留言」，紧挨着右边的公众号按钮。
 * 页头是「品牌 + 搜索框 + 提示 + 按钮」挤在一行，宽度不够就必须降级，
 * 所以文案分两档，并按「搜索框还在不在」分段切换：
 *   ≥961px        搜索框在 → 整句
 *   841–960px     搜索框在 → 短句
 *   721–840px     搜索框在，短句也放不下 → 整段收起
 *   511–720px     搜索框已收起，腾出 320px → 恢复短句
 *   ≤510px        连短句都放不下 → 整段收起（按钮自己写着「官方公众号」）
 * ⚠️ .wx-hint 这一层永远不 display:none —— 窄屏它是把按钮顶到最右侧的锚点。 */
.wx-hint {
  display: flex;
  align-items: center;
  font-size: var(--fs-13);
  line-height: 1.3;
  color: var(--c-text-3);
  white-space: nowrap;
}
.wx-hint-short { display: none; }

@media (max-width: 960px) {
  .wx-hint-long { display: none; }
  .wx-hint-short { display: inline; }
}
@media (max-width: 840px) {
  .wx-hint-short { display: none; }
}

.wx-entry { position: relative; flex: none; }
.wx-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  font-size: var(--fs-14);
  color: var(--c-text-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
}
.wx-btn:hover,
.wx-btn:focus-visible {
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.wx-icon { width: 18px; height: 18px; flex: none; }

.wx-pop {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  display: none;
  /* 用透明内边距做视觉间隔，而不是 margin —— 否则鼠标从按钮移到卡片上的途中
   * 会经过一段不属于 .wx-entry 的空白，:hover 断开，卡片当场消失。 */
  padding-top: 10px;
}
.wx-entry:hover .wx-pop,
.wx-entry:focus-within .wx-pop { display: block; }
.wx-pop-inner {
  width: 210px;
  padding: 15px 15px 12px;
  text-align: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.wx-qr {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 8px;
}
.wx-tip {
  margin: 11px 0 0;
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--c-text-3);
}

/* 键盘可达性：键盘聚焦时给出清晰焦点环（鼠标点击不显示，避免视觉噪音） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ---------- 首页 Hero ---------- */
.hero {
  padding: var(--sp-12) 0 var(--sp-8);
  text-align: center;
  background:
    radial-gradient(680px 260px at 50% -80px, var(--c-brand-soft) 0%, rgba(253, 238, 240, 0) 70%),
    var(--c-bg);
}
.hero-title {
  font-size: var(--fs-38);
  /* 700 而非 800。Windows 上两者其实等价——微软雅黑只有 Regular / Bold 两档实体字重，
   * 请求 800 会被静默地落到 Bold（实测宽度完全一致，不产生人工加粗）；
   * 但 macOS 的 San Francisco 真有 Heavy / Black 档，800 会实打实变重。
   * 写 700 是为了让两端落在同一档、结果可预期，而不是为了修某个渲染问题。 */
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.25;
}
.hero-sub {
  margin-top: var(--sp-3);
  color: var(--c-text-2);
  font-size: var(--fs-16);
}
.hero-search {
  position: relative;
  max-width: 560px;
  margin: var(--sp-8) auto 0;
}
.hero-search .search-icon { left: 16px; width: 19px; height: 19px; }
.hero-search input {
  height: 52px;
  padding: 0 16px 0 46px;
  font-size: var(--fs-16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.trust-bar {
  margin-top: var(--sp-4);
  color: var(--c-text-3);
  font-size: var(--fs-13);
  letter-spacing: .2px;
}

/* ---------- 首页分区 ---------- */
.home-section { margin-top: var(--sp-12); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-head h2 {
  font-size: var(--fs-20);
  font-weight: 700;
}

/* ---------- 首页：左侧分类栏 + 右侧内容 ----------
 * 首页不再铺开全部计算器卡片，改成「选分类 → 看该类」：
 * 默认态只留热门推荐，页面长度从 57 张卡片降到 13 张。 */
.home-layout {
  display: grid;
  /* 左侧栏固定宽 + 右侧内容吃满剩余宽度。
   * 整块**不套 .container**——套上去的话宽屏会先居中，左右各空出几百像素。 */
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
}
.home-side {
  position: sticky;
  /* 吸顶时停在页头下方，长分类列表滚动时导航不跟着跑掉 */
  top: var(--header-h);
  align-self: start;
  /* 贴住页面左边缘的整条侧栏：高度铺满页头以下的视口 */
  height: calc(100vh - var(--header-h));
  padding: var(--sp-5) var(--sp-4) var(--sp-4) var(--sp-6);
  background: var(--c-bg-subtle);
  border-right: 1px solid var(--c-border);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-main {
  min-width: 0;
  padding: var(--sp-8) var(--sp-8) 0;
}
.side-title {
  padding: 0 var(--sp-3) var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .6px;
}
.cat-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;             /* 触屏可点区域下限 */
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cat-item:hover { background: var(--c-bg-track); color: var(--c-text); }
.cat-item.is-active { background: var(--c-brand); color: #fff; }
.cat-item.is-active:hover { background: var(--c-brand-hover); }
.cat-sym {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: var(--fs-12);
  font-weight: 700;
}
.cat-item.is-active .cat-sym { background: rgba(255, 255, 255, .22); color: #fff; }
.cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-count {
  flex: none;
  color: var(--c-text-3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.cat-item.is-active .cat-count { color: rgba(255, 255, 255, .82); }
/* 两块主内容互斥显示（默认态 / 搜索态），谁在都不该带 48px 上边距 */
.home-main > .home-section { margin-top: 0; }

.home-about {
  margin: var(--sp-12) 0 var(--sp-8);
  padding: var(--sp-6);
  background: var(--c-bg-subtle);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  /* 正文段落限宽：宽屏上卡片网格可以铺满，但一行太长读起来很累 */
  max-width: 1200px;
}
.home-about h2 {
  font-size: var(--fs-18);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.home-about p {
  color: var(--c-text-2);
  font-size: var(--fs-14);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
}
.home-about p:last-child { margin-bottom: 0; }
.home-about strong { color: var(--c-text); font-weight: 600; }
/* 指向静态工具总览页（calc/index.html）的站内链接 */
.home-about a {
  color: var(--c-brand);
  border-bottom: 1px solid var(--c-brand-soft);
}
.home-about a:hover { border-bottom-color: var(--c-brand); }

/* ---------- 计算器视图 ---------- */
#view-calc { padding: var(--sp-6) 0 var(--sp-12); }

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: var(--sp-12);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  padding: var(--sp-8) 0;
}
.footer-note {
  color: var(--c-text-2);
  font-size: var(--fs-13);
  line-height: 1.9;
}
.footer-copy {
  margin-top: var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-12);
}
.footer-beian {
  margin-top: 4px;
  color: var(--c-text-3);
  font-size: var(--fs-12);
}
.footer-beian a { color: inherit; }
.footer-beian a:hover { color: var(--c-brand); }

/* ---------- 响应式 ---------- */

/* 窄屏：左侧栏改成页头下方的一条横向分类条（不换行、横向滚动）。
 * 12 个分类按钮若照桌面那样竖排或换行，会把热门推荐顶到屏幕外；
 * 压成一条的好处是点完分类结果就出现在紧下方，且分类条始终吸顶可换。 */
@media (max-width: 900px) {
  .home-layout { display: block; }
  .home-side {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    height: auto;                 /* 取消桌面端「铺满整屏」的高度 */
    padding: var(--sp-2) 0;
    background: var(--c-bg);
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
    overflow: visible;
  }
  .side-title { display: none; }
  .cat-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-item {
    flex: none;
    width: auto;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
  }
  .cat-sym { display: none; }
  .home-main { padding: var(--sp-5) var(--sp-4) 0; }
}

@media (max-width: 720px) {
  .container { padding: 0 var(--sp-4); }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero-title { font-size: var(--fs-28); }
  .hero-sub { font-size: var(--fs-14); }
  .hero-search { margin-top: var(--sp-6); }
  .hero-search input { height: 48px; font-size: var(--fs-16); }
  .header-search { display: none; }
  /* 搜索框在窄屏收起后，它的 margin-left:auto 也一并消失。
   * 这个 auto 现在交给提示文案（.wx-hint）接力 —— 它永远在流里，所以按钮始终贴右。 */
  .wx-hint { margin-left: auto; }
  /* 搜索框让出的 320px 足够放下短句了，恢复显示 */
  .wx-hint-short { display: inline; }
  .home-section { margin-top: var(--sp-8); }
  .home-about { padding: var(--sp-4); margin: var(--sp-8) 0 var(--sp-6); }
}

@media (max-width: 510px) {
  /* 品牌名 + 按钮已把这一行占满，任何文案都放不下 —— 整段收起。
   * .wx-hint 本身仍保留（零宽度），继续充当按钮顶右的锚点。 */
  .wx-hint-long,
  .wx-hint-short { display: none; }
}