/* 智享到家 · 从业者内容中心 · 共享样式
   视觉语言与 ynzxdj.com.cn 首页一致：深墨底 + 暖金，正文用暖纸色。
   移动端优先；不使用 @layer / 嵌套 / :has()，保证微信 webview 兼容。 */

:root{
  --dk:#0A0806; --dk2:#15100C;
  --paper:#F7F1E6; --paper2:#FFFDF8;
  --ink:#1E1A14; --ink2:#5D5449; --ink3:#8A7F70;
  --gold:#B07C33; --gold2:#D9A05B; --goldsoft:rgba(176,124,51,.10);
  --olive:#5A6B4C; --teal:#3E6269; --rose:#A8493F;
  --line:rgba(30,26,20,.12); --line2:rgba(30,26,20,.07);
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  --max:760px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(217,160,91,.28)}

/* ── 顶栏 ── */
.top{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 18px; background:rgba(10,8,6,.94);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(217,160,91,.14);
}
.brand{display:flex;align-items:baseline;gap:8px;color:#F5EFE6}
.brand b{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.04em}
.brand i{font-style:normal;font-size:11px;color:rgba(217,160,91,.9);letter-spacing:.14em}
.toplink{font-size:12.5px;color:rgba(245,239,230,.62);border:1px solid rgba(245,239,230,.18);padding:4px 10px;border-radius:999px;white-space:nowrap}
.toplink:active{background:rgba(217,160,91,.16);color:#F5EFE6}

/* ── 板块导航 ── */
.chipnav{
  position:sticky; top:47px; z-index:59;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:9px 16px; background:rgba(10,8,6,.88);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chipnav::-webkit-scrollbar{display:none}
.chipnav a{
  flex:none; font-size:13px; color:rgba(245,239,230,.58);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.10); transition:.18s;
}
.chipnav a.on{color:#0A0806;background:var(--gold2);border-color:var(--gold2);font-weight:600}
.chipnav a:active{transform:scale(.97)}

/* ── 容器 ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.wide{max-width:900px}

/* ── 首屏 ── */
.hero{
  position:relative; background:var(--dk); color:#F5EFE6;
  padding:44px 0 52px; overflow:hidden;
}
.hero:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 82% -18%, rgba(217,160,91,.20), transparent 62%),
    radial-gradient(560px 380px at 4% 8%, rgba(90,107,76,.16), transparent 66%);
}
.hero .wrap{position:relative}
.eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(217,160,91,.92); font-weight:600; margin-bottom:14px;
}
.hero h1{
  font-family:var(--serif); font-size:31px; line-height:1.34; font-weight:600;
  letter-spacing:.01em; margin-bottom:16px;
}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p{font-size:15px;line-height:1.85;color:rgba(245,239,230,.70);max-width:600px}
.hero .hr{height:1px;background:rgba(217,160,91,.22);margin:26px 0 0}
.hstats{display:flex;flex-wrap:wrap;gap:20px 24px;margin-top:22px}
.hstat{min-width:66px}
.hstat b{display:block;font-family:var(--serif);font-size:25px;color:var(--gold2);line-height:1.2}
.hstat span{font-size:11.5px;color:rgba(245,239,230,.5);letter-spacing:.03em}

/* ── 章节 ── */
.sec{padding:40px 0 6px}
.sec + .sec{padding-top:30px}
.sechead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.snum{
  flex:none;font-family:var(--serif);font-size:12px;color:var(--gold);
  border:1px solid rgba(176,124,51,.34);border-radius:4px;
  padding:2px 7px;line-height:1.5;margin-top:5px;letter-spacing:.06em;
}
.sec h2{font-family:var(--serif);font-size:23px;line-height:1.42;font-weight:600;letter-spacing:.01em}
.sec h3{font-family:var(--serif);font-size:18px;line-height:1.5;font-weight:600;margin:26px 0 10px}
.sec p{color:var(--ink2);font-size:15.5px;line-height:1.9;margin-bottom:14px}
.sec p strong{color:var(--ink);font-weight:600}
.lead{font-size:16px;color:var(--ink2)}

