/* ==========================================================================
   wpdx-liezhe 子主题 — 组件样式 (components.css)
   --------------------------------------------------------------------------
   来源：HTML/01-首页.html 设计稿 <style> 区块
   规则：所有选择器严格限定在 .lz-main 作用域内，
         避免污染父主题 header / footer。
   依赖 CSS 变量（在 style.css 中定义）：
     --brand / --brand-dark / --brand-soft / --teal
     --ink / --body / --muted / --line / --bg / --card
     --shadow / --shadow-hover
   ========================================================================== */


/* ==========================================================================
   1. 通用容器 / Reset（仅作用域内）
   ========================================================================== */
.lz-main *{box-sizing:border-box}
.lz-main a{color:inherit;text-decoration:none}

.lz-main .wrap{margin:0 auto;}
.lz-main .ph{background:linear-gradient(135deg,#e4e7f0,#d8dce8);display:flex;align-items:center;justify-content:center;color:#a5abbb;font-size:11px}

.lz-main .section{padding:22px 0}
.lz-main .section:first-of-type{padding-top:24px}

.lz-main .panel{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:30px 32px}


/* ==========================================================================
   2. 板块标题 .sec-head
   ========================================================================== */
.lz-main .sec-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.lz-main .sec-head .sec-title{display:flex;align-items:center;flex-wrap:wrap}
.lz-main .sec-head .sec-title .bar{width:4px;height:19px;background:var(--brand);border-radius:2px;margin-right:11px;flex-shrink:0}
.lz-main .sec-head .sec-title h2{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.lz-main .sec-head .sec-title .sub{font-size:13px;color:var(--muted)}
.lz-main .sec-head .more{font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap;margin-top:2px}

/* 板块标题 - 同行模式（标题+副标题一行） */
.lz-main .sec-head--inline .sec-title{align-items:baseline;gap:8px}
.lz-main .sec-head--inline .sec-title .bar{align-self:center}
.lz-main .sec-head--inline .sec-title h2{margin-bottom:0}
.lz-main .sec-head--inline .sec-title .sub{font-size:13.5px;font-weight:400}

/* 板块标题 - 分行模式 */
.lz-main .sec-head .sub--stack{width:100%;margin-left:15px;margin-top:4px;font-size:13.5px;color:var(--muted);font-weight:400}


/* ==========================================================================
   3. HERO 首屏卡片
   ========================================================================== */
.lz-main .hero{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.lz-main .hero::before{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,var(--brand-soft),transparent 70%)}
.lz-main .hero::after{content:"";position:absolute;bottom:-140px;left:-90px;width:340px;height:340px;background:radial-gradient(circle,#e3f6f6,transparent 70%)}
.lz-main .hero .inner,
.lz-main .hero .lz-wrap{position:relative}
.lz-main .hero .tag,
.lz-main .hero .hero__tag{display:inline-block;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:18px;margin-bottom:16px}
.lz-main .hero h1,
.lz-main .hero .hero__title{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1.26;margin-bottom:12px}
.lz-main .hero h1 em,
.lz-main .hero .hero__title em{font-style:normal;background:linear-gradient(120deg,var(--brand),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lz-main .hero .sub,
.lz-main .hero .hero__desc{font-size:15.5px;color:var(--body);margin-bottom:26px}
.lz-main .hero .actions,
.lz-main .hero .hero__actions{display:flex;gap:13px;justify-content:center;margin-bottom:20px}
.lz-main .hero .a1{background:var(--brand);color:#fff;font-size:15px;font-weight:700;padding:13px 28px;border-radius:11px;box-shadow:0 8px 20px rgba(48,86,211,.25);transition:background .15s,transform .15s}
.lz-main .hero .a1:hover{background:var(--brand-dark);transform:translateY(-1px)}
.lz-main .hero .a2{background:var(--bg);color:var(--ink);font-size:15px;font-weight:600;padding:13px 24px;border-radius:11px;transition:background .15s}
.lz-main .hero .a2:hover{background:var(--brand-soft);color:var(--brand)}
.lz-main .hero .sb,
.lz-main .hero .hero__search{max-width:430px;margin:0 auto;display:flex;background:var(--bg);border-radius:11px;overflow:hidden;padding:5px;box-shadow:none}
.lz-main .hero .sb input,
.lz-main .hero .hero__search input{flex:1;background:transparent;border:0;outline:0;padding:9px 14px;font-size:14px;color:var(--ink)}
.lz-main .hero .sb button,
.lz-main .hero .hero__search button{background:var(--brand);color:#fff;border:0;padding:0 22px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.lz-main .hero .sb button:hover,
.lz-main .hero .hero__search button:hover{background:var(--brand-dark)}


/* ==========================================================================
   3b. Hub Hero — 分类介绍横幅（.hub-hero）
   ========================================================================== */
.lz-main .hub-hero{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:42px 44px;position:relative;overflow:hidden}
.lz-main .hub-hero::before{content:"";position:absolute;top:-100px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,var(--brand-soft),transparent 70%)}
.lz-main .hub-hero .inner{position:relative}
.lz-main .hub-hero .htop{display:flex;align-items:center;gap:22px;margin-bottom:24px}
.lz-main .hub-hero .hicon{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--brand),#5b8de8);display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;flex-shrink:0;box-shadow:0 8px 24px rgba(48,86,211,.3)}
.lz-main .hub-hero .hicon img{width:100%;height:100%;border-radius:18px;object-fit:cover;display:block}
.lz-main .hub-hero h1{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.6px;margin:0 0 6px}
.lz-main .hub-hero .hsub{font-size:14.5px;color:var(--body)}
.lz-main .hub-hero .hdesc{font-size:14.5px;color:var(--body);line-height:1.85;margin-bottom:26px;max-width:780px;background:linear-gradient(135deg,#f4f6fc,#eef1fc);border-radius:10px;padding:14px 20px;border-left:3px solid var(--brand)}
.lz-main .hub-hero .hdesc p{margin:0}
.lz-main .hub-hero .hdesc p + p{margin-top:8px}
.lz-main .hub-hero .hstats{display:flex;gap:14px}
.lz-main .hub-hero .hst{flex:1;min-width:0;background:var(--bg);border-radius:13px;padding:18px 16px;text-align:center;transition:.16s}
.lz-main .hub-hero .hst:hover{background:var(--brand-soft)}
.lz-main .hub-hero .hst b{display:block;font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.4px;line-height:1.1;margin-bottom:4px}
.lz-main .hub-hero .hst span{font-size:12.5px;color:var(--muted)}


/* ==========================================================================
   4. 5大HUB 卡片 .hub
   ========================================================================== */
.lz-main .hubA{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lz-main .hub{background:var(--bg);border-radius:14px;padding:20px 17px;transition:.16s}
.lz-main .hub:hover{background:var(--brand-soft);transform:translateY(-3px)}
.lz-main .hub .ic{width:44px;height:44px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:12px}
.lz-main .hub .ic img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.lz-main .hub h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.lz-main .hub .desc{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lz-main .hub .enter{font-size:12.5px;font-weight:600;color:var(--brand);margin-top:10px}
.lz-main .hub .hub-icon-fallback{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#f0f4ff;color:var(--brand,#3b82f6);font-size:18px;font-weight:600}
.lz-main .hubA.hub-center .hub{text-align:center;align-items:center;display:flex;flex-direction:column}
.lz-main .hubA.hub-center .hub .ic{margin-left:auto;margin-right:auto}
.lz-main .hubA.hub-center .hub .hub-icon-fallback{margin:0 auto}


/* ==========================================================================
   5. 主体两栏布局 .mainA + 文章列表 .post
   ========================================================================== */
.lz-main .mainA,
.lz-main .lz-main-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}

/* 双向 sticky 滚动跟随
   说明：
   1) 父主题 wpdx/style.css 中 `body{overflow-x:hidden}` 会让 body 成为
      滚动容器，从而破坏所有内部 position:sticky。已在 style.css 用
      `overflow-x:clip` 覆盖。
   2) `.mainA / .post-layout / .sub-layout` 必须是 grid + align-items:start，
      sticky 才能在 grid 单元格内正常生效（避免被 stretch 拉满列高，sticky 无可滚动空间）。
   3) 默认让 aside 走 CSS sticky（无 JS 兜底，覆盖最常见场景：侧栏比主内容矮）。
   4) 由 sticky-sidebar.js 比较两侧高度后切换：
        - 矮的一侧 → 加 `.lz-sticky-short`（sticky + top:80px + align-self:start）
        - 当主内容是矮侧时，aside 加 `.lz-sticky-off` 取消默认 sticky，让位给主内容。
      绝不使用 max-height + overflow-y 让侧栏内部出现滚动条。 */
.lz-main .mainA,
.lz-main .post-layout,
.lz-main .sub-layout{
    align-items: start;
}
/* 默认：aside sticky（无 JS 兜底） */
.lz-main .mainA > aside,
.lz-main .post-layout > aside,
.lz-main .sub-layout > aside{
    position: sticky;
    top: 80px;
    align-self: start;
}
/* 通用：JS 判定为矮侧时加上此类（aside 或 main 都可能被加） */
.lz-main .mainA > .lz-sticky-short,
.lz-main .post-layout > .lz-sticky-short,
.lz-main .sub-layout > .lz-sticky-short{
    position: sticky;
    top: 80px;
    align-self: start;
}
/* 当主内容是矮侧（main 已有 .lz-sticky-short），aside 必须取消默认 sticky 让位 */
.lz-main .mainA > aside.lz-sticky-off,
.lz-main .post-layout > aside.lz-sticky-off,
.lz-main .sub-layout > aside.lz-sticky-off{
    position: relative;
    top: 0;
}
@media (max-width: 960px){
    .lz-main .mainA > aside,
    .lz-main .post-layout > aside,
    .lz-main .sub-layout > aside,
    .lz-main .mainA > .lz-sticky-short,
    .lz-main .post-layout > .lz-sticky-short,
    .lz-main .sub-layout > .lz-sticky-short,
    .lz-main .mainA > aside.lz-sticky-off,
    .lz-main .post-layout > aside.lz-sticky-off,
    .lz-main .sub-layout > aside.lz-sticky-off{
        position: static;
        top: auto;
    }
    .lz-main .pickA { grid-template-columns: repeat(2, 1fr); }
    .lz-main .case-grid { grid-template-columns: repeat(2, 1fr); }
    .lz-main .hubA { grid-template-columns: repeat(3, 1fr) !important; }
    .lz-main .toolA { grid-template-columns: repeat(2, 1fr); }
    .lz-main .mainA,
    .lz-main .lz-main-layout { grid-template-columns: 1fr; }
    .lz-main .hub-hero .hstats { flex-wrap: wrap; }
    .lz-main .hub-hero .hst { flex: 1 1 calc(50% - 7px); }
}

.lz-main .post{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.lz-main .post:first-of-type{padding-top:0}
.lz-main .post:last-of-type{border-bottom:0;padding-bottom:0}
.lz-main .post .pi{width:166px;aspect-ratio:16/9;border-radius:11px;flex-shrink:0;overflow:hidden;display:block}
.lz-main .post .pb{flex:1;min-width:0;display:flex;flex-direction:column}
.lz-main .post .pc{font-size:12px;font-weight:600;color:var(--brand);margin-bottom:4px}
.lz-main .post .pc a:hover{opacity:.75}
.lz-main .post h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:6px}
.lz-main .post h3 a:hover{color:var(--brand)}
.lz-main .post p{font-size:13px;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.lz-main .post .pm{font-size:12px;color:var(--muted);margin-top:7px}
.lz-main .post .pm .dot{margin:0 7px;opacity:.5}

/* 统一缩略图 img 样式（替代 background-image） */
.lz-main .post .pi img,
.lz-main .case .ci img,
.lz-main .case-feed-card .cfi img,
.lz-main .cs-type1 .cs-lead .img img,
.lz-main .cs-type2 .cs-card .img img,
.lz-main .cs-type3 .cs-feature .img img,
.lz-main .sf-s .sfsi img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 加载更多按钮 */
.lz-main .more-btn,
.lz-main .load-more{display:block;width:100%;text-align:center;margin-top:16px;padding:12px;background:var(--bg);border:0;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--body);font-family:inherit;cursor:pointer}
.lz-main .more-btn:hover,
.lz-main .load-more:hover{color:var(--brand)}
.lz-main .load-more.is-loading{opacity:.7;cursor:progress}
.lz-main .load-more.is-disabled,
.lz-main .load-more:disabled{opacity:.55;cursor:not-allowed;color:var(--muted)}


/* ==========================================================================
   6. 侧栏面板 .side-panel + 热门 .pop + 标签云 + Widget 图片
   ========================================================================== */
.lz-main .side-panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.lz-main aside > .side-panel:last-child,
.lz-main aside > .vip-panel:last-child{margin-bottom:0}
.lz-main .side-t{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:13px;display:flex;align-items:center;gap:7px}
.lz-main .side-t .bar{width:3px;height:14px;background:var(--brand);border-radius:2px}

/* 热门文章 .pop */
.lz-main .pop{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.lz-main .pop:last-child{border-bottom:0}
.lz-main .pop:first-of-type{padding-top:0}
.lz-main .pop .n{font-size:13px;font-weight:800;color:var(--muted);width:17px;text-align:center;flex-shrink:0}
.lz-main .pop:nth-of-type(-n+3) .n{color:var(--brand)}
.lz-main .pop .pt{font-size:13px;font-weight:500;color:var(--ink);line-height:1.5}

/* 标签云 */
.lz-main .tagcloud a{display:inline-block;background:var(--bg);color:var(--body);font-size:12px;padding:4px 11px;border-radius:13px;margin:0 5px 7px 0}
.lz-main .tagcloud a:hover{background:var(--brand-soft);color:var(--brand)}

/* 侧栏 Widget 图片 */
.lz-main .widget-img{width:100%;aspect-ratio:16/9;border-radius:11px;margin-bottom:9px;overflow:hidden}
.lz-main .widget-img img{width:100%;height:100%;object-fit:cover;display:block}
.lz-main .widget-cap{font-size:12.5px;color:var(--body);font-weight:500}


/* ==========================================================================
   7. VIP 侧栏面板 .vip-panel（含 .qr-row 二维码行）
   ========================================================================== */
.lz-main .vip-panel{background:linear-gradient(150deg,var(--brand),var(--brand-dark));border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.lz-main .vip-panel h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:4px}
.lz-main .vip-panel p{font-size:12.5px;color:rgba(255,255,255,.8);margin-bottom:13px}
.lz-main .vip-panel a{display:block;text-align:center;background:#fff;color:var(--brand);font-size:13px;font-weight:700;padding:10px;border-radius:9px}

/* VIP 卡里的微信二维码行 */
.lz-main .vip-panel .qr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.lz-main .vip-panel .qr-single{display:block;margin:14px 0}
.lz-main .vip-panel .qr-single .qr{width:100%}
.lz-main .vip-panel .qr-single .qr-img{width:100%}
.lz-main .vip-panel .qr{background:rgba(255,255,255,.14);border-radius:10px;padding:9px;text-align:center}
.lz-main .vip-panel .qr-img{background:#fff;border-radius:8px;overflow:hidden}
.lz-main .vip-panel .qr-img img{width:100%;height:auto;border-radius:8px;display:block}
.lz-main .vip-panel .qr-label{font-size:12px;color:rgba(255,255,255,.85);margin-top:6px;font-weight:600;display:block;text-align:center}


/* ==========================================================================
   8. VIP 通栏 .vip-banner
   ========================================================================== */
.lz-main .vip-banner{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-radius:18px;padding:32px 38px;display:flex;align-items:center;gap:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.lz-main .vip-banner .vt{flex:1;position:relative}
.lz-main .vip-banner h2{color:#fff;font-size:21px;font-weight:800;margin-bottom:5px}
.lz-main .vip-banner p{color:rgba(255,255,255,.82);font-size:13.5px}
.lz-main .vip-banner .vb-btn{position:relative;background:#fff;color:var(--brand);font-size:14px;font-weight:700;padding:13px 30px;border-radius:10px;white-space:nowrap}


/* ==========================================================================
   9. 编辑精选 .pick + 网格 .pickA
   ========================================================================== */
.lz-main .pickA{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lz-main .pick{background:var(--bg);border-radius:13px;padding:20px;transition:.16s}
.lz-main .pick:hover{background:var(--brand-soft);transform:translateY(-3px)}
.lz-main .pick .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--brand);background:var(--card);padding:3px 10px;border-radius:11px;margin-bottom:11px}
.lz-main .pick .tag:hover{opacity:.75}
.lz-main .pick h4{font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.lz-main .pick h4 a:hover{color:var(--brand)}
.lz-main .pick .pd{font-size:12.5px;color:var(--muted);margin-top:8px}


/* ==========================================================================
   10. 工具评测 .tool + 网格 .toolA
   ========================================================================== */
.lz-main .toolA{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lz-main .tool{background:var(--bg);border-radius:13px;padding:22px 18px;text-align:center;transition:.16s}
.lz-main .tool:hover{background:var(--brand-soft);transform:translateY(-3px)}
.lz-main .tool .ti{width:46px;height:46px;margin:0 auto 11px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:21px}
.lz-main .tool h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.lz-main .tool .tc{font-size:11.5px;color:var(--muted)}


/* ==========================================================================
   11. 真实案例 .case + 网格 .case-grid
   ========================================================================== */
.lz-main .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lz-main .case{background:var(--bg);border-radius:13px;overflow:hidden;transition:.16s}
.lz-main .case:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.lz-main .case .ci{width:100%;aspect-ratio:16/9;overflow:hidden;display:block}
.lz-main .case .cb{padding:16px 18px}
.lz-main .case .ctag{display:inline-block;font-size:11px;font-weight:700;color:var(--teal);background:#e3f6f6;padding:3px 10px;border-radius:11px;margin-bottom:9px}
.lz-main .case .ctag:hover{opacity:.75}
.lz-main .case .cb h4{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:6px}
.lz-main .case .cb h4 a:hover{color:var(--brand)}
.lz-main .case .cb p{font-size:12.5px;color:var(--body);line-height:1.6}


/* ==========================================================================
   12. 数据背书条 .stat-bar（白色卡片背景 + 黑字 + 右边界线分隔）
   ========================================================================== */
.lz-main .stat-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:30px 0;margin:22px 0;text-align:center}
.lz-main .stat-bar .st{border-right:1px solid var(--line)}
.lz-main .stat-bar .st:last-child{border-right:0}
.lz-main .stat-bar .st b{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.5px;line-height:1.2}
.lz-main .stat-bar .st b em{font-style:normal;background:linear-gradient(120deg,var(--brand),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lz-main .stat-bar .st span{font-size:13px;color:var(--muted);margin-top:5px;display:block}


/* 锚点滚动偏移：避免被顶部固定导航遮挡 */
.lz-main .cluster[id],
.lz-main .cluster-nav{
    scroll-margin-top:100px;
}

/* ==========================================================================
   13. 栏目公共结构 .cluster（设计图卡片风格）
   ========================================================================== */
.lz-main .cluster{
    padding:24px 26px;
    border:1px solid #d4e8f0;
    border-radius:14px;
    margin-bottom:20px;
    background:#fff;
    transition:.16s;
}
.lz-main .cluster:hover{border-color:#a8d8ea}
.lz-main .cluster:last-child{margin-bottom:0}

.lz-main .cluster-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.lz-main .cluster-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#e8f4fd,#d0ecf9);
}
.lz-main .cluster-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.lz-main .cluster-icon-default{
    font-size:16px;
    font-weight:600;
    color:#2b7cd8;
}
.lz-main .cluster-head h3{
    font-size:20px;
    font-weight:700;
    margin:0;
    color:var(--ink);
}
.lz-main .cluster-head h3 a:hover{color:var(--brand)}
.lz-main .cltag{
    display:inline-block;
    background:#e6f4ff;
    color:#1677ff;
    font-size:12px;
    padding:2px 8px;
    border-radius:4px;
    font-weight:500;
    white-space:nowrap;
}
.lz-main .cluster-more{
    margin-left:auto;
    font-size:13px;
    color:#1677ff;
    text-decoration:none;
    white-space:nowrap;
}
.lz-main .cluster-more:hover{text-decoration:underline}
.lz-main .clintro{
    font-size:13.5px;
    color:#666;
    margin:0 0 16px 0;
    line-height:1.6;
}


/* ==========================================================================
   14. 栏目通用列表 .col-list（点 / 标题 / 日期 三列网格）
   ========================================================================== */
.lz-main .col-list{display:block}
.lz-main .col-list > a{
  display:grid;
  grid-template-columns:14px 1fr 42px;
  align-items:center;
  column-gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.lz-main .col-list > a:last-child{border-bottom:0}
.lz-main .col-list .cdot{width:4px;height:4px;border-radius:50%;background:#cdd0d6;margin-left:5px}
.lz-main .col-list .clt{
  min-width:0;
  font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lz-main .col-list > a:hover .clt{color:var(--brand)}
.lz-main .col-list .cdate{
  font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;
}


/* ==========================================================================
   15. 栏目展示形态 CLT1 — .cs-type1（240px 左封面 + 右两列列表）
   ========================================================================== */
.lz-main .cs-type1 .cs-body{display:grid;grid-template-columns:240px 1fr;gap:24px}
.lz-main .cs-type1 .cs-lead .img{width:100%;aspect-ratio:16/9;border-radius:11px;margin-bottom:10px;overflow:hidden}
.lz-main .cs-type1 .cs-lead h4{font-size:15px;font-weight:700;color:var(--ink);line-height:1.45}

/* 布局1和布局5中文章列表改为两列 */
.lz-main .cs-type1 .col-list,
.lz-main .cs-type5 .col-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap:24px;
}


/* ==========================================================================
   16. 栏目展示形态 CLT2 — .cs-type2（3 列横向卡片）
   ========================================================================== */
.lz-main .cs-type2 .cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lz-main .cs-type2 .cs-card{background:var(--bg);border-radius:12px;overflow:hidden;transition:.16s}
.lz-main .cs-type2 .cs-card:hover{background:var(--brand-soft);transform:translateY(-3px)}
.lz-main .cs-type2 .cs-card .img{width:100%;aspect-ratio:16/9;overflow:hidden}
.lz-main .cs-type2 .cs-card .cc{padding:13px 15px}
.lz-main .cs-type2 .cs-card h4{font-size:14px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:6px}
.lz-main .cs-type2 .cs-card .cd{font-size:11.5px;color:var(--muted)}


/* ==========================================================================
   17. 栏目展示形态 CLT3 — .cs-type3（1.15fr 左头条 + 1fr 右竖排）
   ========================================================================== */
.lz-main .cs-type3 .cs-body{display:grid;grid-template-columns:1.15fr 1fr;gap:26px}
.lz-main .cs-type3 .cs-feature .img{width:100%;aspect-ratio:16/9;border-radius:11px;margin-bottom:11px;overflow:hidden;display:block}
.lz-main .cs-type3 .cs-feature .ft{font-size:11.5px;font-weight:600;color:var(--brand);margin-bottom:5px}
.lz-main .cs-type3 .cs-feature .ft a:hover{opacity:.75}
.lz-main .cs-type3 .cs-feature h4{font-size:18px;font-weight:800;color:var(--ink);line-height:1.4;margin-bottom:7px}
.lz-main .cs-type3 .cs-feature h4 a:hover{color:var(--brand)}
.lz-main .cs-type3 .cs-feature p{font-size:12.5px;color:var(--body);line-height:1.6}
.lz-main .cs-type3 .cs-mini a{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
.lz-main .cs-type3 .cs-mini a:first-child{padding-top:0}
.lz-main .cs-type3 .cs-mini a:last-child{border-bottom:0}
.lz-main .cs-type3 .cs-mini h5{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5;transition:color .14s}
.lz-main .cs-type3 .cs-mini a:hover h5{color:var(--brand)}
.lz-main .cs-type3 .cs-mini .md{font-size:11px;color:var(--muted);margin-top:3px}


/* ==========================================================================
   18. 栏目展示形态 CLT4 — .cs-type4（3 列纯标题网格）
   ========================================================================== */
.lz-main .cs-type4 .cs-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.lz-main .cs-type4 .cs-cols a{display:flex;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.lz-main .cs-type4 .cs-cols a:hover .t4t{color:var(--brand)}
.lz-main .cs-type4 .cs-cols .t4dot{width:5px;height:5px;border-radius:50%;background:var(--brand);margin-right:9px;flex-shrink:0;align-self:center;opacity:.5}
.lz-main .cs-type4 .cs-cols .t4t{font-size:13.5px;font-weight:500;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}
.lz-main .cs-type4 .cs-cols .t4d{font-size:11px;color:var(--muted);margin-left:8px;flex-shrink:0}


/* ==========================================================================
   19. 版本标识条 .vbar（开发期辅助样式，可选）
   ========================================================================== */
.lz-main .vbar{background:var(--ink);color:#fff;text-align:center;padding:10px;font-size:13px;font-weight:600;letter-spacing:.3px}
.lz-main .vbar span{color:var(--teal)}


/* ==========================================================================
   20. 栏目展示形态 CLT6 — .cs-type6（小图卡片网格 4列）
   ========================================================================== */
.lz-main .cs-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lz-main .cs-tool-card{background:var(--bg);border-radius:13px;padding:20px 16px;text-align:center;transition:.16s;display:block}
.lz-main .cs-tool-card:hover{background:var(--brand-soft, #eef1fc);transform:translateY(-3px)}
.lz-main .cs-tool-img{width:56px;height:56px;margin:0 auto 12px;border-radius:12px;overflow:hidden}
.lz-main .cs-tool-img img{width:100%;height:100%;object-fit:cover}
.lz-main .cs-tool-img-ph{background:var(--card, #fff);box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--brand, #3056d3)}
.lz-main .cs-tool-card h4{font-size:14px;font-weight:700;color:var(--ink, #1c2230);line-height:1.5;margin-bottom:4px}
.lz-main .cs-tool-desc{font-size:12px;color:var(--muted, #9aa0ac);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ==========================================================================
   21. 栏目展示形态 CLT7 — .cs-type7（编辑精选风格卡片 3列）
   ========================================================================== */
.lz-main .cs-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lz-main .cs-pick-card{background:var(--bg);border-radius:13px;padding:20px;transition:.16s;display:block}
.lz-main .cs-pick-card:hover{background:var(--brand-soft, #eef1fc);transform:translateY(-3px)}
.lz-main .cs-pick-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--brand, #3056d3);background:var(--card, #fff);padding:3px 10px;border-radius:11px;margin-bottom:10px}
.lz-main .cs-pick-tag:hover{opacity:.75}
.lz-main .cs-pick-card h4{font-size:16px;font-weight:700;color:var(--ink, #1c2230);line-height:1.5;margin-bottom:6px}
.lz-main .cs-pick-card h4 a:hover{color:var(--brand)}
.lz-main .cs-pick-desc{font-size:12.5px;color:var(--muted, #9aa0ac);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ==========================================================================
   22. 移动端响应式 — 768px / 480px
   ========================================================================== */
@media (max-width: 768px) {
  /* .wrap 容器左右内边距缩小 */
  .lz-main .wrap { padding: 0 16px; }

  /* Section 上下间距缩小 */
  .lz-main .section { padding: 14px 0; }

  /* Panel 卡片内间距缩小 */
  .lz-main .panel { padding: 20px; border-radius: 14px; }

  /* Hero 响应式 */
  .lz-main .hero { padding: 38px 22px; border-radius: 14px; }
  .lz-main .hero::before { width: 220px; height: 220px; top: -80px; right: -60px; }
  .lz-main .hero::after { width: 220px; height: 220px; bottom: -90px; left: -60px; }
  .lz-main .hero h1,
  .lz-main .hero .hero__title { font-size: 26px; letter-spacing: -.5px; }
  .lz-main .hero .sub,
  .lz-main .hero .hero__desc { font-size: 14px; margin-bottom: 20px; }
  .lz-main .hero .actions,
  .lz-main .hero .hero__actions { flex-direction: column; gap: 10px; }
  .lz-main .hero .a1,
  .lz-main .hero .a2 { width: 100%; padding: 12px 18px; }
  .lz-main .hero .sb,
  .lz-main .hero .hero__search { max-width: 100%; }

  /* 网格 gap 缩小 */
  .lz-main .hubA,
  .lz-main .pickA,
  .lz-main .toolA,
  .lz-main .case-grid { gap: 10px; }

  .lz-main .hubA { grid-template-columns: repeat(2, 1fr); }
  .lz-main .pickA { grid-template-columns: repeat(2, 1fr); }
  .lz-main .toolA { grid-template-columns: repeat(2, 1fr); }
  .lz-main .case-grid { grid-template-columns: repeat(2, 1fr); }

  /* Post 卡片：768px 改为垂直堆叠 */
  .lz-main .post { flex-direction: column; gap: 12px; }
  .lz-main .post .pi {
    width: 100%;
    border-radius: 6px;
  }

  /* 标题字号缩小 */
  .lz-main .sec-head h2 { font-size: 18px; }
  .lz-main .sec-head { margin-bottom: 12px; }
  .lz-main .post h3 { font-size: 15px; }
  .lz-main .tool-name { font-size: 15px; }

  /* Hub 卡片标题缩小 */
  .lz-main .hub h3 { font-size: 14px; }

  /* Hub Hero 响应式 */
  .lz-main .hub-hero { padding: 28px 22px; }
  .lz-main .hub-hero h1 { font-size: 24px; }
  .lz-main .hub-hero .htop { gap: 14px; margin-bottom: 18px; }
  .lz-main .hub-hero .hicon { width: 56px; height: 56px; font-size: 26px; border-radius: 14px; }
  .lz-main .hub-hero .hdesc { font-size: 13.5px; padding: 12px 16px; margin-bottom: 18px; }
  .lz-main .hub-hero .hstats { flex-wrap: wrap; }
  .lz-main .hub-hero .hst { flex: 1 1 calc(50% - 7px); }

  /* Stat-bar 768px 2列布局 */
  .lz-main .stat-bar { grid-template-columns: repeat(2, 1fr); padding: 22px 0; }
  .lz-main .stat-bar .st { border-right: none; border-bottom: 1px solid var(--line); }
  .lz-main .stat-bar .st:nth-child(odd) { border-right: 1px solid var(--line); }
  .lz-main .stat-bar .st:nth-last-child(-n+2) { border-bottom: none; }
  .lz-main .stat-bar .st b { font-size: 26px; }
  .lz-main .stat-bar .st span { font-size: 12px; }

  /* VIP 面板间距 */
  .lz-main .vip-panel { padding: 14px; }

  .lz-main .vip-panel .qr-row { gap: 6px; }

  /* Side panel 间距 */
  .lz-main .side-panel { padding: 16px; }

  /* VIP 通栏：手机端垂直堆叠，避免标题被挤压成单字换行 */
  .lz-main .vip-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 20px;
    gap: 16px;
    border-radius: 14px;
  }
  .lz-main .vip-banner::after {
    width: 200px;
    height: 200px;
    right: -80px;
    top: -90px;
  }
  .lz-main .vip-banner .vt { flex: none; }
  .lz-main .vip-banner h2 {
    font-size: 19px;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
    margin-bottom: 8px;
  }
  .lz-main .vip-banner p {
    font-size: 13px;
    line-height: 1.6;
  }
  .lz-main .vip-banner .vb-btn {
    display: block;
    text-align: center;
    padding: 12px 22px;
    white-space: nowrap;
    align-self: stretch;
  }

  /* Cluster 卡片响应式 */
  .lz-main .cluster {
    padding: 18px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .lz-main .cluster-head {
    gap: 8px;
    flex-wrap: wrap;
  }
  .lz-main .clintro { font-size: 13px; }
  .lz-main .cluster-head h3 {
    font-size: 16px;
  }
  .lz-main .cluster-icon {
    width: 30px;
    height: 30px;
  }
  .lz-main .cluster-icon-default {
    font-size: 13px;
  }
  .lz-main .cltag {
    font-size: 11px;
    padding: 2px 6px;
  }
  .lz-main .cluster-more {
    font-size: 12px;
  }

  /* sec-head inline 标题手机端：标题+副标题强制分行 */
  .lz-main .sec-head--inline .sec-title .sub { width: 100%; margin-top: 4px; margin-left: 15px; }

  /* CLT1 / CLT5 列表两列回退单列 */
  .lz-main .cs-type1 .col-list,
  .lz-main .cs-type5 .col-list { grid-template-columns: 1fr; }

  /* CLT1 左封面+右列表改为单列 */
  .lz-main .cs-type1 .cs-body { grid-template-columns: 1fr; }

  /* CLT2 3列卡片改为单列 */
  .lz-main .cs-type2 .cs-cards { grid-template-columns: 1fr; }

  /* CLT3 左头条+右竖排改为单列 */
  .lz-main .cs-type3 .cs-body { grid-template-columns: 1fr; }

  /* CLT4 3列纯标题改为单列 */
  .lz-main .cs-type4 .cs-cols { grid-template-columns: 1fr; }



  /* CLT6 响应式 */
  .lz-main .cs-tools { grid-template-columns: repeat(2, 1fr); }

  /* CLT7 响应式 */
  .lz-main .cs-picks { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* .wrap 容器左右内边距进一步缩小 */
  .lz-main .wrap { padding: 0 12px; }

  /* Section 进一步缩小 */
  .lz-main .section { padding: 10px 0; }

  /* Panel 进一步缩小 */
  .lz-main .panel { padding: 16px; border-radius: 12px; }

  /* 标题字号进一步缩小 */
  .lz-main .sec-head h2 { font-size: 16px; }
  .lz-main .sec-head { margin-bottom: 8px; }
  .lz-main .post h3 { font-size: 14px; }
  .lz-main .tool-name { font-size: 14px; }

  /* Post gap 缩小 */
  .lz-main .post { gap: 8px; }

  /* 网格统一单列 */
  .lz-main .hubA,
  .lz-main .pickA,
  .lz-main .toolA,
  .lz-main .case-grid { grid-template-columns: 1fr; }

  /* Post 卡片极小屏改为垂直堆叠 */
  .lz-main .post {
    flex-direction: column;
    gap: 10px;
  }
  .lz-main .post .pi {
    width: 100%;
  }

  /* 网格 gap 进一步缩小 */
  .lz-main .hubA,
  .lz-main .pickA,
  .lz-main .toolA,
  .lz-main .case-grid { gap: 8px; }

  /* VIP 通栏：极小屏进一步压缩，按钮全宽显示 */
  .lz-main .vip-banner {
    padding: 18px 16px;
    gap: 12px;
    border-radius: 12px;
  }
  .lz-main .vip-banner h2 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .lz-main .vip-banner p {
    font-size: 12.5px;
    line-height: 1.6;
  }
  .lz-main .vip-banner .vb-btn {
    width: 100%;
    padding: 11px 18px;
    font-size: 13.5px;
  }

  /* Cluster 卡片极小屏 */
  .lz-main .cluster {
    padding: 14px 12px;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  .lz-main .cluster-head {
    gap: 6px;
    flex-wrap: wrap;
  }
  .lz-main .cluster-head h3 {
    font-size: 15px;
  }
  .lz-main .cluster-icon {
    width: 26px;
    height: 26px;
  }
  .lz-main .cluster-icon-default {
    font-size: 12px;
  }
  .lz-main .cluster-more {
    font-size: 11.5px;
    width: 100%;
    margin-top: 4px;
  }
  .lz-main .clintro {
    font-size: 12.5px;
    margin-bottom: 12px;
  }

  /* CLT6 极小屏 */
  .lz-main .cs-tools { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Hero 极小屏 */
  .lz-main .hero { padding: 20px 14px; border-radius: 12px; }
  .lz-main .hero::before,
  .lz-main .hero::after { width: 160px; height: 160px; }
  .lz-main .hero .tag,
  .lz-main .hero .hero__tag { font-size: 11.5px; padding: 4px 11px; margin-bottom: 12px; }
  .lz-main .hero h1,
  .lz-main .hero .hero__title { font-size: 22px; letter-spacing: -.3px; margin-bottom: 10px; }
  .lz-main .hero .sub,
  .lz-main .hero .hero__desc { font-size: 13px; margin-bottom: 16px; }
  .lz-main .hero .actions,
  .lz-main .hero .hero__actions { margin-bottom: 16px; }
  .lz-main .hero .a1,
  .lz-main .hero .a2 { font-size: 14px; padding: 11px 16px; }
  .lz-main .hero .sb,
  .lz-main .hero .hero__search { max-width: 100%; padding: 4px; }
  .lz-main .hero .sb input,
  .lz-main .hero .hero__search input { padding: 8px 11px; font-size: 13.5px; }
  .lz-main .hero .sb button,
  .lz-main .hero .hero__search button { padding: 0 16px; font-size: 13.5px; }

  /* Stat-bar 极小屏 2 列布局 */
  .lz-main .stat-bar { grid-template-columns: repeat(2, 1fr); padding: 18px 0; border-radius: 14px; }
  .lz-main .stat-bar .st { padding: 8px 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lz-main .stat-bar .st:nth-child(odd) { border-right: 1px solid var(--line); }
  .lz-main .stat-bar .st:nth-last-child(-n+2) { border-bottom: 0; }
  .lz-main .stat-bar .st b { font-size: 22px; }
  .lz-main .stat-bar .st span { font-size: 11.5px; }

  /* Hub Hero 极小屏 */
  .lz-main .hub-hero { padding: 22px 16px; border-radius: 14px; }
  .lz-main .hub-hero::before { width: 200px; height: 200px; top: -70px; right: -50px; }
  .lz-main .hub-hero h1 { font-size: 22px; letter-spacing: -.3px; }
  .lz-main .hub-hero .hsub { font-size: 13px; }
  .lz-main .hub-hero .htop { gap: 12px; margin-bottom: 14px; }
  .lz-main .hub-hero .hicon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
  .lz-main .hub-hero .hdesc { font-size: 13px; line-height: 1.75; padding: 10px 14px; margin-bottom: 14px; }
  .lz-main .hub-hero .hstats { flex-wrap: wrap; gap: 10px; }
  .lz-main .hub-hero .hst { flex: 1 1 calc(50% - 5px); padding: 14px 10px; border-radius: 11px; }
  .lz-main .hub-hero .hst b { font-size: 22px; }
  .lz-main .hub-hero .hst span { font-size: 11.5px; }
}

/* === 布局8: 工具评测卡片 2列 === */
.cs-tool-review { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cs-tr-card { border: 1px solid var(--line); border-radius: 13px; padding: 20px 18px; display: flex; gap: 14px; align-items: flex-start; transition: border-color .16s; }
.cs-tr-card:hover { border-color: var(--brand); }
.cs-tr-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; font-weight: 700; color: var(--muted); overflow: hidden; }
.cs-tr-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cs-tr-body { flex: 1; min-width: 0; }
.cs-tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cs-tr-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-tr-name a { color: inherit; text-decoration: none; }
.cs-tr-name a:hover { color: var(--brand); }
.cs-tr-badge { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 4px; }
.cs-tr-badge-free { background: #16a34a; }
.cs-tr-badge-paid { background: #f59e0b; }
.cs-tr-badge-freemium { background: var(--brand); }
.cs-tr-desc { font-size: 13px; color: var(--body); line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-tr-actions { display: flex; align-items: center; gap: 12px; }
.lz-main .cs-tr-btn-review { display: inline-block; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 6px; text-decoration: none; transition: opacity .16s; }
.lz-main .cs-tr-btn-review:hover { opacity: .85; color: #fff; }
.lz-main .cs-tr-btn-site { display: inline-block; font-size: 12.5px; color: var(--body); font-weight: 500; padding: 6px 10px; border: none; border-radius: 0; text-decoration: none; transition: color .16s; }
.lz-main .cs-tr-btn-site:hover { color: var(--brand); }

/* 响应式 */
@media (max-width: 768px) {
  .cs-tool-review { grid-template-columns: 1fr; }
}

/* === 布局9: 横图文列表 === */
.cs-imgtext-list { display: flex; flex-direction: column; gap: 14px; }
.cs-itl-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; transition: .16s; }
.cs-itl-item:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.cs-itl-img { width: 160px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg); display: block; }
.cs-itl-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-itl-img-ph { width: 100%; height: 100%; background: var(--bg); }
.cs-itl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-itl-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-itl-title a:hover { color: var(--brand); }
.cs-itl-desc { font-size: 13px; color: var(--body); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-itl-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: auto; }
.cs-itl-cat { background: var(--bg); padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.cs-itl-cat:hover { color: var(--brand); }

@media (max-width: 768px) {
  .cs-itl-img { width: 120px; }
  .cs-itl-title { font-size: 14px; }
  .cs-itl-desc { display: none; }
}

/* === 布局10: VIP项目卡片 3列 === */
.cs-vip-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-vip-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: .16s; display: flex; flex-direction: column; }
.cs-vip-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.cs-vip-img { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg); overflow: hidden; }
.cs-vip-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-vip-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.cs-vip-badge { position: absolute; top: 9px; right: 9px; background: linear-gradient(135deg, #f5c469, #d4a045); color: #1c2230; font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 11px; letter-spacing: .5px; box-shadow: 0 3px 8px rgba(212,160,69,.4); z-index: 2; }
.cs-vip-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.cs-vip-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.45; margin-bottom: 6px; }
.cs-vip-desc { font-size: 12.5px; color: var(--body); line-height: 1.6; margin-bottom: 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-vip-footer { display: flex; align-items: center; justify-content: space-between; }
.cs-vip-level { font-size: 12.5px; font-weight: 700; }
.cs-vip-link { font-size: 12.5px; font-weight: 600; color: var(--brand); }

/* 响应式 */
@media (max-width: 768px) {
    .cs-vip-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cs-vip-projects { grid-template-columns: 1fr; }
}


/* ==========================================================================
   22b. 分类锚点导航条 .cluster-nav（药丸标签样式）
   ========================================================================== */
.lz-main .cluster-nav{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.lz-main .cluster-nav .cluster-nav-label{
    font-size:13px;
    color:#646b7a;
    font-weight:600;
    margin-right:4px;
}
.lz-main .cluster-nav .cluster-nav-item{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    border-radius:18px;
    font-size:13px;
    font-weight:500;
    color:#646b7a;
    background:#f0f1f5;
    transition:.15s;
    text-decoration:none;
}
.lz-main .cluster-nav .cluster-nav-item:hover{
    background:#e0e3ea;
    color:#1c2230;
}
.lz-main .cluster-nav .cluster-nav-item.active{
    background:#3056d3;
    color:#fff;
    font-weight:600;
}
.lz-main .cluster-nav .cluster-nav-item .cluster-nav-count{
    font-size:11px;
    opacity:.7;
}
.lz-main .cluster-nav .cluster-nav-item.active .cluster-nav-count{
    opacity:.85;
}


/* ==========================================================================
   23. Cluster 子版块分隔样式（border / divider 切换）
   ========================================================================== */
/* 边框模式：每个子版块圆角边框包围 */
.lz-main .clusters-wrap--border .cluster {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 16px;
    background: #fff;
}
.lz-main .clusters-wrap--border .cluster:last-child {
    margin-bottom: 0;
}

/* 分隔线模式：子版块之间用底部横线分隔，最后一个不加 */
.lz-main .clusters-wrap--divider .cluster {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 24px 0;
    margin-bottom: 24px;
    background: transparent;
}
.lz-main .clusters-wrap--divider .cluster:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* ==========================================================================
   24. VIP Hero 大板块 (.vip-hero)
   ========================================================================== */
.lz-main .vip-hero{
  background:linear-gradient(135deg,#1c2230,#2a3247);
  color:#fff;
  border-radius:18px;
  padding:46px 48px;
  position:relative;
  overflow:hidden;
}
.lz-main .vip-hero::before{content:"";position:absolute;top:-80px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(212,160,69,.18),transparent 70%)}
.lz-main .vip-hero .inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:38px;align-items:center}
.lz-main .vip-hero .vh-label{display:inline-block;background:linear-gradient(135deg,#d4a045,#c89339);color:#fff;font-size:11px;font-weight:800;letter-spacing:1.5px;padding:5px 14px;border-radius:12px;margin-bottom:16px;text-transform:uppercase}
.lz-main .vip-hero h1{font-size:36px;font-weight:800;letter-spacing:-.6px;margin-bottom:11px;color:#fff;line-height:1.2}
.lz-main .vip-hero h1 em{font-style:normal;background:linear-gradient(135deg,#f5c469,#d4a045);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lz-main .vip-hero .vh-sub{font-size:15.5px;color:rgba(255,255,255,.85);line-height:1.85;margin-bottom:22px}
.lz-main .vip-hero .vh-bullets{margin-bottom:24px}
.lz-main .vip-hero .vh-bullets div{font-size:13.5px;color:rgba(255,255,255,.92);padding:5px 0;display:flex;align-items:flex-start;gap:8px}
.lz-main .vip-hero .vh-bullets div::before{content:"✓";color:#f5c469;font-weight:800;flex-shrink:0;margin-top:1px}
.lz-main .vip-hero .vh-cta{display:flex;gap:11px}
.lz-main .vip-hero .vh-btn1{background:linear-gradient(135deg,#f5c469,#d4a045);color:#1c2230;font-size:15px;font-weight:800;padding:14px 28px;border-radius:11px;box-shadow:0 8px 20px rgba(212,160,69,.4)}
.lz-main .vip-hero .vh-btn2{background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:11px;border:1px solid rgba(255,255,255,.2)}
.lz-main .vip-hero .vh-right{position:relative}
.lz-main .vip-hero .vh-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 24px;backdrop-filter:blur(8px)}
.lz-main .vip-hero .vh-card-title{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:14px;text-align:center}
.lz-main .vip-hero .vh-price{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:18px}
.lz-main .vip-hero .vh-price b{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1px}
.lz-main .vip-hero .vh-price b em{font-style:normal;font-size:18px;color:rgba(255,255,255,.5);font-weight:600;margin-right:4px}
.lz-main .vip-hero .vh-price span{font-size:14px;color:rgba(255,255,255,.6)}
.lz-main .vip-hero .vh-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lz-main .vip-hero .vh-stat{background:rgba(255,255,255,.06);border-radius:9px;padding:11px;text-align:center}
.lz-main .vip-hero .vh-stat b{display:block;font-size:18px;font-weight:800;color:#f5c469;line-height:1}
.lz-main .vip-hero .vh-stat span{font-size:11px;color:rgba(255,255,255,.6);margin-top:4px;display:block}


/* ==========================================================================
   25. VIP Final CTA 简版 (.vip-final)
   ========================================================================== */
.lz-main .vip-final{background:linear-gradient(135deg,#1c2230,#0f1419);border-radius:18px;padding:50px 46px;position:relative;overflow:hidden;text-align:center}
.lz-main .vip-final::before{content:"";position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(245,196,105,.18),transparent 65%)}
.lz-main .vip-final .inner{position:relative}
.lz-main .vip-final .vf-label{font-size:12px;font-weight:700;color:#f5c469;letter-spacing:2px;margin-bottom:12px}
.lz-main .vip-final h2{color:#fff;font-size:32px;font-weight:800;letter-spacing:-.5px;margin-bottom:11px}
.lz-main .vip-final .vf-sub{color:rgba(255,255,255,.75);font-size:15px;margin-bottom:18px;line-height:1.7}
.lz-main .vip-final .vf-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:24px}
.lz-main .vip-final .vf-price b{font-size:48px;font-weight:800;color:#f5c469;letter-spacing:-1.5px;line-height:1}
.lz-main .vip-final .vf-price b em{font-style:normal;font-size:22px;color:rgba(245,196,105,.6);font-weight:600;margin-right:2px}
.lz-main .vip-final .vf-price span{color:rgba(255,255,255,.6);font-size:14px}
.lz-main .vip-final .vf-btns{display:flex;gap:13px;justify-content:center}
.lz-main .vip-final .b1{background:linear-gradient(135deg,#f5c469,#d4a045);color:#1c2230;font-size:16px;font-weight:800;padding:15px 36px;border-radius:11px;box-shadow:0 10px 24px rgba(245,196,105,.35)}
.lz-main .vip-final .b2{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff;font-size:15px;font-weight:600;padding:14px 30px;border-radius:11px}


/* ==========================================================================
   26. 最新评测列表 clt11 (.recent-list)
   ========================================================================== */
.lz-main .recent-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:0}
.lz-main .recent-list .rt-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);transition:.14s;font-size:14px;min-width:0}
.lz-main .recent-list .rt-item:nth-child(-n+2){padding-top:0}
.lz-main .recent-list .rt-item:nth-last-child(-n+2){border-bottom:0}
.lz-main .recent-list .rt-item:hover .rt-title{color:var(--brand)}
.lz-main .recent-list .rt-item:hover .rt-title a{color:var(--brand)}
.lz-main .rt-icon{width:48px;height:48px;border-radius:9px;background:var(--brand-soft) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--brand);margin-right:13px;flex-shrink:0;overflow:hidden;box-shadow:0 2px 6px rgba(28,34,48,.06)}
.lz-main .rt-body{flex:1;min-width:0}
.lz-main .rt-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lz-main .rt-meta{font-size:11px;color:var(--muted);margin-top:2px}
.lz-main .rt-meta .rt-cat{color:var(--brand);font-weight:500}
@media(max-width:768px){.lz-main .recent-list{grid-template-columns:1fr}}


/* ==========================================================================
   27. 学习路径 path_road (.path-road / .path-grid / .path-card)
   ========================================================================== */
.lz-main .path-road{position:relative;padding:30px 8px 12px}
.lz-main .path-road::before{
  content:"";
  position:absolute;
  top:42px;
  left:6%;
  right:6%;
  height:3px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 8px,transparent 8px 18px);
  opacity:.4;
  z-index:0;
}
.lz-main .path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
.lz-main .path-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:13px;
  padding:36px 18px 14px;
  transition:.18s;
  cursor:pointer;
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(28,34,48,.04);
}
.lz-main .path-card:hover{
  border-color:var(--brand);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(48,86,211,.12);
}
.lz-main .path-card:hover .path-title{color:var(--brand)}
.lz-main .path-card:hover .path-num{background:var(--brand);color:#fff;border-color:var(--brand)}
/* 圆形大序号 */
.lz-main .path-num{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--card);
  color:var(--brand);
  font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--brand);
  box-shadow:0 4px 12px rgba(48,86,211,.18);
  transition:.18s;
  z-index:2;
}
/* 阶段标签 */
.lz-main .path-stage{display:inline-block;background:#fff4e6;color:#d97706;font-size:11px;font-weight:700;padding:3px 10px;border-radius:11px;margin-bottom:9px;align-self:flex-start;margin-top:8px}
.lz-main .path-title{
  font-size:14px;font-weight:700;
  color:var(--ink);
  line-height:1.55;
  margin:0;
  transition:color .14s;
}
/* 箭头连线 */
.lz-main .path-card:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-14px;
  top:14px;
  width:22px;height:22px;
  background:var(--brand);
  color:#fff;
  font-size:12px;font-weight:800;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(48,86,211,.3);
  z-index:3;
}
.lz-main .path-sub{
  font-size:12px;color:var(--muted);
  line-height:1.6;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.lz-main .path-meta{
  margin-top:13px;padding-top:11px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:11px;
  font-size:11px;color:var(--muted);
}
.lz-main .path-meta .pm-item{display:flex;align-items:center;gap:4px}
.lz-main .path-meta .pm-item::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--brand);opacity:.5}
.lz-main .path-meta .pm-item:first-child::before{display:none}


/* ==========================================================================
   28. 精选展示 clt12 (.subfeat-grid / .sf-main / .sf-side / .sf-s)
   ========================================================================== */
.lz-main .subfeat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lz-main .subfeat-grid > *{min-width:0}
.lz-main .sf-side{display:flex;flex-direction:column;gap:11px}
.lz-main .sf-s{display:flex;background:var(--bg);border-radius:11px;padding:12px;gap:12px;transition:.16s;min-width:0}
.lz-main .sf-s:hover{background:var(--brand-soft);transform:translateY(-2px)}
.lz-main .sf-s .sfsi{width:100px;aspect-ratio:16/9;border-radius:7px;flex-shrink:0;overflow:hidden;background:var(--bg)}
.lz-main .sf-s .sfst{flex:1;min-width:0}
.lz-main .sf-s h4{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:4px}
.lz-main .sf-s .sfsm{font-size:11px;color:var(--muted)}
/* 精选大卡 */
.lz-main .sf-main{
  display:block;
  background:var(--bg);
  border-radius:13px;
  overflow:hidden;
  transition:.16s;
  min-width:0;
  width:100%;
}
.lz-main .sf-main:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.lz-main .sf-main .sf-main-img{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  display:block;
}
.lz-main .sf-main .sf-main-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lz-main .sf-main .sfb{padding:18px 22px}
.lz-main .sf-main .sfc{font-size:12px;color:var(--brand);font-weight:600;margin-bottom:5px}
.lz-main .sf-main .sfc:hover{opacity:.75}
.lz-main .sf-main h3{font-size:18px;font-weight:800;color:var(--ink);line-height:1.4;margin-bottom:7px}
.lz-main .sf-main h3 a:hover{color:var(--brand)}
.lz-main .sf-main p{font-size:13px;color:var(--body);line-height:1.65}
@media(max-width:768px){.lz-main .subfeat-grid{grid-template-columns:1fr}}


/* ==========================================================================
   29. 文章列表侧边栏双栏布局 (.sub-layout / .sub-aside / .side-panel)
   ========================================================================== */
.lz-main .sub-layout{
    display:grid;
    grid-template-columns:1fr 308px;
    gap:22px;
    align-items:start;
}
.lz-main .sub-layout > *{min-width:0}
.lz-main .sub-aside{
    position:sticky;
    top:80px;
}

/* 侧边栏通用面板 */
.lz-main .side-panel{
    background:var(--card,#fff);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(28,34,48,.04),0 8px 24px rgba(28,34,48,.06);
    padding:20px 22px;
    margin-bottom:18px;
}
.lz-main .side-panel:last-child{margin-bottom:0}
.lz-main .side-t{
    font-size:14px;
    font-weight:800;
    color:var(--ink,#1c2230);
    margin-bottom:13px;
    display:flex;
    align-items:center;
    gap:7px;
}
.lz-main .side-t .bar{
    width:3px;
    height:14px;
    background:var(--brand,#3056d3);
    border-radius:2px;
}

/* 侧边栏热门文章列表 */
.lz-main .pop{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.lz-main .pop:last-child{border-bottom:0}
.lz-main .pop:first-of-type{padding-top:0}
.lz-main .pop .n{font-size:13px;font-weight:800;color:var(--muted);width:17px;text-align:center;flex-shrink:0}
.lz-main .pop:nth-of-type(-n+3) .n{color:var(--brand)}
.lz-main .pop .pt{font-size:13px;font-weight:500;color:var(--ink);line-height:1.5}

/* VIP引流面板 */
.lz-main .vip-panel{background:linear-gradient(150deg,var(--brand),var(--brand-dark));border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.lz-main .vip-panel h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:4px}
.lz-main .vip-panel p{font-size:12.5px;color:rgba(255,255,255,.8);margin-bottom:13px}
.lz-main .vip-panel a{display:block;text-align:center;background:#fff;color:var(--brand);font-size:13px;font-weight:700;padding:10px;border-radius:9px}

/* 中部CTA通栏 */
.lz-main .mid-cta{background:linear-gradient(135deg,#3056d3,#2545b0);border-radius:18px;padding:32px 38px;display:flex;align-items:center;gap:26px;box-shadow:0 1px 2px rgba(28,34,48,.04),0 8px 24px rgba(28,34,48,.06);position:relative;overflow:hidden}
.lz-main .mid-cta .gift{font-size:36px;line-height:1;flex-shrink:0}
.lz-main .mid-cta .mt{flex:1;position:relative}
.lz-main .mid-cta h4{color:#fff;font-size:21px;font-weight:800;margin-bottom:5px}
.lz-main .mid-cta p{color:rgba(255,255,255,.82);font-size:13.5px;margin:0}
.lz-main .mid-cta a{position:relative;background:#fff;color:#3056d3;font-size:14px;font-weight:700;padding:13px 30px;border-radius:10px;white-space:nowrap}

/* 标签云 */
.lz-main .tagcloud a{display:inline-block;background:var(--bg);color:var(--body);font-size:12px;padding:4px 11px;border-radius:13px;margin:0 5px 7px 0}
.lz-main .tagcloud a:hover{background:var(--brand-soft);color:var(--brand)}

/* 同级互链列表 */
.lz-main .sib-list a{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);transition:.14s}
.lz-main .sib-list a:hover{color:var(--brand);padding-left:4px}
.lz-main .sib-list a:last-child{border-bottom:0}
.lz-main .sib-list a:first-child{padding-top:0}
.lz-main .sib-list a.sib-cur{color:var(--brand);font-weight:700}
.lz-main .sib-list a .sd{margin-left:auto;font-size:11px;color:var(--muted)}
.lz-main .sib-list a.sib-cur .sd{color:var(--brand)}
.lz-main .sib-back{display:block;text-align:center;background:var(--bg);color:var(--body);font-size:12.5px;font-weight:600;padding:10px;border-radius:9px;margin-top:12px;transition:.14s}
.lz-main .sib-back:hover{background:var(--brand-soft);color:var(--brand)}

/* 同级分类导航 Widget */
.widget-sibling-cats .sibling-cat-list{list-style:none;padding:0;margin:0}
.widget-sibling-cats .sibling-cat-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line,#f0f0f0);background: none;}
.widget-sibling-cats .sibling-cat-item:last-child{border-bottom:0}
.widget-sibling-cats .sibling-cat-item:first-child{padding-top:0}
.widget-sibling-cats .sibling-cat-item a{font-size:13px;color:var(--ink,#1c2230);text-decoration:none;transition:.14s}
.widget-sibling-cats .sibling-cat-item a:hover{color:var(--brand,#3056d3)}
.widget-sibling-cats .sibling-cat-count{font-size:13px;font-weight:700;color:var(--brand,#3056d3)}
.widget-sibling-cats .sibling-cat-count.empty{color:var(--muted,#999);font-weight:400}
.widget-sibling-cats .sibling-back-btn{display:block;text-align:center;background:var(--bg,#f5f7fa);color:var(--body,#333);font-size:12.5px;font-weight:600;padding:10px;border-radius:9px;margin-top:12px;text-decoration:none;transition:.14s}
.widget-sibling-cats .sibling-back-btn:hover{background:var(--brand-soft);color:var(--brand,#3056d3)}

/* 响应式：移动端侧边栏堆叠 */
@media(max-width:960px){
    .lz-main .sub-layout{
        grid-template-columns:1fr 260px;
        gap:16px;
    }
}
@media(max-width:768px){
    .lz-main .sub-layout{
        grid-template-columns:1fr;
    }
    .lz-main .sub-aside{
        position:static;
    }
}

/* ===== 网格卡片布局（clt5） ===== */
.lz-main .grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lz-main .grid-card{display:block;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:.2s}
.lz-main .grid-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.lz-main .grid-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.lz-main .grid-card-body{padding:14px 16px}
.lz-main .grid-card-title{font-size:15px;font-weight:600;color:#1c2230;margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lz-main .grid-card-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#8b919e}
.lz-main .grid-card-cat{background:#f0f1f5;padding:2px 8px;border-radius:4px;color:#646b7a}
@media(max-width:768px){.lz-main .grid-cards{grid-template-columns:1fr}}


/* ==========================================================================
   30. 摘要多行省略（通用）
   ========================================================================== */
.lz-main .post .excerpt,
.lz-main .post .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   31. 文章列表 2列模式 (.posts-col2)
   ========================================================================== */
/* 最新文章板块 2列 */
.lz-main .lz-latest-posts.posts-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* 文章列表板块(布局9横图文) 2列 */
.lz-main .article-list-block.posts-col2 .cs-imgtext-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

/* 手机端回退单列 */
@media (max-width: 768px) {
    .lz-main .lz-latest-posts.posts-col2 {
        grid-template-columns: 1fr;
    }
    .lz-main .article-list-block.posts-col2 .cs-imgtext-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   32. 网格列数切换 (.grid-cols-4) — 布局2/5/10 支持4列
   ========================================================================== */
.lz-main .grid-cols-4 .cs-cards { grid-template-columns: repeat(4, 1fr); }
.lz-main .grid-cols-4 .case-grid { grid-template-columns: repeat(4, 1fr); }
.lz-main .grid-cols-4 .cs-vip-projects { grid-template-columns: repeat(4, 1fr); }

/* 960px — 4列模式保持不变，避免4篇文章出现3+1孤立行 */
@media (max-width: 768px) {
    .lz-main .grid-cols-4 .cs-cards,
    .lz-main .grid-cols-4 .case-grid,
    .lz-main .grid-cols-4 .cs-vip-projects {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .lz-main .grid-cols-4 .cs-cards,
    .lz-main .grid-cols-4 .case-grid,
    .lz-main .grid-cols-4 .cs-vip-projects {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   33. VIP Hero / VIP Final / 学习路径 手朼端响应式
   ========================================================================== */
@media (max-width: 768px) {
  /* VIP Hero 手机端 */
  .lz-main .vip-hero { padding: 28px 20px; border-radius: 14px; }
  .lz-main .vip-hero .inner { grid-template-columns: 1fr; gap: 24px; }
  .lz-main .vip-hero h1 { font-size: 22px; }
  .lz-main .vip-hero .vh-sub { font-size: 13px; margin-bottom: 16px; }
  .lz-main .vip-hero .vh-bullets div { font-size: 12.5px; }
  .lz-main .vip-hero .vh-cta { flex-wrap: wrap; gap: 10px; }
  .lz-main .vip-hero .vh-btn1,
  .lz-main .vip-hero .vh-btn2 { white-space: nowrap; padding: 12px 22px; font-size: 14px; flex: 1; text-align: center; }
  .lz-main .vip-hero .vh-card { padding: 18px 16px; }
  .lz-main .vip-hero .vh-price b { font-size: 34px; }
  .lz-main .vip-hero .vh-stats { grid-template-columns: repeat(2, 1fr); }

  /* VIP Final CTA 简版手机端 */
  .lz-main .vip-final { padding: 30px 20px; border-radius: 14px; }
  .lz-main .vip-final h2 { font-size: 22px; }
  .lz-main .vip-final .vf-sub { font-size: 13.5px; }
  .lz-main .vip-final .vf-price b { font-size: 36px; }
  .lz-main .vip-final .vf-price b em { font-size: 18px; }
  .lz-main .vip-final .vf-btns { flex-wrap: wrap; gap: 10px; }
  .lz-main .vip-final .vf-btns .b1,
  .lz-main .vip-final .vf-btns .b2 { white-space: nowrap; padding: 12px 24px; font-size: 14px; flex: 1; text-align: center; }

  /* 学习路径手机端垂直堆叠 */
  .lz-main .path-road::before { display: none; }
  .lz-main .path-grid { grid-template-columns: 1fr; gap: 28px; }
  .lz-main .path-card:not(:last-child)::after { display: none; }
}

@media (max-width: 480px) {
  /* VIP Hero 极小屏 */
  .lz-main .vip-hero { padding: 22px 16px; }
  .lz-main .vip-hero h1 { font-size: 20px; }
  .lz-main .vip-hero .vh-cta { flex-direction: column; }
  .lz-main .vip-hero .vh-btn1,
  .lz-main .vip-hero .vh-btn2 { width: 100%; }

  /* VIP Final CTA 极小屏 */
  .lz-main .vip-final { padding: 24px 16px; }
  .lz-main .vip-final h2 { font-size: 20px; }
  .lz-main .vip-final .vf-price b { font-size: 32px; }
  .lz-main .vip-final .vf-btns { flex-direction: column; align-items: center; gap: 10px; }
  .lz-main .vip-final .vf-btns .b1,
  .lz-main .vip-final .vf-btns .b2 { width: 100%; }

  /* 学习路径极小屏 */
  .lz-main .path-grid { gap: 24px; }
  .lz-main .path-card { padding: 32px 14px 12px; }

  /* 分页器极小屏 */
  .lz-main .pager .nav-links{gap:4px}
  .lz-main .pager .page-numbers{
      min-width:30px;
      padding:6px 9px;
      font-size:12px;
  }
}


/* ============================================================
   分页器 .pager（通用 — 首页/分类/归档/搜索等所有页面）
   胶囊药丸式按钮 + 当前页 brand 色
   ============================================================ */
.lz-main .pager{
    text-align:center;
    padding:16px 0 0;
}
.lz-main .pager .nav-links{
    display:inline-flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
}
.lz-main .pager .page-numbers{
    display:inline-block;
    min-width:34px;
    padding:7px 11px;
    background:var(--bg);
    font-size:13px;
    border-radius:8px;
    color:var(--body);
    font-weight:600;
    transition:.14s;
    text-align:center;
}
.lz-main .pager a.page-numbers:hover{
    color:var(--brand);
    background:var(--brand-soft);
}
.lz-main .pager .page-numbers.current{
    background:var(--brand);
    color:#fff;
}
.lz-main .pager .page-numbers.dots{
    background:transparent;
    color:var(--muted);
}


/* ==========================================================================
   面包屑 .breadcrumb（全局通用组件）
   --------------------------------------------------------------------------
   所有新 UI 页面（分类页 / 文章页 / 单页面）复用同一套面包屑样式。
   ========================================================================== */
.lz-main .breadcrumb{padding:14px 0;font-size:13px;color:var(--muted)}
.lz-main .breadcrumb a{color:var(--muted);transition:.14s}
.lz-main .breadcrumb a:hover{color:var(--brand)}
.lz-main .breadcrumb .sep{margin:0 8px;opacity:.5}
.lz-main .breadcrumb > span:last-child{color:var(--ink);font-weight:500}

@media (max-width:480px){
    .lz-main .breadcrumb{font-size:12px;padding:10px 0}
    .lz-main .breadcrumb .sep{margin:0 6px}
}