/* 黑白软件库官网样式 —— 黑白双色 + 中性灰，克制排版
   类名规范：无声调拼音 + hbrj 品牌前缀 */
:root {
  --mo: #17130f;
  --mo-ruan: #3a352f;
  --zhi: #ffffff;
  --qian-ban: #f6f5f2;
  --shen-ban: #efece7;
  --xian: #e3dfd8;
  --hui: #6f6a61;
  --nuan: #b5342a;
  --jin: #c98a1b;
  --yuan-xiao: 8px;
  --yuan-zhong: 12px;
  --yuan-da: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--mo);
  background: var(--zhi);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

.hbrj-banxin { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

:focus-visible { outline: 2px solid var(--mo); outline-offset: 2px; border-radius: 4px; }

[id] { scroll-margin-top: 72px; }

/* ---------- 顶部导航 ---------- */
.hbrj-dinglan {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--xian);
  backdrop-filter: blur(6px);
}

.hbrj-dinglan-nei {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.hbrj-pinpai {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
}

.hbrj-pinpai img { display: block; border-radius: 6px; }

.hbrj-pinpai-ming { font-size: 17px; letter-spacing: 0.5px; }

.hbrj-daohang {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14.5px;
}

.hbrj-daohang a { text-decoration: none; color: var(--mo-ruan); }

.hbrj-daohang a:hover { color: var(--mo); }

.hbrj-caozuo-niu {
  flex-shrink: 0;
  background: var(--mo);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
}

.hbrj-caozuo-niu:hover { background: #000; }

.hbrj-caidan-niu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--xian);
  border-radius: var(--yuan-xiao);
  width: 38px;
  height: 38px;
  font-size: 20px;
  color: var(--mo);
  cursor: pointer;
}

/* ---------- 首屏 ---------- */
.hbrj-shouping {
  background:
    linear-gradient(180deg, var(--qian-ban) 0%, var(--zhi) 100%);
  border-bottom: 1px solid var(--xian);
}

.hbrj-shouping-nei {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 20px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 56px;
  align-items: center;
}

.hbrj-meiti {
  font-size: 13.5px;
  letter-spacing: 1px;
  color: var(--hui);
  margin-bottom: 14px;
}

.hbrj-shouping h1 {
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.hbrj-shouping-fu {
  font-size: 17px;
  color: var(--mo-ruan);
  max-width: 30em;
  margin-bottom: 26px;
}

.hbrj-shouping-cao { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

.hbrj-zhuniu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mo);
  color: #fff;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 999px;
}

.hbrj-zhuniu:hover { background: #000; }

.hbrj-ciniu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--mo);
  color: var(--mo);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
}

.hbrj-ciniu:hover { background: var(--qian-ban); }

.hbrj-shouping-zhu { font-size: 13.5px; color: var(--hui); }