/* ── 卡片 ── */
.card{
  background:var(--paper2); border:1px solid var(--line);
  border-radius:14px; padding:20px 18px; margin:14px 0;
}
.card h4{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:8px;line-height:1.5}
.card p{font-size:14.5px;margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card .tag{
  display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--gold);
  background:var(--goldsoft);border:1px solid rgba(176,124,51,.22);
  padding:2px 8px;border-radius:999px;margin-bottom:9px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:600px){
  .grid2,.grid3{grid-template-columns:1fr}
}

/* ── 图文卡 ── */
.fig{margin:18px 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper2)}
.fig img{width:100%;height:auto}
.fig figcaption{font-size:12px;color:var(--ink3);line-height:1.7;padding:9px 14px 12px;border-top:1px solid var(--line2)}

/* ── 对照表 ── */
.cmp{margin:16px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper2)}
.cmp .row{display:grid;grid-template-columns:1fr 26px 1fr;border-top:1px solid var(--line2)}
.cmp .row:first-child{border-top:0;background:rgba(30,26,20,.035)}
.cmp .row > div{padding:11px 12px;font-size:13.5px;line-height:1.7}
.cmp .h{font-size:11.5px!important;letter-spacing:.1em;color:var(--ink3);font-weight:600}
.cmp .a{color:var(--ink3)}
.cmp .mid{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:12px;padding:0!important}
.cmp .b{color:var(--ink);font-weight:500}
/* 两列版：左边小标签、右边说明（身份表 / 钱的流向表用） */
.cmp.two .row{grid-template-columns:34% 1fr}
.cmp.two .a{color:var(--ink);font-weight:600;font-size:13px}
.cmp.two .b{font-weight:400;color:var(--ink2)}
.cmp.two .b b{font-weight:600;color:var(--ink)}

/* ── 步骤 ── */
.steps{margin:18px 0;list-style:none;counter-reset:s}
.steps li{
  position:relative;padding:0 0 20px 40px;counter-increment:s;
  border-left:1px solid var(--line);margin-left:13px;
}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li:before{
  content:counter(s);position:absolute;left:-13px;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--paper2);
  border:1px solid rgba(176,124,51,.4);color:var(--gold);
  font-family:var(--serif);font-size:12.5px;display:flex;align-items:center;justify-content:center;
}
.steps b{display:block;font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:4px}
.steps span{font-size:14.5px;color:var(--ink2);line-height:1.8}

/* ── 数字块 ── */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.num{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:14px}
.num b{display:block;font-family:var(--serif);font-size:24px;color:var(--gold);line-height:1.25}
.num span{font-size:12.5px;color:var(--ink2);line-height:1.6;display:block;margin-top:3px}
.num i{font-style:normal;font-size:10.5px;color:var(--ink3);display:block;margin-top:5px}

/* ── 提示条 ── */
.note{
  border-left:2px solid var(--gold); background:linear-gradient(90deg,rgba(176,124,51,.08),rgba(176,124,51,0));
  padding:12px 14px; border-radius:0 10px 10px 0; margin:16px 0;
  font-size:14px; color:var(--ink2); line-height:1.8;
}
.note b{color:var(--ink)}

/* ── CTA ── */
.cta{
  background:var(--dk); color:#F5EFE6; border-radius:18px;
  padding:30px 24px; margin:34px 0 8px; position:relative; overflow:hidden;
}
.cta:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 88% -20%,rgba(217,160,91,.22),transparent 64%);
}
.cta h3{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:10px;position:relative}
.cta p{font-size:14px;color:rgba(245,239,230,.66);margin-bottom:18px;position:relative}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:999px;font-size:14.5px;font-weight:600;
  background:var(--gold2);color:#1A1207;transition:.18s;
}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:#F5EFE6;border:1px solid rgba(245,239,230,.26)}
.btn.ghost:active{background:rgba(255,255,255,.08)}

/* ── 页脚 ── */
.foot{
  margin-top:44px;background:var(--dk);color:rgba(245,239,230,.5);
  padding:30px 0 40px;font-size:12.5px;line-height:1.9;
}
.foot .wrap{display:flex;flex-direction:column;gap:12px}
.foot a{color:rgba(245,239,230,.72)}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 16px}
.foot .rule{height:1px;background:rgba(255,255,255,.08)}

