/* 全部本机字体、零外部依赖 —— Google Fonts 与多数 CDN 在大陆打不开，一律不引 */
:root{
  --bg:#fbfaf8; --card:#fff; --fg:#1a1a1a; --fg-dim:#6b6b6b; --fg-faint:#9a9a9a;
  --line:#e7e4df; --accent:#1f5f4f; --accent-soft:#eaf2ef; --warn:#8a5a1a; --warn-soft:#fdf4e6;
  --radius:10px; --maxw:1140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131414; --card:#1b1d1d; --fg:#ececec; --fg-dim:#a8a8a8; --fg-faint:#767676;
    --line:#2c2f2f; --accent:#6fbfa5; --accent-soft:#1c2a26; --warn:#d9a866; --warn-soft:#2a2318;
  }
}
:root[data-theme="dark"]{
  --bg:#131414; --card:#1b1d1d; --fg:#ececec; --fg-dim:#a8a8a8; --fg-faint:#767676;
  --line:#2c2f2f; --accent:#6fbfa5; --accent-soft:#1c2a26; --warn:#d9a866; --warn-soft:#2a2318;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* ── 顶部 ── */
header{padding:40px 0 22px; border-bottom:1px solid var(--line)}
h1{margin:0 0 6px; font-size:28px; line-height:1.3; letter-spacing:-.01em}
.tagline{margin:0 0 4px; color:var(--fg); font-size:17px}
.subtitle{margin:0; color:var(--fg-dim); font-size:14.5px; max-width:60ch}
.stats{display:flex; gap:28px; margin:22px 0 0; flex-wrap:wrap}
.stat b{display:block; font-size:24px; font-weight:650; color:var(--accent); line-height:1.2}
.stat span{font-size:12.5px; color:var(--fg-dim)}
.updated{margin:18px 0 0; font-size:12.5px; color:var(--fg-faint)}

/* ── 搜索 ── */
.searchbar{margin:18px 0 0; position:relative}
.searchbar input{
  width:100%; padding:11px 14px; font-size:15px; font-family:inherit; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
}
.searchbar input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}

/* ── 布局 ── */
.layout{display:grid; grid-template-columns:186px 1fr; gap:36px; padding:26px 0 56px; align-items:start}

/* 桌面：左侧 sticky 侧栏 */
nav.side{position:sticky; top:20px}
nav.side button{
  display:block; width:100%; text-align:left; padding:8px 11px; margin-bottom:2px;
  font:inherit; font-size:14.5px; color:var(--fg-dim); background:none;
  border:0; border-radius:7px; cursor:pointer;
}
nav.side button:hover{background:var(--accent-soft); color:var(--fg)}
nav.side button[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
nav.side .n{float:right; font-size:12px; color:var(--fg-faint); font-variant-numeric:tabular-nums}

/* 手机：顶部横向可滑 chip 条（不做汉堡菜单——多一次点击就少一批人看完） */
nav.chips{display:none}

/* ── 服务卡片 ── */
.cat-head{margin:0 0 4px; font-size:19px; letter-spacing:-.01em}
.cat-note{margin:0 0 14px; font-size:13.5px; color:var(--warn); background:var(--warn-soft);
  padding:7px 11px; border-radius:7px; display:inline-block}
.cat + .cat{margin-top:38px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 17px; display:flex; flex-direction:column;
}
.card.feat{border-color:var(--accent)}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.name{font-size:16px; font-weight:620; margin:0}
.badge{font-size:11px; color:var(--accent); background:var(--accent-soft);
  padding:2px 7px; border-radius:20px; white-space:nowrap; align-self:center}
.price{font-size:20px; font-weight:650; color:var(--accent); white-space:nowrap;
  font-variant-numeric:tabular-nums; line-height:1.2}
.price .unit{font-size:12.5px; font-weight:400; color:var(--fg-dim)}
.meta{margin:9px 0 0; font-size:13px; color:var(--fg-dim)}
.meta .k{color:var(--fg-faint)}
.req{margin:11px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--fg-dim)}
.req li{position:relative; padding-left:16px; margin-bottom:3px}
.req li::before{content:""; position:absolute; left:3px; top:.62em; width:4px; height:4px;
  border-radius:50%; background:var(--accent); opacity:.55}
.note{margin:11px 0 0; padding-top:10px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--fg-faint); line-height:1.55}

.empty{padding:50px 0; text-align:center; color:var(--fg-faint)}

/* ── 底部 ── */
footer{border-top:1px solid var(--line); padding:26px 0 50px}
.disclaimer{margin:0 0 20px; font-size:13px; color:var(--fg-dim); max-width:72ch}
.contact{font-size:15px}
.contact .k{color:var(--fg-dim); margin-right:8px}
.contact .v{font-weight:600; color:var(--accent)}
.foot-updated{margin:16px 0 0; font-size:12px; color:var(--fg-faint)}

/* ── 手机 ── */
@media (max-width:760px){
  header{padding:26px 0 16px}
  h1{font-size:23px}
  .stats{gap:20px}
  .stat b{font-size:20px}
  .layout{grid-template-columns:1fr; gap:0; padding:0 0 44px}
  nav.side{display:none}
  nav.chips{
    display:flex; gap:7px; overflow-x:auto; padding:11px 16px;
    position:sticky; top:0; z-index:10; background:var(--bg);
    border-bottom:1px solid var(--line);
    /* 本元素是 body 直接子元素、本来就是通栏，不要再加负边距 ——
       加了会让页面 scrollWidth 比 clientWidth 多出 32px，手机上整页横向溢出 */
    margin:0 0 20px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  nav.chips::-webkit-scrollbar{display:none}
  nav.chips button{
    flex:0 0 auto; padding:7px 13px; font:inherit; font-size:14px; white-space:nowrap;
    color:var(--fg-dim); background:var(--card); border:1px solid var(--line);
    border-radius:20px; cursor:pointer;
  }
  nav.chips button[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
  .grid{grid-template-columns:1fr}
  .cat + .cat{margin-top:30px}
}
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) nav.chips button[aria-current="true"]{color:#0f1a17}
}
@media (max-width:760px){
  :root[data-theme="dark"] nav.chips button[aria-current="true"]{color:#0f1a17}
}