.hbrj-shouping-ma {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbrj-shouping-ma img {
  width: 88px;
  height: auto;
  border: 1px solid var(--xian);
  border-radius: var(--yuan-xiao);
  padding: 4px;
  background: #fff;
}

.hbrj-shouping-ma figcaption { font-size: 13px; color: var(--hui); }

/* ---------- 首屏产品工作台 ---------- */
.hbrj-gongzuotai { max-width: 430px; width: 100%; margin: 0 auto; }

.hbrj-gzt-kuang {
  background: var(--mo);
  border-radius: 18px;
  padding: 22px 20px 14px;
  color: #f4f1ec;
  box-shadow: 0 24px 48px -24px rgba(23, 19, 15, 0.45);
}

.hbrj-gzt-ding { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }

.hbrj-gzt-ming { font-size: 19px; font-weight: 700; }

.hbrj-wenhou { font-size: 12.5px; color: rgba(244, 241, 236, 0.62); }

.hbrj-touxiang {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jin);
  color: var(--mo);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.hbrj-gonggao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(244, 241, 236, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--yuan-xiao);
  padding: 8px 10px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.hbrj-gonggao-qian {
  background: var(--nuan);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.hbrj-sousuo {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--hui);
  border-radius: 999px;
  font-size: 13px;
  padding: 9px 14px;
  margin-bottom: 12px;
}

.hbrj-fenlei-qun { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.hbrj-fenlei-qun span {
  font-size: 12.5px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(244, 241, 236, 0.78);
}

.hbrj-fenlei-qun .hbrj-dangqian { background: #fff; color: var(--mo); border-color: #fff; font-weight: 600; }

.hbrj-ruanjian-liebiao { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }

.hbrj-ruanjian-liebiao li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--yuan-zhong);
  padding: 10px 12px;
}

.hbrj-ruanjian-liebiao strong { display: block; font-size: 13.5px; font-weight: 600; }

.hbrj-ruanjian-liebiao em { display: block; font-style: normal; font-size: 11.5px; color: rgba(244, 241, 236, 0.55); }

.hbrj-tubiao {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  color: #fff;
}

.hbrj-tubiao-hong { background: var(--nuan); }
.hbrj-tubiao-mo { background: #4a443c; }
.hbrj-tubiao-jin { background: var(--jin); color: var(--mo); }

.hbrj-huoqu {
  margin-left: auto;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 3px 12px;
  flex-shrink: 0;
}

.hbrj-dilan {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
  font-size: 11.5px;
}

.hbrj-dilan span { display: grid; justify-items: center; gap: 2px; color: rgba(244, 241, 236, 0.5); }

.hbrj-dilan span i { font-size: 17px; }

.hbrj-dilan .hbrj-dangqian { color: #f4f1ec; font-weight: 600; }

.hbrj-tushuo { text-align: center; font-size: 12.5px; color: var(--hui); margin-top: 10px; }

/* ---------- 通用区块标题 ---------- */
h2 { font-size: 30px; line-height: 1.3; letter-spacing: 1px; margin-bottom: 12px; }

.hbrj-daoyu { color: var(--hui); font-size: 15.5px; margin-bottom: 34px; max-width: 36em; }

/* ---------- 资源分类 ---------- */
.hbrj-fenleiban { padding: 66px 0 60px; }

.hbrj-fenlei-ge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.hbrj-fenlei-xiang {
  border: 1px solid var(--xian);
  border-radius: var(--yuan-zhong);
  padding: 20px 20px 16px;
  background: var(--zhi);
}

.hbrj-fenlei-xiang dt { font-size: 17px; font-weight: 700; margin-bottom: 6px; }

.hbrj-fenlei-xiang dt i { color: var(--mo-ruan); margin-right: 4px; }

.hbrj-fenlei-xiang dd { font-size: 14px; color: var(--hui); }

.hbrj-fenlei-tishi {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--qian-ban);
  border-radius: var(--yuan-zhong);
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--mo-ruan);
}

.hbrj-fenlei-tishi i { font-size: 18px; margin-top: 3px; }

/* ---------- 产品截图 ---------- */
.hbrj-jietuqu { padding: 60px 0; background: var(--qian-ban); border-top: 1px solid var(--xian); border-bottom: 1px solid var(--xian); }

.hbrj-jietu-gui {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 218px;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}

.hbrj-jietu-ka { scroll-snap-align: start; }

.hbrj-jietu-ka img {
  width: 100%;
  height: auto;
  border-radius: var(--yuan-zhong);
  border: 1px solid var(--xian);
  background: #fff;
  display: block;
}

.hbrj-jietu-ka figcaption { font-size: 13px; color: var(--hui); margin-top: 8px; text-align: center; }

.hbrj-jietu-tishi { margin-top: 8px; font-size: 13px; color: var(--hui); }

/* ---------- 平台能力 ---------- */
.hbrj-nengliqu { padding: 66px 0 58px; }

.hbrj-nengli-shuang {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.hbrj-nengli-kuai {
  border: 1px solid var(--xian);
  border-radius: var(--yuan-da);
  padding: 26px 26px 22px;
}

.hbrj-nengli-kuai h3, .hbrj-nengli-gongju h3, .hbrj-nengli-xiao h3 { font-size: 18px; margin-bottom: 10px; }

.hbrj-nengli-kuai h3 i, .hbrj-nengli-gongju h3 i, .hbrj-nengli-xiao h3 i { margin-right: 6px; }

.hbrj-nengli-kuai p { font-size: 14.5px; color: var(--mo-ruan); }

.hbrj-nengli-xiazai { background: var(--mo); border-color: var(--mo); color: #f4f1ec; }

.hbrj-nengli-xiazai p { color: rgba(244, 241, 236, 0.78); }

.hbrj-nengli-xiazai h3 i { color: var(--jin); }

.hbrj-nengli-gongju {
  border: 1px solid var(--xian);
  border-radius: var(--yuan-da);
  padding: 24px 26px 22px;
  background: var(--qian-ban);
  margin-bottom: 16px;
}

.hbrj-nengli-gongju p { font-size: 14.5px; color: var(--mo-ruan); margin-bottom: 14px; }

.hbrj-gongju-qun { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

.hbrj-gongju-qun li {
  background: var(--zhi);
  border: 1px solid var(--xian);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 600;
}

.hbrj-nengli-san {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hbrj-nengli-xiao { border-top: 2px solid var(--mo); padding-top: 14px; }

.hbrj-nengli-xiao p { font-size: 14px; color: var(--hui); }

/* ---------- 使用场景 ---------- */
.hbrj-changjingqu { padding: 56px 0; background: var(--qian-ban); border-top: 1px solid var(--xian); border-bottom: 1px solid var(--xian); }

.hbrj-changjing-liu { display: grid; gap: 14px; max-width: 46em; }

.hbrj-changjing-liu p {
  background: var(--zhi);
  border: 1px solid var(--xian);
  border-radius: var(--yuan-zhong);
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--mo-ruan);
}

.hbrj-changjing-liu strong { color: var(--mo); }

/* ---------- 问答 ---------- */
.hbrj-wendaqu { padding: 62px 0 56px; }

.hbrj-wenda-liebiao { max-width: 780px; }

.hbrj-wenda-liebiao details { border-bottom: 1px solid var(--xian); }

.hbrj-wenda-liebiao summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  padding: 17px 4px;
}

.hbrj-wenda-liebiao summary::-webkit-details-marker { display: none; }

.hbrj-wenda-liebiao summary i { flex-shrink: 0; color: var(--hui); transition: transform 0.2s; }

.hbrj-wenda-liebiao details[open] summary i { transform: rotate(180deg); }

.hbrj-wenda-liebiao details p { font-size: 14.5px; color: var(--hui); padding: 0 4px 18px; max-width: 44em; }

/* ---------- 用户评价 ---------- */
.hbrj-pingjiaqu { padding: 56px 0 62px; background: var(--qian-ban); border-top: 1px solid var(--xian); }

.hbrj-pingjia-ge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

.hbrj-pingjia-xiang {
  background: var(--zhi);
  border: 1px solid var(--xian);
  border-radius: var(--yuan-zhong);
  padding: 18px 20px;
}

.hbrj-pingjia-ding { display: flex; gap: 11px; margin-bottom: 10px; }

.hbrj-pingjia-touxiang {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--shen-ban);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.hbrj-pingjia-ming { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.4; }

.hbrj-pingjia-xing { display: block; font-size: 12.5px; color: var(--jin); letter-spacing: 2px; line-height: 1.4; }

.hbrj-pingjia-xiang time { display: block; font-size: 12px; color: var(--hui); line-height: 1.5; }

.hbrj-pingjia-xiang p { font-size: 14px; color: var(--mo-ruan); }

/* ---------- 底部行动区 ---------- */
.hbrj-xingdongqu { background: var(--mo); color: #f4f1ec; }

.hbrj-xingdong-nei {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 58px;
  padding-bottom: 58px;
}

.hbrj-xingdong-wen h2 { color: #fff; }

.hbrj-xingdong-wen p { color: rgba(244, 241, 236, 0.72); font-size: 15.5px; max-width: 30em; margin-bottom: 22px; }

.hbrj-bainiu { background: #fff; color: var(--mo); }

.hbrj-bainiu:hover { background: var(--qian-ban); }

.hbrj-xingdong-ma { text-align: center; flex-shrink: 0; }

.hbrj-xingdong-ma img {
  width: 148px;
  height: auto;
  border-radius: var(--yuan-zhong);
  background: #fff;
  padding: 8px;
}

.hbrj-xingdong-ma figcaption { font-size: 13px; color: rgba(244, 241, 236, 0.6); margin-top: 10px; }

/* ---------- 页脚 ---------- */
.hbrj-yejiao { background: var(--mo); color: rgba(244, 241, 236, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.1); }

.hbrj-yejiao-nei {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13.5px;
  text-align: center;
}

.hbrj-yejiao-pinpai { display: flex; align-items: center; gap: 8px; color: #f4f1ec; font-weight: 600; }

.hbrj-yejiao-pinpai img { border-radius: 5px; display: block; }

.hbrj-yejiao-banquan { font-size: 12.5px; }

/* ---------- 返回顶部 ---------- */
.hbrj-huiding {
  position: fixed;
  right: 22px;
  bottom: 26px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--xian);
  background: var(--zhi);
  color: var(--mo);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(23, 19, 15, 0.35);
  z-index: 30;
}

.hbrj-huiding:hover { background: var(--qian-ban); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hbrj-shouping-nei { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; padding-bottom: 48px; }
  .hbrj-gongzuotai { max-width: 400px; }
  .hbrj-fenlei-ge { grid-template-columns: repeat(2, 1fr); }
  .hbrj-nengli-shuang { grid-template-columns: 1fr; }
  .hbrj-pingjia-ge { grid-template-columns: repeat(2, 1fr); }
  .hbrj-nengli-san { grid-template-columns: 1fr 1fr; }
  .hbrj-nengli-xiao:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hbrj-daohang {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--zhi);
    border-bottom: 1px solid var(--xian);
    flex-direction: column;
    gap: 0;
    padding: 6px 20px 12px;
  }
  .hbrj-daohang.hbrj-zhankai { display: flex; }
  .hbrj-daohang a { padding: 11px 0; border-bottom: 1px solid var(--qian-ban); font-size: 15px; }
  .hbrj-daohang a:last-child { border-bottom: none; }
  .hbrj-caidan-niu { display: grid; place-items: center; }
  .hbrj-caozuo-niu { margin-left: 12px; }
  .hbrj-shouping h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  .hbrj-shouping-ma { display: none; }
  .hbrj-fenleiban, .hbrj-nengliqu, .hbrj-wendaqu { padding-top: 46px; padding-bottom: 44px; }
  .hbrj-jietuqu, .hbrj-changjingqu, .hbrj-pingjiaqu { padding-top: 42px; padding-bottom: 46px; }
  .hbrj-fenlei-ge { grid-template-columns: 1fr; }
  .hbrj-pingjia-ge { grid-template-columns: 1fr; }
  .hbrj-nengli-san { grid-template-columns: 1fr; }
  .hbrj-jietu-gui { grid-auto-columns: 190px; gap: 14px; }
  .hbrj-xingdong-nei { flex-direction: column; align-items: flex-start; padding-top: 44px; padding-bottom: 44px; }
  .hbrj-xingdong-ma { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hbrj-wenda-liebiao summary i { transition: none; }
}