/* ============================================================
   版式：compass 极简留白式
   结构：极细一行导航 → 特大号左对齐标题 hero → 细线统计条
         → 极简分类行 → 两列素色信息列表（hover 橄榄色块+箭头）
   气质：大量留白、细 1px 分隔线、炭墨+橄榄点缀
   配色：C22 炭墨橄榄｜炭墨 #2f2f2b 主 / 橄榄 #6b705c 点缀 / 暖纸底 #faf9f4 / 暖灰线 #e4e2d8
   ============================================================ */
:root{
  --cp-accent:#2f2f2b;      /* 炭墨主色 */
  --cp-bamboo:#6b705c;      /* 橄榄点缀 */
  --cp-bamboo-d:color-mix(in srgb,var(--cp-bamboo) 80%,#000);
  --cp-bg:#faf9f4;          /* 暖纸感底 */
  --cp-line:#e4e2d8;        /* 暖灰线 */
  --cp-ink:#26261f;
  --cp-deep:#55554e;
  --cp-muted:#6c6c64;
  --cp-card:#ffffff;
  /* 渐变缩略占位：三档明度（低饱和极简） */
  --cp-pic1:linear-gradient(135deg,var(--cp-bamboo),var(--cp-accent));
  --cp-pic2:linear-gradient(135deg,color-mix(in srgb,var(--cp-bamboo) 62%,#fff),var(--cp-bamboo));
  --cp-pic3:linear-gradient(135deg,color-mix(in srgb,var(--cp-line) 88%,#fff),color-mix(in srgb,var(--cp-bamboo) 30%,#fff));
}
body{background:var(--cp-bg);color:var(--cp-ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}

/* ---------- 极细一行导航 ---------- */
.cp-head{border-bottom:1px solid var(--cp-line)}
.cp-head-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:30px;height:64px}
.cp-logo{font-size:19px;font-weight:800;letter-spacing:2px}
.cp-logo sup{font-size:10px;font-weight:600;color:color-mix(in srgb,var(--cp-bamboo) 62%,var(--cp-ink));letter-spacing:1px;margin-left:4px}
.cp-nav{display:flex;align-items:center;gap:26px;margin-left:auto;flex-wrap:wrap}
.cp-nav a{font-size:13.5px;color:var(--cp-deep);padding:20px 0;border-bottom:1px solid transparent}
.cp-nav a:hover{color:var(--cp-ink);border-bottom-color:var(--cp-accent)}
.cp-nav a.on{color:var(--cp-ink);font-weight:800;border-bottom-color:var(--cp-bamboo)}
.cp-nav .cp-pub{font-weight:800;color:color-mix(in srgb,var(--cp-bamboo) 70%,var(--cp-ink))}
.cp-nav .cp-pub:hover{color:color-mix(in srgb,var(--cp-bamboo-d) 70%,var(--cp-ink));border-bottom-color:var(--cp-bamboo)}
.cp-nav .cp-user{font-size:12.5px;color:var(--cp-muted)}

/* ---------- 主体（大留白） ---------- */
.cp-main{max-width:1200px;margin:0 auto;padding:72px 24px 96px}

/* ---------- hero：特大号左对齐标题 ---------- */
.cp-hero{max-width:820px;margin-bottom:72px}
.cp-hero-ico{color:var(--cp-bamboo);margin-bottom:22px}
.cp-hero h1{font-size:56px;font-weight:800;letter-spacing:2px;line-height:1.15}
.cp-hero-sub{font-size:17px;color:var(--cp-deep);margin-top:18px;font-weight:600}
.cp-hero-desc{font-size:14px;line-height:2.1;color:var(--cp-muted);margin-top:14px;max-width:620px}
.cp-hero-cta{display:flex;gap:22px;margin-top:32px;align-items:center}
.cp-cta{display:inline-block;background:var(--cp-accent);color:var(--cp-card);font-size:14px;font-weight:700;padding:13px 30px}
.cp-cta:hover{background:var(--cp-bamboo)}
.cp-cta-ghost{display:inline-block;font-size:13.5px;font-weight:700;color:var(--cp-deep);padding:13px 6px;border-bottom:1px solid var(--cp-line)}
.cp-cta-ghost:hover{color:var(--cp-bamboo);border-bottom-color:var(--cp-bamboo)}

/* ---------- 细线统计条 ---------- */
.cp-stats{display:flex;gap:0;border-top:1px solid var(--cp-line);border-bottom:1px solid var(--cp-line);margin-bottom:72px}
.cp-stat{flex:1;display:flex;align-items:baseline;gap:12px;padding:26px 26px}
.cp-stat+.cp-stat{border-left:1px solid var(--cp-line)}
.cp-stat .ico{font-size:20px;align-self:center}
.cp-stat b{font-size:38px;font-weight:800;line-height:1}
.cp-stat .lbl{font-size:12.5px;color:var(--cp-muted);letter-spacing:2px}

/* ---------- 区块标题 ---------- */
.cp-sec{margin-bottom:72px}
.cp-sec-hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--cp-ink);padding-bottom:12px;margin-bottom:0}
.cp-sec-hd h2{font-size:24px;font-weight:800;letter-spacing:3px}
.cp-sec-hd span{font-size:12px;color:var(--cp-muted);letter-spacing:2px}
.cp-sec-hd .cp-more{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--cp-bamboo) 70%,var(--cp-ink))}

/* ---------- 分类入口行 ---------- */
.cp-cats{display:grid;grid-template-columns:1fr 1fr}
.cp-cat{display:flex;align-items:center;gap:18px;padding:26px 18px;border-bottom:1px solid var(--cp-line);transition:background .18s,color .18s}
.cp-cat .ico{font-size:34px;line-height:1}
.cp-cat .nm{font-size:18px;font-weight:800;letter-spacing:1px}
.cp-cat .n{font-size:12.5px;color:var(--cp-muted);margin-left:2px}
.cp-cat .arr{margin-left:auto;color:var(--cp-muted);opacity:0;transform:translateX(-6px);transition:.18s}
.cp-cat:hover{background:color-mix(in srgb,var(--cp-bamboo) 10%,#fff);padding-left:26px}
.cp-cat:hover .arr{opacity:1;transform:translateX(0);color:var(--cp-bamboo)}
.cp-cat:hover .n{color:var(--cp-bamboo-d)}

/* ---------- 两列极简信息列表 ---------- */
.cp-list2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.cp-item{display:flex;gap:20px;padding:26px 4px;border-bottom:1px solid var(--cp-line);transition:background .18s}
.cp-item:hover{background:color-mix(in srgb,var(--cp-bamboo) 9%,#fff)}
.cp-thumb{position:relative;flex:0 0 96px;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.cp-thumb.p1{background:var(--cp-pic1)}
.cp-thumb.p2{background:var(--cp-pic2)}
.cp-thumb.p3{background:var(--cp-pic3)}
.cp-thumb .emo{font-size:30px}
.cp-thumb .ch{position:absolute;right:4px;bottom:0;font-size:28px;font-weight:800;color:color-mix(in srgb,#fff 34%,transparent);line-height:1}
.cp-item-bd{flex:1;display:flex;flex-direction:column;min-width:0}
.cp-item-bd .top{display:flex;justify-content:space-between;font-size:11.5px}
.cp-item-bd .k{font-weight:800;color:color-mix(in srgb,var(--cp-bamboo) 70%,var(--cp-ink));letter-spacing:1px}
.cp-item-bd .d{color:var(--cp-muted)}
.cp-item-bd h3{font-size:16px;font-weight:800;line-height:1.5;margin:7px 0 5px}
.cp-item-bd p{font-size:12.5px;line-height:1.75;color:var(--cp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-item-bd .m{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:8px}

/* ---------- 分类速览两列 ---------- */
.cp-catlists{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.cp-catlist{padding:10px 0 24px}
.cp-catlist-hd{display:flex;justify-content:space-between;align-items:baseline;padding:16px 4px 4px;border-bottom:1px solid var(--cp-ink)}
.cp-catlist-hd .nm{font-size:17px;font-weight:800;letter-spacing:1px}
.cp-catlist-hd .nm:hover{color:var(--cp-bamboo)}
.cp-catlist-hd .n{font-size:12px;color:var(--cp-muted)}
.cp-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--cp-line);transition:background .18s}
.cp-row h4{font-size:14px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-row .arr{color:var(--cp-muted);opacity:0;transform:translateX(-6px);transition:.18s}
.cp-row:hover{background:color-mix(in srgb,var(--cp-bamboo) 10%,#fff);padding-left:12px}
.cp-row:hover .arr{opacity:1;transform:translateX(0);color:var(--cp-bamboo)}
.cp-row:hover h4{color:var(--cp-bamboo-d)}
.cp-empty{font-size:13px;color:var(--cp-muted);padding:12px 4px}
.cp-empty a{color:var(--cp-bamboo);font-weight:700}

/* ---------- 分类页头 / 详情头 ---------- */
.cp-cathead{margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--cp-line)}
.cp-cathead .ico{font-size:44px}
.cp-cathead h1{font-size:40px;font-weight:800;letter-spacing:2px;margin-top:10px}
.cp-cathead p{font-size:13px;color:var(--cp-muted);margin-top:10px;letter-spacing:1px}
.cp-detailhead .k{font-size:12px;font-weight:800;letter-spacing:2px;color:color-mix(in srgb,var(--cp-bamboo) 70%,var(--cp-ink))}
.cp-detailhead .m{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12.5px;margin-top:14px;color:var(--cp-muted)}

/* ---------- 详情页 ---------- */
.cp-price{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--cp-line)}
.cp-price .lbl{font-size:12px;letter-spacing:3px;color:var(--cp-muted);font-weight:700}
.cp-price b{font-size:24px;font-weight:800}
.cp-price .note{font-size:12px;color:var(--cp-muted)}
.cp-content{padding:32px 0;font-size:15.5px;line-height:2.2;white-space:pre-wrap;color:var(--cp-deep);border-bottom:1px solid var(--cp-line)}
.cp-contact{padding:30px 0;border-bottom:1px solid var(--cp-line)}
.cp-contact h3{font-size:16px;font-weight:800;letter-spacing:3px;margin-bottom:16px}
.cp-contact h3::before{content:"— ";color:var(--cp-bamboo)}
.cp-contact p{font-size:14px;line-height:2.2}
.cp-contact b{font-weight:800}
.cp-contact .phone-on{font-size:19px;font-weight:800;letter-spacing:1px;color:var(--cp-bamboo-d)}
.cp-mask-btn{display:inline-block;background:var(--cp-accent);color:var(--cp-card);padding:6px 18px;font-size:12.5px;font-weight:700;margin-left:10px}
.cp-mask-btn:hover{background:var(--cp-bamboo)}
.cp-contact .tip-line{border-left-color:var(--cp-bamboo)}
.cp-contact .tip-line a{color:var(--cp-bamboo-d);font-weight:700}
.cp-contact .cp-warn{background:var(--ui-warn-bg);border-left-color:var(--ui-warn);color:var(--ui-warn-d)}

/* ---------- 页脚 ---------- */
.cp-foot{border-top:1px solid var(--cp-line);padding:56px 24px 32px;font-size:13px;line-height:2.1;background:var(--cp-bg)}
.cp-foot-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.2fr;gap:36px}
.cp-foot-logo{font-size:18px;font-weight:800;letter-spacing:2px;margin-bottom:8px}
.cp-foot-h{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--cp-muted);margin-bottom:8px}
.cp-foot .cp-flink{display:block}
.cp-foot a{color:var(--cp-deep)}
.cp-foot a:hover{color:var(--cp-bamboo)}
.cp-foot-legal{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.cp-foot-bot{max-width:1200px;margin:0 auto;padding-top:26px;margin-top:26px;border-top:1px solid var(--cp-line);text-align:left;font-size:12px;color:var(--cp-muted)}
.cp-foot-bot a{color:var(--cp-ink);font-weight:700}

@media(max-width:980px){
  .cp-hero h1{font-size:38px}
  .cp-list2,.cp-catlists,.cp-cats{grid-template-columns:1fr}
  .cp-stats{flex-wrap:wrap}
  .cp-stat{flex:1 1 45%}
  .cp-stat+.cp-stat{border-left:0}
  .cp-foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .cp-foot-in{grid-template-columns:1fr}
}

/* ===== 通用组件层映射：base.css 的 --ui-* 跟随本版配色 ===== */
:root{
  --ui-accent:var(--cp-accent);
  --ui-accent-d:color-mix(in srgb,var(--cp-accent) 84%,#000);
  --ui-accent-s:color-mix(in srgb,var(--cp-bamboo) 14%,#fff);
  --ui-accent-line:color-mix(in srgb,var(--cp-bamboo) 34%,#fff);
  --ui-on-accent:#fff;
  --ui-ink:var(--cp-ink);
  --ui-deep:var(--cp-deep);
  --ui-muted:var(--cp-muted);
  --ui-muted-2:color-mix(in srgb,var(--cp-accent) 30%,#fff);
  --ui-bg:var(--cp-bg);
  --ui-bg-2:color-mix(in srgb,var(--cp-line) 55%,#fff);
  --ui-card:var(--cp-card);
  --ui-card-2:#fff;
  --ui-line:var(--cp-line);
  --ui-line-2:color-mix(in srgb,var(--cp-line) 62%,#fff);
}