/* ── 内容中心首页：板块卡 ── */
.hubgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.hub{
  display:flex;gap:14px;align-items:stretch;
  background:var(--paper2);border:1px solid var(--line);border-radius:16px;
  padding:14px;transition:.18s;
}
.hub:active{transform:scale(.995);border-color:rgba(176,124,51,.4)}
.hub .th{flex:none;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--goldsoft)}
.hub .th img{width:100%;height:100%;object-fit:cover}
.hub .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.hub .tx b{font-family:var(--serif);font-size:16.5px;font-weight:600;display:block;margin-bottom:3px}
.hub .tx span{font-size:13px;color:var(--ink2);line-height:1.65;display:block}
.hub .tx em{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:.1em;margin-top:6px;display:block}
.hub.soon{opacity:.62}

/* ── 案例列表 ── */
.caselist{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
/* 阶段筛选条：横向滚动，别换行（换行会把列表推下去两行） */
.casefilter{
  display:flex;gap:8px;overflow-x:auto;margin:4px 0 14px;
  padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.casefilter::-webkit-scrollbar{display:none}
.casefilter .cf{
  flex:0 0 auto;appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ink3);font-size:12.5px;letter-spacing:.04em;padding:7px 13px;border-radius:999px;
  font-family:inherit;cursor:pointer;
}
.casefilter .cf.on{border-color:rgba(176,124,51,.52);background:rgba(176,124,51,.13);color:var(--gold2)}
.casecard{
  display:block;background:var(--paper2);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:.18s;
}
.casecard:active{border-color:rgba(176,124,51,.44)}
/* 用 padding 撑比例，不用 aspect-ratio：老版微信 webview 不认 aspect-ratio */
.casecard .cov{position:relative;padding-top:46%;background:#191510;overflow:hidden}
.casecard .cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.casecard .cov .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:
    radial-gradient(300px 200px at 78% 10%, rgba(217,160,91,.28), transparent 60%),
    linear-gradient(140deg,#1B1611,#0F0C09 70%);
}
.casecard .cov .ph.t1{background:radial-gradient(300px 200px at 76% 8%, rgba(90,107,76,.34), transparent 62%),linear-gradient(140deg,#171A13,#0D0F0B 72%)}
.casecard .cov .ph.t2{background:radial-gradient(300px 200px at 74% 12%, rgba(62,98,105,.34), transparent 62%),linear-gradient(140deg,#12181A,#0A0D0E 72%)}
.casecard .cov .ph.t3{background:radial-gradient(300px 200px at 80% 6%, rgba(168,73,63,.28), transparent 62%),linear-gradient(140deg,#1A1311,#0E0A09 72%)}
/* 阶段色：写在 .t0~.t3 之后才盖得住（同特异性，后定义优先） */
.casecard .cov .ph.pre{background:radial-gradient(300px 200px at 76% 10%, rgba(74,102,120,.36), transparent 62%),linear-gradient(140deg,#10161A,#090C0E 72%)}
.casecard .cov .ph.in{background:radial-gradient(300px 200px at 78% 8%, rgba(176,124,51,.34), transparent 62%),linear-gradient(140deg,#1A140D,#0D0906 72%)}
.casecard .cov .ph.post{background:radial-gradient(300px 200px at 74% 10%, rgba(122,104,58,.40), transparent 62%),linear-gradient(140deg,#1B170F,#0E0B07 72%)}
.casecard .cov .ph b{
  font-family:var(--serif);font-size:44px;color:rgba(217,160,91,.36);font-weight:600;letter-spacing:.04em;line-height:1;
}
.casecard .cov .ph i{font-style:normal;font-size:10px;letter-spacing:.14em;color:rgba(242,231,214,.30)}
.casecard .cov .badge{
  position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.06em;
  background:rgba(10,8,6,.72);color:var(--gold2);border:1px solid rgba(217,160,91,.36);
  padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px);
}
.casecard .cb{padding:14px 15px 15px}
.casecard h4{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.55;margin-bottom:6px}
.casecard p{font-size:13.5px;color:var(--ink2);line-height:1.75;margin-bottom:10px}
.casemeta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:var(--ink3);letter-spacing:.02em}
.casemeta i{font-style:normal}
.casemeta .dot{opacity:.5}

/* ── 案例详情正文 ── */
.art{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:22px 18px;margin-top:16px}
.art .kicker{font-size:11.5px;letter-spacing:.1em;color:var(--gold);margin-bottom:8px}
.art h1{font-family:var(--serif);font-size:23px;line-height:1.45;font-weight:600;margin-bottom:12px}
.art .sum{font-size:14.5px;color:var(--ink2);line-height:1.85;padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.b-para{font-size:15.5px;line-height:1.95;color:var(--ink);margin:12px 0;text-indent:2em}
.b-h{font-family:var(--serif);font-size:17px;font-weight:600;margin:22px 0 8px}
.b-quote{
  border-left:2px solid var(--teal);background:rgba(62,98,105,.06);
  padding:12px 14px;margin:14px 0;border-radius:0 10px 10px 0;font-size:15px;line-height:1.85;
}
.b-quote span{display:block;font-size:12px;color:var(--ink3);margin-top:6px}
.b-img{margin:16px 0}
.b-img figcaption{font-size:11.5px;color:var(--ink3);line-height:1.7;margin-top:7px}
.b-tip{
  background:rgba(90,107,76,.08);border:1px dashed rgba(90,107,76,.34);
  border-radius:10px;padding:11px 13px;font-size:13px;color:var(--ink2);line-height:1.8;margin:14px 0;
}
.b-insight{
  background:linear-gradient(135deg,rgba(176,124,51,.10),rgba(176,124,51,.02));
  border:1px solid rgba(176,124,51,.26);border-radius:12px;
  padding:14px 15px;margin:16px 0;font-size:15px;line-height:1.85;color:var(--ink);font-weight:500;
}
.b-stats{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0;background:var(--paper)}
.b-stats .t{font-size:12.5px;color:var(--ink3);padding:10px 13px;border-bottom:1px solid var(--line2);letter-spacing:.04em}
.b-stats .r{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-top:1px solid var(--line2);font-size:13.5px}
.b-stats .r:first-of-type{border-top:0}
.b-stats .l{color:var(--ink2)}
.b-stats .v{display:flex;align-items:center;gap:8px}
.b-stats .v s{text-decoration:none;color:var(--ink3);font-size:12.5px}
.b-stats .v b{font-family:var(--serif);font-size:16px;color:var(--ink)}
.b-stats .v u{text-decoration:none;font-size:11px;color:var(--ink3);margin-left:1px}
.b-bar{margin:6px 0 2px}
.b-bar .bi{margin:10px 0}
.b-bar .bl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-bottom:5px}
.b-bar .bl b{font-family:var(--serif);color:var(--ink)}
.b-bar .bl em{font-style:normal;color:var(--gold);font-family:var(--serif)}
.b-bar .track{height:7px;border-radius:999px;background:rgba(30,26,20,.09);overflow:hidden}
.b-bar .fill{height:100%;border-radius:999px;background:var(--teal)}
.b-ratio .t{font-size:13px;color:var(--ink2);margin-bottom:9px;font-weight:600}
.b-ratio .strip{display:flex;height:14px;border-radius:999px;overflow:hidden;margin-bottom:9px}
.b-ratio .strip i{display:block;height:100%}
.b-ratio .lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ink2)}
.b-ratio .lg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:1px}
.b-cab{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.b-cab .ci{padding:12px 13px;border-top:1px solid var(--line2);font-size:13.5px;line-height:1.85;color:var(--ink2)}
.b-cab .ci:first-child{border-top:0}
.b-cab .ci b{display:inline-block;font-size:11px;letter-spacing:.06em;color:var(--gold);background:var(--goldsoft);border-radius:4px;padding:1px 6px;margin-right:6px}
.art .endnote{font-size:12.5px;color:var(--ink3);line-height:1.85;border-top:1px solid var(--line2);margin-top:20px;padding-top:14px}

/* ── 状态 ── */
.loading,.empty{
  text-align:center;padding:46px 20px;color:var(--ink3);font-size:14px;
}
.empty b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:8px}
.skel{height:132px;border-radius:16px;background:linear-gradient(90deg,rgba(30,26,20,.05),rgba(30,26,20,.09),rgba(30,26,20,.05));background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 占位页 ── */
.ph-block{
  border:1px dashed rgba(176,124,51,.4);border-radius:14px;padding:26px 20px;
  text-align:center;color:var(--ink2);font-size:14px;line-height:1.85;margin:16px 0;
  background:rgba(176,124,51,.04);
}
.ph-block b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);margin-bottom:6px}

/* ── 面包屑 ── */
.crumb{font-size:12px;color:var(--ink3);padding:14px 0 0}
.crumb a{color:var(--gold)}