/*

 * 老手村专题页 v3.3

 */



/* ===== 全宽布局 ===== */

.lsc-topic-fullwidth {

    float: none;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

}

/* 2026-09-15 老板要求所有新页面统一跟老博客页一样宽（内容 1200）。
   上面那条**单 class** 压不过父主题的 .content-area（本文件在父主题 style.css 之前加载，
   同优先级下后加载的父主题赢，float:left / width:70% 被套回来 → 专题页内容只剩 764 宽）。
   加一条**更高特异性**的写法，不依赖加载顺序也能赢。⛔ 别删。 */
.site-content .content-area.lsc-topic-fullwidth { float: none; width: 100%; max-width: 100%; margin: 0; padding: 0; }


.lsc-topic-fullwidth + .sidebar,

.lsc-topic-fullwidth ~ .sidebar { display: none; }

/* ⛔ 2026-09-15 老板要求「新页面全部跟老博客页一样宽（内容 1200）」：
   原来这里写 `padding: 0 2.3% !important` → 内容区算成 1259，比老页面（1200）宽 59px，也对不上顶栏。
   现在**整条删掉**，让父主题的 4.5455% 生效 → 内容正好 1200（113~1313），与老页面 / 新版首页一致。
   ⛔ 别再按"专题页要更宽"的旧思路加回来。 */



/* ===== 横向溢出修复（2026-09-14）=====

   病灶：.lsc-topic-banner 用 width:100vw 做全宽出血，而 vw 把纵向滚动条宽度（约 15px）也算进去，

   于是 banner 比可视区宽 ~15px → 页面底部出现左右滚动条。

   解法：在最外层 .site 处 clip 掉溢出（clip 只裁剪、不生成滚动容器，不影响页面纵向滚动与 sticky）。

   注：本 CSS 仅在专题页加载，作用域天然限定在专题页。 */

.site { overflow-x: clip; }



/* ===== 轮播图覆盖层 ===== */

.lsc-slider-wrap { position: relative; }

.lsc-slider-overlay {

    position: absolute;

    left: 0; right: 0; bottom: 0;

    z-index: 10;

    padding: 30px;

    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}

.lsc-slider-title {

    font-size: 28px;

    font-weight: 700;

    color: #fff;

    margin: 0 0 8px;

    text-shadow: 0 2px 6px rgba(0,0,0,.3);

}

.lsc-slider-sub {

    font-size: 14px;

    color: rgba(255,255,255,.85);

    margin: 0 0 20px;

}

.lsc-slider-btns {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}

.lsc-slider-btn,

button.lsc-slider-btn {

    border: none;

    cursor: pointer;

    font-family: inherit;

    padding: 10px 28px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 400;   /* 老板 2026-09-15：按钮文字不要加粗（原 600） */

    text-decoration: none;

    transition: all .3s;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    line-height: 1.2;

    box-sizing: border-box;

    vertical-align: middle;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

/* ⛔ 悬停态必须显式写 color:#fff —— 父主题 twentysixteen 有
   `a:hover, a:focus, a:active { color: #686868 }`（灰），它的特异性(0,0,1,1)压过
   `.lsc-slider-btn-*`(0,0,1,0)，不重声明就会出现「鼠标一移上去按钮文字变灰」。
   故这里用 a.lsc-slider-btn:hover 这种(0,0,2,1)选择器把它顶回去。 */
.lsc-slider-btn:hover,
.lsc-slider-btn:focus,
.lsc-slider-btn:active,
a.lsc-slider-btn:hover,
a.lsc-slider-btn:focus,
a.lsc-slider-btn:active,
button.lsc-slider-btn:hover,
button.lsc-slider-btn:focus,
button.lsc-slider-btn:active {

    color: #fff !important;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0,0,0,.3);

}

.lsc-slider-btn-primary { background: linear-gradient(135deg, #2196F3, #1976D2); color: #fff; }

/* 墨绿/青绿（2026-09-15 老板指定 #339999，原 Material 草绿 #4caf50 偏亮被否）
   渐变两端围绕 #339999 取值：亮端 #3DABAB + 深端 #2A8585，均值 ≈ #339898 ✅ */
.lsc-slider-btn-success { background: #339999; background: linear-gradient(135deg, #3DABAB, #2A8585); color: #fff; }
/* ⛔⛔ 为什么 hover 里还要写背景？—— 老板 2026-09-15：hover 只要「上下浮动」，不要变色。
   但父主题 twentysixteen 有一条 `button:hover, button:focus, input[type=button]:hover … { background:#007acc }`
   （特异性 0,0,1,1），会压过 `.lsc-slider-btn-xxx`（0,0,1,0）——「折扣套餐 / 技能定制」这类
   action=contact 的按钮渲染出来是 <button>，鼠标移上去会**整块变蓝**。
   所以这里必须显式把背景「声明回常态值」（看起来完全没变色），并用 button. 前缀 (0,0,2,1) 把父主题压回去。
   ⛔ 这几条不能删 —— 删了就又会变蓝。浮动效果由上面通用块的 transform/box-shadow 负责。 */
.lsc-slider-btn-primary:hover, .lsc-slider-btn-primary:focus, .lsc-slider-btn-primary:active,
button.lsc-slider-btn-primary:hover, button.lsc-slider-btn-primary:focus, button.lsc-slider-btn-primary:active { background: linear-gradient(135deg, #2196F3, #1976D2); }

.lsc-slider-btn-success:hover, .lsc-slider-btn-success:focus, .lsc-slider-btn-success:active,
button.lsc-slider-btn-success:hover, button.lsc-slider-btn-success:focus, button.lsc-slider-btn-success:active { background: #339999; background: linear-gradient(135deg, #3DABAB, #2A8585); }

.lsc-slider-btn-cold:hover, .lsc-slider-btn-cold:focus, .lsc-slider-btn-cold:active,
button.lsc-slider-btn-cold:hover, button.lsc-slider-btn-cold:focus, button.lsc-slider-btn-cold:active { background: linear-gradient(135deg, #4FC3F7, #1E88E5); }

.lsc-slider-btn-warm:hover, .lsc-slider-btn-warm:focus, .lsc-slider-btn-warm:active,
button.lsc-slider-btn-warm:hover, button.lsc-slider-btn-warm:focus, button.lsc-slider-btn-warm:active { background: linear-gradient(135deg, #FF9800, #FF6B35); }

.lsc-slider-btn-outline:hover, .lsc-slider-btn-outline:focus, .lsc-slider-btn-outline:active,
button.lsc-slider-btn-outline:hover, button.lsc-slider-btn-outline:focus, button.lsc-slider-btn-outline:active { background: transparent; }



/* ===== 内容容器 ===== */

.lsc-topic-wrap {

    max-width: 100%;

    margin: 0 auto;

    padding: 32px 0 56px;

    color: #1a1a1a;

    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

}

.lsc-topic-wrap *, .lsc-topic-wrap *::before, .lsc-topic-wrap *::after {

    box-sizing: border-box;

}



/* ===== 通用 ===== */

.lsc-section { margin-bottom: 32px; }

.lsc-section:last-child { margin-bottom: 0; }



.lsc-sec-title {

    font-size: 18px;

    font-weight: 600;

    color: #1a1a1a;

    margin: 0 0 18px;

    padding: 0 0 10px;

    border-bottom: 2px solid #2196F3;

    display: inline-block;

    letter-spacing: .3px;

}



/* ===== 核心介绍卡片 ===== */

.lsc-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 18px;

}

.lsc-card {

    background: #fafbfc;

    border: 1px solid #eaedf0;

    border-radius: 12px;

    padding: 22px 24px;

    transition: box-shadow .25s, transform .25s;

}

.lsc-card:hover {

    box-shadow: 0 6px 24px rgba(0,0,0,.06);

    transform: translateY(-2px);

}

.lsc-card-head {

    font-size: 16px;

    font-weight: 600;

    color: #1a1a1a;

    margin: 0 0 14px;

    padding: 0 0 10px;

    border-bottom: 1px solid #eaedf0;

    display: flex;

    align-items: center;

    gap: 8px;

}

.lsc-card-head::before {

    content: "";

    width: 4px;

    height: 16px;

    background: #2196F3;

    border-radius: 2px;

    flex-shrink: 0;

}

.lsc-card-text {

    color: #555;

    font-size: 14px;

    line-height: 1.85;

}

.lsc-card-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.lsc-card-list li {

    font-size: 14px;

    color: #444;

    padding: 9px 0 9px 20px;

    position: relative;

    border-bottom: 1px solid #f2f3f5;

    line-height: 1.65;

}

.lsc-card-list li:last-child { border-bottom: none; }

.lsc-card-list li::before {

    content: "";

    position: absolute;

    left: 2px;

    top: 50%;

    transform: translateY(-50%);

    width: 6px;

    height: 6px;

    background: #2196F3;

    border-radius: 50%;

}



/* ===== 产品案例 ===== */

.lsc-cases-section {

    background: #fafbfc;

    border: 1px solid #eaedf0;

    border-radius: 12px;

    padding: 22px 24px;

}

.lsc-cases-section .lsc-sec-title { margin-bottom: 16px; }

.lsc-cases-scroll {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    padding-bottom: 6px;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

}

.lsc-cases-scroll::-webkit-scrollbar { height: 4px; }

.lsc-cases-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 2px; }

.lsc-cases-scroll::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 2px; }

.lsc-cases-scroll::-webkit-scrollbar-thumb:hover { background: #2196F3; }

.lsc-case {

    flex: 0 0 auto;

    width: 220px;

    height: 352px;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #eaedf0;

    background: #fff;

    transition: transform .3s, box-shadow .3s, border-color .3s;

    scroll-snap-align: start;

}

.lsc-case:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 28px rgba(33,150,243,.12);

    border-color: #2196F3;

}

.lsc-case img {

    width: 100%; height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .4s;

}

.lsc-case:hover img { transform: scale(1.04); }

.lsc-case a { display: block; width: 100%; height: 100%; }



/* ===== 使用指南 ===== */

.lsc-guide-section {

    background: #fafbfc;

    border: 1px solid #eaedf0;

    border-radius: 12px;

    padding: 22px 24px;

}

.lsc-guide-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eaedf0;

}

.lsc-guide-head .lsc-sec-title { margin: 0; padding: 0; border: none; }

.lsc-more {

    font-size: 13px;

    color: #2196F3;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 2px;

    flex-shrink: 0;

    transition: opacity .2s;

}

.lsc-more span { font-size: 16px; }

.lsc-more:hover { opacity: .7; }

.lsc-guide-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.lsc-guide-row {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 16px;

    background: #fff;

    border-radius: 10px;

    border: 1px solid transparent;

    transition: all .25s;

    text-decoration: none;

    color: inherit;

}

.lsc-guide-row:hover {

    border-color: #2196F3;

    background: #f5f9ff;

    transform: translateX(3px);

    box-shadow: 0 2px 12px rgba(33,150,243,.08);

}

.lsc-guide-thumb {

    width: 110px;

    height: 72px;

    object-fit: cover;

    border-radius: 8px;

    flex-shrink: 0;

    background: #eee;

}

.lsc-guide-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

}

.lsc-guide-title {

    font-size: 15px;

    font-weight: 500;

    color: #1a1a1a;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    line-height: 1.5;

}

.lsc-guide-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    color: #999;

}

.lsc-tag {

    background: rgba(33,150,243,.08);

    color: #2196F3;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 500;

}

.lsc-guide-noimg .lsc-guide-title { font-size: 15px; }

.lsc-empty {

    text-align: center;

    color: #bbb;

    padding: 40px 0;

    font-size: 14px;

}



/* ===== dj-service-add PC端隐藏 ===== */

.dj-service-add { display: none; }

@media screen and (max-width: 980px) {

    .dj-service-add { display: block; }

}



/* ===== site-footer ===== */

.site-footer {

    background: none !important;

    border-top: none !important;

    padding: 24px 20px !important;

    text-align: center !important;

    font-size: 13px;

    color: #666;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

}

.site-footer .site-title:after { content: none !important; }

.site-footer .main-navigation,

.site-footer .social-navigation { display: none; }

.lsc-footer-links {

    order: -1;

    margin-bottom: 8px;

    line-height: 2;

    text-align: center !important;

}

.lsc-footer-links span { color: #999; font-size: 12px; }

.lsc-footer-links a {

    color: #555;

    text-decoration: none;

    margin: 0 6px;

    font-size: 12px;

}

.lsc-footer-links a:hover { color: #2196F3; }

.site-info {

    order: 0;

    color: #999;

    text-align: center !important;

}

.site-info a { color: #999; text-decoration: none; }

.site-info a:hover { color: #2196F3; }

.lsc-sep { margin: 0 8px; color: #ddd; }



/* ===== cr_kefu PC端圆角 ===== */

#cr_kefu {

    border-radius: 12px !important;

    overflow: hidden;

}



/* ===== 响应式 ===== */

@media (max-width: 768px) {

    .lsc-slider-overlay { padding: 16px; }

    .lsc-slider-title { font-size: 20px; }

    .lsc-slider-sub { font-size: 12px; margin-bottom: 14px; }

    /* 手机端一行 2 个按钮（老板 2026-09-15）：等宽排布，末行单个也居中，比「3+1」整齐。
       calc(50% - 4px) 里的 4px = gap 的一半。⛔ 文案加长后仍要跑 btn-wrap-audit.py 复验不溢出。 */
    .lsc-slider-btn {
        flex: 0 0 calc(50% - 4px);
        box-sizing: border-box;
        justify-content: center;
        padding: 9px 8px;
        font-size: 12px;
    }

    .lsc-slider-btns { gap: 8px; }



    .lsc-topic-wrap { padding: 20px 14px 36px; }

    /* 2026-11-05：本断点 wrap padding-top 为 20px，负 margin 同步收窄，保持 hero 紧贴菜单栏（与其它专题页一致） */
    .lsc-topic-banner { margin-top: -8px; }

    .lsc-section { margin-bottom: 20px; }

    .lsc-cards { grid-template-columns: 1fr; gap: 12px; }

    .lsc-card { padding: 16px 18px; border-radius: 10px; }



    .lsc-cases-section,

    .lsc-guide-section { padding: 16px; border-radius: 10px; }

    .lsc-case { width: 150px; height: 240px; border-radius: 8px; }

    .lsc-cases-scroll { gap: 10px; }



    .lsc-guide-thumb { width: 88px; height: 58px; border-radius: 6px; }

    .lsc-guide-row { padding: 12px; gap: 12px; border-radius: 8px; }

    .lsc-guide-title { font-size: 14px; }

    .lsc-guide-meta { gap: 6px; font-size: 11px; }

}





@media (max-width: 480px) {

    .lsc-slider-title { font-size: 18px; }

    .lsc-topic-wrap { padding: 16px 12px 28px; }

    /* 2026-11-05：同上，本断点 wrap padding-top 为 16px */
    .lsc-topic-banner { margin-top: -4px; }

    .lsc-case { width: 130px; height: 208px; }

    .lsc-card { padding: 14px 16px; }

}



/* 文章行容器：横向排列（图片+内容） */

.lsc-guide-row {

    display: flex;

    align-items: flex-start; /* 顶部对齐 */

    margin-bottom: 15px;

    padding: 15px;

    gap: 10px; /* 图片和内容之间的间距 */

}



/* 文章缩略图：固定尺寸，不拉伸 */

.lsc-guide-thumb {

    width: 80px;

    height: 60px;

    object-fit: cover;

    border-radius: 4px;

    flex-shrink: 0; /* 防止图片被压缩 */

}



/* 标题+元信息容器：垂直排列（标题在上，元信息在下） */

.lsc-guide-content {

    display: flex;

    flex-direction: column;

    gap: 5px; /* 标题和元信息之间的间距 */

    flex: 1; /* 占满剩余宽度 */

}



/* 文章标题链接：单独样式，无嵌套问题 */

.lsc-guide-title {

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    color: #333;

}



/* 标题 hover 效果（可选） */

.lsc-guide-title:hover {

    color: #0073aa;

}



/* 元信息区域：横向排列标签和日期 */

.lsc-guide-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 4px; /* 标签之间的间距 */

}



/* 标签样式 */

.lsc-tag {

    display: inline-block;

    padding: 2px 8px;

    background: #f5f5f5;

    border-radius: 4px;

    font-size: 12px;

}



/* 标签内链接：纯跳转，无样式 */

.lsc-tag a {

    text-decoration: none;

    color: #333;

}



/* 发布日期样式 */

.lsc-guide-meta span:not(.lsc-tag) {

    font-size: 12px;

    color: #999;

    margin-left: 4px;

}



/* 无图片的文章行适配 */

.lsc-guide-noimg .lsc-guide-content {

    padding-left: 0;

}



/* ===== 使用指南分页 ===== */

.lsc-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;

    padding-top: 16px;

    border-top: 1px solid #eaedf0;

}

.lsc-pagination a,

.lsc-pagination span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 34px;

    padding: 0 10px;

    border-radius: 6px;

    font-size: 14px;

    color: #444;

    text-decoration: none;

    border: 1px solid #e0e3e7;

    background: #fff;

    transition: all .2s;

}

.lsc-pagination a:hover {

    border-color: #2196F3;

    color: #2196F3;

    background: #f5f9ff;

}

.lsc-pagination span.current {

    background: #2196F3;

    border-color: #2196F3;

    color: #fff;

    font-weight: 500;

}

.lsc-pagination span.disabled {

    color: #bbb;

    background: #f5f6f7;

    cursor: not-allowed;

}

.lsc-page-prev,

.lsc-page-next {

    min-width: 70px !important;

}

@media (max-width: 480px) {

    .lsc-pagination {

        gap: 6px;

        margin-top: 18px;

    }

    .lsc-pagination a,

    .lsc-pagination span {

        min-width: 32px;

        height: 32px;

        font-size: 13px;

    }

}

/* ===== 专题页 Banner ===== */

.lsc-topic-banner {

    position: relative;

    /* ✅ 2026-11-02 老板改主意：专题页 Hero 改回「全宽通栏」，铺满整个屏幕宽度。
       —— 之前 2026-09-16 定的是「圆角卡片、跟正文 1200 对齐」，现废除。
       用 width:100vw + left:50% + margin-left:-50vw 全宽出血（与首页 .gm-hero 同款写法，
       配合 html,body{overflow-x:hidden} 吃掉纵向滚动条误差，左右精确贴边）。
       ⛔ 圆角已去掉（通栏直角），上下不留圆角。 */

    width: 100vw;

    left: 50%;

    margin-left: -50vw;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    text-align: center;

    box-sizing: border-box;

    margin-top: -20px;  /* 2026-11-05：本页 hero 与菜单栏的间距跟其它专题页不一致（实测本页 hero 顶部 140px，Codex/ChatGPT/Gemini 都是 120px）。
                           原因：banner 在 .lsc-topic-wrap 内，多吃了 wrap 的 padding-top；其它专题的 hero 是 gm-slider，在 site-content 之外，紧贴页头。
                           这里用负 margin 抵掉，让所有专题页 hero 都紧贴菜单栏。断点见文末响应式段。 */

    margin-bottom: 30px;

    /* 通栏直角，不需要圆角；overflow 也不需要（无圆角遮罩） */

    border-radius: 0;

    overflow: visible;

}

/* 2026-11-05：遮罩只为「背景图」服务。纯色 banner 加了这层 25% 黑，底色会被压暗
   （#1a1a2e → 约 #131320），跟安装页 hero 对不上。所以改成仅 --img 时生效。 */
.lsc-topic-banner--img::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.25);

    z-index: 1;

}

.lsc-topic-banner-inner {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 16px;

}

.lsc-topic-banner-title {

    font-size: 32px;

    font-weight: 700;

    line-height: 1.75;

    margin: 0;

    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;

    text-align: center !important;

}

.lsc-topic-banner-sub {

    font-size: 16px;

    font-weight: 400;

    margin: 2px 0 28px 0;

    opacity: 0.85;

    text-align: center !important;

}

.lsc-topic-banner-btns {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}

.lsc-topic-banner-btn,

.lsc-topic-banner-btn:link,

.lsc-topic-banner-btn:visited,

button.lsc-topic-banner-btn {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    /* ✅ 2026-11-05 老板：以 sz003.com/hanhua 的 hero 按钮为准（高度、左右留白都更舒展）。
       对齐 cx-topic-banner-btn：padding 12px 36px / 16px / line-height 1.2 → 实测高 43px。
       （2026-09-16 那版 38px 高、左右各 18px 偏紧，已废；字重也从 400 回到 500，跟 sz003 一致。）
       手机端另有 10px 24px / 14px 的断点值，跟 sz003 一致。 */
    min-height: 0;

    height: auto;

    padding: 12px 36px;

    border-radius: 6px;

    font-size: 16px;

    font-weight: 500;   /* 2026-11-05 跟 sz003 对齐（cx-topic-banner-btn 是 500）；09-15 那次的 400 已废 */

    line-height: 1.2;

    text-decoration: none;

    transition: all .3s;

    cursor: pointer;

    border: none;

    font-family: inherit;

    box-sizing: border-box;

    vertical-align: middle;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    text-transform: none; /* 覆盖父主题 button 全局 uppercase */

}

.lsc-topic-banner-btn:hover,

button.lsc-topic-banner-btn:hover,

.lsc-topic-banner-btn:focus,

button.lsc-topic-banner-btn:focus {

    /* ⭐ 2026-09-16 老板：「鼠标移动上去，文字怎么变灰了，可以让文字不变色」
       根因 = 父主题 twentysixteen 的 `a:hover, a:focus, a:active { color: #686868 }`
              （#686868 就是那个灰）；它的特异度 (0,1,1) 压过按钮变体类的 (0,1,0)，
              所以鼠标一上去白字就被染成灰色。
       这里显式钉死白色：`.lsc-topic-banner-btn:hover` = (0,2,0)，稳压父主题那条。
       ⛔ 5 个变体（primary / success / outline / cold / warm）文字**全是白字**，故统一 #fff；
          将来若新增深色文字的变体，要单独给那条变体写 hover 的 color。
       ⛔ 别删这一行 color —— 删了就会退回「hover 变灰」。 */
    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.lsc-topic-banner-btn-primary { background: #339999; color: #fff; }

/* hover 不变色，只上浮 —— 背景显式声明回常态值（同时防父主题 button:hover 盖成蓝色） */
.lsc-topic-banner-btn-primary:hover, button.lsc-topic-banner-btn-primary:hover,
.lsc-topic-banner-btn-primary:focus, button.lsc-topic-banner-btn-primary:focus { background: #339999; }

.lsc-topic-banner-btn-success { background: #339999; color: #fff; }

.lsc-topic-banner-btn-success:hover, button.lsc-topic-banner-btn-success:hover,
.lsc-topic-banner-btn-success:focus, button.lsc-topic-banner-btn-success:focus { background: #339999; }

.lsc-topic-banner-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }

.lsc-topic-banner-btn-outline:hover, button.lsc-topic-banner-btn-outline:hover,
.lsc-topic-banner-btn-outline:focus, button.lsc-topic-banner-btn-outline:focus { background: transparent; border-color: rgba(255,255,255,0.6); }

@media (max-width: 768px) {

    .lsc-topic-banner-title { font-size: 24px; }

    .lsc-topic-banner-sub { font-size: 14px; }

    .lsc-topic-banner-btn { padding: 10px 24px; font-size: 14px; }

    /* 2026-11-05 手机版：hero 两个下载按钮被挤成上下两行后按文字自适应宽度，
       「Windows 下载」和「Mac版下载」宽窄不一、左右参差。统一最小宽度 + 居中，
       竖排时两个按钮等宽对齐。 */
    .lsc-topic-banner-btns { gap: 12px; }

    .lsc-topic-banner-btn { min-width: 210px; }

}



/* ===== 会员套餐 =====

   4 个字段：套餐名称 / 套餐小标题 / 套餐费用 / 套餐介绍

   布局：名称与费用一行两端；小标题在下方（带虚线分隔）；介绍在最下

   （2026-09-14 由 9 字段精简为 4 字段） */

.lsc-packages-sub {

    margin: -8px 0 18px;

    font-size: 13px;

    color: #888;

}

.lsc-packages-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 16px;

}

.lsc-pkg {

    background: #fff;

    border: 1px solid #eaedf0;

    border-radius: 12px;

    padding: 18px 20px;

    display: flex;

    flex-direction: column;

    transition: box-shadow .25s, transform .25s, border-color .25s;

}

.lsc-pkg:hover {

    box-shadow: 0 8px 26px rgba(33,150,243,.10);

    transform: translateY(-3px);

    border-color: #2196F3;

}

/* 套餐名称 + 套餐费用：一行两端对齐 */

.lsc-pkg-head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 4px;

}

.lsc-pkg-name {

    font-size: 18px;

    font-weight: 700;

    color: #1a1a1a;

    line-height: 1.3;

    word-break: break-word;

}

.lsc-pkg-price {

    font-size: 22px;

    font-weight: 700;

    color: #ff6b35;

    white-space: nowrap;

    line-height: 1.2;

}

/* 套餐小标题 */

.lsc-pkg-sub {

    display: block;

    font-size: 13px;

    color: #888;

    line-height: 1.5;

    padding-bottom: 10px;

    margin-bottom: 10px;

    border-bottom: 1px dashed #eef0f2;

}

/* 套餐介绍 */

.lsc-pkg-desc {

    margin: 0;

    font-size: 13px;

    color: #666;

    line-height: 1.7;

    flex: 1;

}

/* 套餐特点：灰底圆角小标签并排、可换行（老板给的参考样式） */

.lsc-pkg-features {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 12px 0 0;

    padding-top: 10px;

    border-top: 1px dashed #f0f2f4;

}

.lsc-pkg-feature {

    font-size: 12px;

    color: #555;

    background: #f4f6f8;

    border-radius: 6px;

    padding: 4px 10px;

    line-height: 1.5;

    white-space: nowrap;

}

/* 套餐卡片底部「联系客服」按钮（2026-09-20 老板要求）
   点了弹客服弹窗（二维码 + 客服微信号，组件 template-parts/contact-modal.php；
   二维码默认走主站，专题可在后台单独覆盖 —— packages.service_qrcode / service_word）。
   文字后台可自定义（packages.items[].btn_text），留空前端默认「联系客服」。
   ⭐ 底色走 CSS 变量 --lsc-pkg-btn：专题后台填 packages.btn_color → 模板写在 .lsc-packages-section
      的 inline style 上，填了才输出。留空 = 回落这里的默认值 #339999。改色不用动这个文件。
   ⛔ 背景必须在 :hover/:focus/:active 里显式写回同一个 var() —— 父主题
     `button:hover,button:focus{background:#007acc}` 会把它盖成蓝色（见技能 2.17 坑②）。
     写死 #339999 的话，自定义了颜色的专题一 hover 就会跳回青绿。
   ⛔ 别删 hover 里的 color/background：删了就退回「hover 变灰/变蓝」。
   ⛔ hover 的 box-shadow 用中性黑 rgba(0,0,0,.16)，别用带色值的阴影（换色后不协调）。 */

.lsc-pkg-btn,

button.lsc-pkg-btn {

    display: block;

    width: 100%;

    margin: 14px 0 0;

    padding: 10px 12px;

    border: none;

    border-radius: 8px;

    background: var(--lsc-pkg-btn, #339999);

    color: #fff;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2;

    text-align: center;

    font-family: inherit;

    text-transform: none;

    cursor: pointer;

    box-sizing: border-box;

    transition: transform .25s, box-shadow .25s, background .25s;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

.lsc-pkg-btn:hover,

button.lsc-pkg-btn:hover,

.lsc-pkg-btn:focus,

button.lsc-pkg-btn:focus,

.lsc-pkg-btn:active,

button.lsc-pkg-btn:active {

    background: var(--lsc-pkg-btn, #339999);   /* = 常态值 → 视觉不变色，只上浮（换色后也一致） */

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0,0,0,.16);

}



/* ===== 使用指南 + 插件分享 并排（各占一半） ===== */

.lsc-split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    align-items: start;

}

.lsc-split .lsc-split-col {

    margin-bottom: 0;

    min-width: 0;

}

.lsc-split .lsc-guide-row {

    gap: 12px;

    padding: 12px;

}

.lsc-split .lsc-guide-thumb {

    width: 80px;

    height: 56px;

}

.lsc-split .lsc-guide-title {

    font-size: 14px;

}

.lsc-split .lsc-guide-meta {

    gap: 6px;

}

.lsc-split .lsc-pagination a,

.lsc-split .lsc-pagination span {

    min-width: 30px;

    height: 30px;

    font-size: 13px;

    padding: 0 8px;

}

.lsc-split .lsc-pagination {

    gap: 6px;

    margin-top: 16px;

}



@media (max-width: 900px) {

    .lsc-split {

        grid-template-columns: 1fr;

        gap: 20px;

    }

}



@media (max-width: 768px) {

    .lsc-packages-grid {

        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

        gap: 12px;

    }

    .lsc-pkg {

        padding: 14px;

        border-radius: 10px;

    }

    .lsc-pkg-name { font-size: 16px; }

    .lsc-pkg-price { font-size: 18px; }

    .lsc-pkg-sub { font-size: 12px; padding-bottom: 8px; margin-bottom: 8px; }

    .lsc-pkg-desc { font-size: 12px; }

    .lsc-pkg-features { gap: 6px; margin-top: 10px; padding-top: 8px; }

    .lsc-pkg-feature { font-size: 11px; padding: 3px 8px; }

}



/* ===== 页头与 hero 的间距（2026-09-17 老板：跟首页一样，上面留点间距）=====

   背景：2026-09-14 老板曾要求 hero 紧贴页头（当时对齐的是旧轮播，间距 0）。
        2026-09-17 老板改主意：专题页 Hero 改成圆角卡片后要跟首页 Hero 一致 ——
        首页写法是 .lsc-home .hero{padding:20px 0 4px}，即页头和卡片之间留 20px。
        banner 已不再直角通栏，紧贴页头反而难看，这里把 padding-top 从 0 恢复为 20px。

   做法：仍用 :has() 精准命中含 banner 的专题页，其余 13 个没有 banner 的
        专题页完全不受影响。横向 padding 与底部 padding 保持原样。 */

.lsc-topic-wrap:has(> .lsc-topic-banner) {

    padding-top: 20px !important;

}

/* 手机端跟首页 wap 版对齐（.lsc-home.wap .hero{padding:12px 0 2px}） */

@media (max-width: 768px) {

    .lsc-topic-wrap:has(> .lsc-topic-banner) {

        padding-top: 12px !important;

    }

    .lsc-topic-banner {

        border-radius: 0;

    }

}

/* ===== 套餐卡片视觉增强（2026-09-14 老板要求：太素，加边框颜色）=====
   ① 每张卡顶部加分档渐变色条：第1张蓝、第2张青、第3张橙、第4张紫，第5张起循环；
   ② 边框染浅灰蓝 + 柔和投影，白卡不再「浮」在页面里；
   ③ hover 边框/投影换成对应档位色。
   纯 CSS 追加：不动 HTML、不动字号，全部专题页通用。 */
.lsc-pkg {
    border-color: #dfe6ee;
    box-shadow: 0 1px 6px rgba(16, 36, 64, .06);
}
.lsc-pkg::before {
    content: "";
    display: block;
    height: 4px;
    margin: -18px -20px 14px;      /* 抵消卡片 padding，色条通到卡片顶边 */
    border-radius: 11px 11px 0 0;
    background: linear-gradient(90deg, #2196F3, #42A5F5);
}
.lsc-pkg:nth-child(4n+2)::before { background: linear-gradient(90deg, #00BFA5, #26C6DA); }
.lsc-pkg:nth-child(4n+3)::before { background: linear-gradient(90deg, #FF9800, #FF6B35); }
.lsc-pkg:nth-child(4n+4)::before { background: linear-gradient(90deg, #7C4DFF, #5C6BC0); }
.lsc-pkg:nth-child(4n+2):hover {
    border-color: #00BFA5;
    box-shadow: 0 8px 26px rgba(0, 191, 165, .12);
}
.lsc-pkg:nth-child(4n+3):hover {
    border-color: #FF9800;
    box-shadow: 0 8px 26px rgba(255, 152, 0, .13);
}
.lsc-pkg:nth-child(4n+4):hover {
    border-color: #7C4DFF;
    box-shadow: 0 8px 26px rgba(124, 77, 255, .12);
}
@media (max-width: 768px) {
    .lsc-pkg::before { margin: -14px -14px 12px; border-radius: 9px 9px 0 0; }
}

/* ===== 推荐套餐标记（2026-09-14 后台新增「推荐」勾选）=====
   勾了推荐的卡：橙色边框+光晕压过分档配色，右上角挂「推荐」角标。 */
.lsc-pkg--hot {
    position: relative;
    border-color: #FF9800;
    box-shadow: 0 4px 18px rgba(255, 152, 0, .13);
}
.lsc-pkg--hot::before { background: linear-gradient(90deg, #FF9800, #FF6B35); }
.lsc-pkg--hot:hover {
    border-color: #FF9800;
    box-shadow: 0 8px 26px rgba(255, 152, 0, .18);
}
.lsc-pkg-badge {
    position: absolute;
    top: -10px;              /* 骑在卡片上沿之外，绝不覆盖卡片内的「名称 + 价格」一行 */
    right: 12px;
    z-index: 2;
    background: linear-gradient(135deg, #FF9800, #FF6B35);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 5px 10px 6px;
    border-radius: 999px;
    border: 1px solid #fff;              /* 浮出部分与页面底分隔更清晰 */
    box-shadow: 0 2px 6px rgba(255, 107, 53, .35);
}
@media (max-width: 768px) {
    .lsc-pkg-badge { top: -8px; right: 10px; font-size: 10px; padding: 4px 8px 5px; }
}

/* ===== Banner按钮新增 冷色/暖色（2026-09-14 老板要求：只有蓝绿两色太单一）=====
   冷色=冰蓝、暖色=橙红；文字banner用纯色，图片轮播overlay用同系渐变。 */
.lsc-topic-banner-btn-cold,
.lsc-topic-banner-btn-cold:link,
.lsc-topic-banner-btn-cold:visited,
button.lsc-topic-banner-btn-cold { background: #2196F3; color: #fff; }
.lsc-topic-banner-btn-cold:hover,
button.lsc-topic-banner-btn-cold:hover { background: #2196F3; }
.lsc-topic-banner-btn-warm,
.lsc-topic-banner-btn-warm:link,
.lsc-topic-banner-btn-warm:visited,
button.lsc-topic-banner-btn-warm { background: #FF6B35; color: #fff; }
.lsc-topic-banner-btn-warm:hover,
button.lsc-topic-banner-btn-warm:hover { background: #FF6B35; }
.lsc-slider-btn-cold { background: linear-gradient(135deg, #4FC3F7, #1E88E5); color: #fff; }
.lsc-slider-btn-warm { background: linear-gradient(135deg, #FF9800, #FF6B35); color: #fff; }


/* ===== 案例图片灯箱（2026-09-15） ===== */
.lsc-lightbox-img { cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;   /* iOS/安卓点按不闪蓝框 */
    touch-action: manipulation; }               /* 去掉 300ms 延迟、防双击误缩放 */
#lsc-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .78);
    -webkit-backdrop-filter: blur(3px);         /* iOS Safari 9~17 需前缀 */
    backdrop-filter: blur(3px);
    overflow: hidden; }
#lsc-lightbox.is-open { display: flex; }
/* 关闭按钮要「跟着大图走」→ 必须有一层尺寸等于图片的定位父层，按钮才能贴它的右上角 */
#lsc-lightbox .lsc-lightbox-inner { position: relative; display: inline-block;
    line-height: 0; max-width: 92vw; max-height: 90vh; }
#lsc-lightbox img { display: block; width: auto; height: auto;
    max-width: 720px;                           /* 老浏览器降级（不支持 min() 时用这条） */
    max-width: min(92vw, 720px);
    max-height: 90vh;
    border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
    cursor: default;                            /* 点图不关闭，别用 zoom-out 误导（关靠×/空白/Esc） */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent; }
/* 按钮浮在大图右上角外侧（不遮内容）；深底+白描边，深色遮罩和浅色案例图上都看得清 */
#lsc-lightbox .lsc-lightbox-close { position: absolute; top: -18px; right: -18px;
    width: 44px; height: 44px; box-sizing: border-box;   /* 44px = iOS/安卓最小可点尺寸 */
    border: 1px solid rgba(255,255,255,.75); border-radius: 50%;
    background: rgba(0, 0, 0, .5); color: #fff; font-size: 24px; line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    cursor: pointer; padding: 0;
    -webkit-appearance: none; appearance: none;         /* 抹掉 iOS button 默认样式 */
    transition: background .2s; }
#lsc-lightbox .lsc-lightbox-close:hover { background: rgba(0, 0, 0, .75); }
#lsc-lightbox .lsc-lightbox-close:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* 触摸设备（无 hover 能力）关掉案例卡的悬停位移/放大 ——
   否则点开大图收起后，被点的那张会残留 hover 放大态（安卓/iOS 通病）。
   老浏览器不认 hover 媒体特性 → 整块跳过，退回原行为，不会更坏。 */
@media (hover: none) {
    .lsc-case:hover { transform: none; box-shadow: none; border-color: #eaedf0; }
    .lsc-case:hover img { transform: none; }
}

/* 手机端：大图留呼吸位；按钮改为「大图右上角内侧」——
   窄屏图片宽 = 92vw（左右各剩 4vw≈15px），按钮若仍浮在外侧会冲出屏幕，故挪进图内 */
@media screen and (max-width: 480px) {
    #lsc-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; }
    #lsc-lightbox .lsc-lightbox-close { top: 8px; right: 8px; width: 40px; height: 40px; font-size: 22px;
        background: rgba(0, 0, 0, .55); }
}

/* 极窄屏（iPhone SE / 5s 等 320~360px）：再缩一档字号，保证「技能插件定制」「Mac (Apple芯片)」
   这类长文案在半宽按钮里也不换行（2026-09-15） */
@media (max-width: 360px) {

    .lsc-slider-btn { font-size: 11px; padding: 9px 6px; }

}


/* ===================================================================
   2026-09-15：大屏内容宽度统一为 1200（与老博客页一致，靠外层 .site-content 的百分比内边距留白）。
   ⛔ 但小屏时外层留白只有 ~6px（父主题手机端 padding 1.5625%）→ 内容会贴屏边。
   这里补 18px；阈值 1260 = 1200 内容 + 两侧 30px，保证 ≥1260 时仍是满 1200、不受影响。
   =================================================================== */
@media (max-width: 1259px) {
  .lsc-topic-wrap { padding-left: 18px; padding-right: 18px; }
}


/* ===================================================================
   2026-11-02：专题页 header 的 gm-slider 背景图轮播（星空图 hero）自包含样式。
   病灶：这段轮播的样式原本在 gm-tdu32.css 里，但那个文件根本没被 enqueue，
   导致 .gm-slider-wrap/overlay/title/btn 全部裸奔——图片不撑宽、overlay 不定位、
   标题掉到图下方贴左。这里把 gm-slider 所需样式完整补齐（不依赖 owl 库）。
   ⛔ 只服务「专题 banner 配了背景图」的场景（如 workbuddy），纯文字 banner 专题不受影响。
   =================================================================== */
.gm-slider-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
}
.gm-slider-wrap .owl-carousel,
.gm-slider-wrap .owl-theme {
    display: block;
    margin: 0;
    padding: 0;
}
.gm-slider-wrap .gm-slider-item img {
    display: block;
    width: 100%;
    height: auto;
}
.gm-slider-wrap .gm-slider-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 40px 30px 34px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gm-slider-wrap .gm-slider-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.gm-slider-wrap .gm-slider-sub {
    font-size: 16px;
    color: rgba(255,255,255,.88);
    margin: 0 0 24px;
    line-height: 1.6;
}
.gm-slider-wrap .gm-slider-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.gm-slider-wrap .gm-slider-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 11px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gm-slider-wrap .gm-slider-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.gm-slider-wrap .gm-slider-btn-primary { background: linear-gradient(135deg, #2196F3, #1976D2); color: #fff; }
.gm-slider-wrap .gm-slider-btn-success { background: linear-gradient(135deg, #4caf50, #388e3c); color: #fff; }
.gm-slider-wrap .gm-slider-btn-warm { background: #ff9800; color: #fff; }
.gm-slider-wrap .gm-slider-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.8); }
.gm-slider-wrap .gm-slider-btn-cold { background: #607d8b; color: #fff; }

@media (max-width: 768px) {
    .gm-slider-wrap .gm-slider-overlay { padding: 24px 16px 20px; }
    .gm-slider-wrap .gm-slider-title { font-size: 22px; }
    .gm-slider-wrap .gm-slider-sub { font-size: 13px; margin-bottom: 16px; }
    .gm-slider-wrap .gm-slider-btn { padding: 9px 20px; font-size: 13px; }
}

/* ===== 2026-11-05 使用指南缩略图容器兜底 =====
   .lsc-guide-row 里图片外面还包了一层 <a>，<a> 是 flex item，
   图片懒加载未完成时 <a> 会先塌陷、图片加载后又按原始比例撑开，
   导致同列几条文章缩略图大小不一（第 3/4 条尤其明显）。
   这里把包裹层钉死成固定尺寸，图片统一 100% 填满并 cover 裁剪。 */
.lsc-guide-row > a:first-child {
    display: block;
    flex: 0 0 80px;
    width: 80px;
    height: 60px;
    line-height: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #eee;
}

.lsc-guide-row > a:first-child .lsc-guide-thumb {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
}

/* 左右并排模式（指南 + 插件技能）下缩略图略矮 */
.lsc-split .lsc-guide-row > a:first-child {
    flex: 0 0 80px;
    width: 80px;
    height: 56px;
}

/* 移动端与既有规则保持一致 */
@media (max-width: 768px) {
    .lsc-guide-row > a:first-child,
    .lsc-split .lsc-guide-row > a:first-child {
        flex: 0 0 88px;
        width: 88px;
        height: 58px;
    }
}

/* 2026-11-05 老板：专题页 hero 按钮文案已统一成「Windows 下载 / Mac版下载」，但图标和文字贴在一起（安装页按钮无图标，所以没这问题）。
   给图标补一点右间距，跟文字分开。 */
.lsc-topic-banner-btn > i { margin-right: 7px; }