@charset "utf-8";
/* ==========================================================================
   创业宝盒 · 页面专属层
   作用域：body.cyb-ui —— 通用组件在 cyb-ui.css 里，这里只放「某一类页面」才有的结构
   覆盖：商品列表 / 商品详情 / 内容详情 / 交易流程 / 搜索 / 会员中心 / 登录注册
   加载顺序：cyb-theme.css → cyb-ui.css → cyb-pages.css → pc-home.css
   ========================================================================== */

/* ==========================================================================
   1. 商品列表（产品中心及其子栏目）
   ========================================================================== */
/* 用 CSS Grid 取代 Bootstrap3 的 float 栅格：同排卡片天然等高，
   不会因为某张卡多了「发货方式」角标或价格换行就把整排基线带歪 */
body.cyb-ui .product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

@media (min-width: 768px) {
    body.cyb-ui .product-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    body.cyb-ui .product-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 清掉 Bootstrap3 列的 float / 宽度 / 内距，避免与 Grid 打架 */
body.cyb-ui .product-list > [class*="col-"] {
    display: flex;
    float: none;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
}

/* .row 的 ::before/::after 是 display:table 的清浮动占位，
   在 Grid 里会各占一个格子，把首个商品挤到第 2 列 */
body.cyb-ui .product-list::before,
body.cyb-ui .product-list::after {
    display: none;
    content: none;
}

/* 列表页顶部的栏目简介（列表说明） */
body.cyb-ui .product-list-intro {
    margin-bottom: 18px;
    color: var(--cyb-muted);
    font-size: 13.5px;
}

/* ---- 卡片底部的价格与按钮 ----
   价格在左、按钮在右，两者同排：靠 .shop-foot 的 margin-top:auto 顶到卡片底部，
   卡片等高后整排的价格与按钮都落在同一条线上 */
body.cyb-ui .product-list .shop-foot {
    padding-top: 10px;
}

body.cyb-ui .product-list .shop-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    margin: 0;
    line-height: 1.25;
}

body.cyb-ui .product-list .shop-price .price-now {
    font-size: 18px;
}

/* 未定价：中性灰，不与真实售价抢注意力，但位置与有价卡片完全一致 */
body.cyb-ui .product-list .price-ask {
    color: var(--cyb-muted);
    font-family: var(--cyb-font);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .5px;
}

/* 普通卡片（非商品）底部的那句弱信息 */
body.cyb-ui .product-list .shop-limit {
    overflow: hidden;
    color: var(--cyb-muted-2);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 列表页页头 ---- */
/* 面包屑在上、标题与数量在下：比原来只放大字标题更有层次，也不占地方 */
body.cyb-ui .page-hero {
    margin-bottom: 20px;
}

body.cyb-ui .page-hero-crumb {
    margin-bottom: 10px;
}

body.cyb-ui .page-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

body.cyb-ui .page-hero-main {
    min-width: 0;
}

body.cyb-ui .page-hero-title {
    position: relative;
    margin: 0;
    padding-left: 14px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cyb-ink);
    letter-spacing: .2px;
}

/* 与面板标题同一枚火焰竖条，整站的标题语言保持一致 */
body.cyb-ui .page-hero-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: var(--cyb-fire);
}

body.cyb-ui .page-hero-suffix {
    margin-left: 8px;
    color: var(--cyb-muted-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

body.cyb-ui .page-hero-desc {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--cyb-muted);
    font-size: 13.5px;
    line-height: 1.7;
}

/* 右侧数量：把「有多少东西可看」直接摆出来。
   不用小卡片装它——页头已经在标题上花了力气，再加一个框就多一层线条 */
body.cyb-ui .page-hero-stat {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-bottom: 3px;
}

body.cyb-ui .page-hero-stat b {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

body.cyb-ui .page-hero-stat span {
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

/* ---- 筛选区 ---- */
body.cyb-ui .panel-filter > .panel-body {
    padding: 13px 20px 7px;
}

/* ---- 结果区标题栏 ---- */
body.cyb-ui .panel-result > .panel-heading .more {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 排序胶囊与视图切换之间加一道极细的分隔，两组控件不糊在一起 */
body.cyb-ui .panel-result .view-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-surface-2);
}

body.cyb-ui .panel-result .view-switch::before {
    display: none;
}

body.cyb-ui .view-switch button {
    display: block;
    width: 30px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--cyb-r-xs);
    background: transparent;
    color: var(--cyb-muted-2);
    font-size: 13px;
    line-height: 26px;
    transition: background-color .18s var(--cyb-ease), color .18s var(--cyb-ease);
}

body.cyb-ui .view-switch button:hover {
    color: var(--cyb-text-2);
}

body.cyb-ui .view-switch button.active {
    background: var(--cyb-surface);
    color: var(--cyb-brand);
    box-shadow: var(--cyb-shadow-xs);
}

/* ---- 紧凑模式：一行一条，适合快速比价 ---- */
body.cyb-ui .product-list.view-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

body.cyb-ui .product-list.view-list .shop-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 92px;
    transform: none;
}

body.cyb-ui .product-list.view-list .shop-card:hover {
    transform: none;
}

body.cyb-ui .product-list.view-list .shop-thumb {
    flex: 0 0 92px;
    width: 92px;
}

body.cyb-ui .product-list.view-list .shop-thumb .embed-responsive {
    position: absolute;
    inset: 0;
    height: 100%;
    padding-bottom: 0;
}

body.cyb-ui .product-list.view-list .shop-thumb img {
    height: 100%;
    object-fit: cover;
}

body.cyb-ui .product-list.view-list .shop-body {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

body.cyb-ui .product-list.view-list .shop-title {
    flex: 1 1 auto;
    height: auto;
    max-height: 44px;
    font-size: 14.5px;
}

body.cyb-ui .product-list.view-list .shop-desc,
body.cyb-ui .product-list.view-list .shop-meta {
    display: none;
}

body.cyb-ui .product-list.view-list .shop-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 767px) {
    body.cyb-ui .page-hero-row {
        display: block;
    }

    body.cyb-ui .page-hero-title {
        font-size: 21px;
    }

    body.cyb-ui .page-hero-stat {
        display: inline-flex;
        margin-top: 12px;
    }

    /* 排序项与视图切换同为一行；不换行，窄屏时排序项一侧可横向滑动（见 cyb-ui.css） */
    body.cyb-ui .panel-result > .panel-heading .more {
        flex-wrap: nowrap;
        gap: 10px;
    }

    /* 双列时每张卡只有 ~150px 可用：收一号字号，
       保证价格与「立即购买」仍在同一行上 */
    body.cyb-ui .product-list .shop-price {
        gap: 3px;
    }

    body.cyb-ui .product-list .shop-price .price-now {
        font-size: 16px;
    }

    body.cyb-ui .product-list .shop-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 12.5px;
        line-height: 32px;
    }

    /* 列表/宫格切换按钮（原先 30×26）与数量加减（原先 32×32）都小于手指的舒适点按区 */
    body.cyb-ui .js-view-grid,
    body.cyb-ui .js-view-list {
        width: 36px;
        height: 34px;
        line-height: 34px;
    }

    body.cyb-ui .js-minus,
    body.cyb-ui .js-plus {
        min-width: 38px;
        height: 38px;
    }

    body.cyb-ui .product-list.view-list .shop-thumb {
        flex: 0 0 78px;
        width: 78px;
    }

    body.cyb-ui .product-list.view-list .shop-body {
        display: block;
        padding: 10px 12px;
    }
}

@media (max-width: 400px) {
    body.cyb-ui .product-list .shop-price .price-now {
        font-size: 15px;
    }

    /* 极窄时「起」字也省掉，价格本身就是最低价 */
    body.cyb-ui .product-list .shop-price .price-from {
        display: none;
    }
}

/* ==========================================================================
   2. 商品详情
   ========================================================================== */
/* 上方的图片与购买区保持单栏：买家一屏内就能看清图和价格，不用左右扫视。
   下方的详情区才分两栏——左边看详情，右边放推荐，长内容不至于一路空到底 */
body.cyb-ui .product-detail-layout {
    margin-top: 0;
}

body.cyb-ui .product-detail-layout > main > .panel:last-child,
body.cyb-ui .product-detail-layout > aside > .panel:last-child {
    margin-bottom: 18px;
}

/* 详情面板的 tab 头紧贴卡片上沿，跟内容区连成一体 */
body.cyb-ui .product-detail-panel > .panel-heading {
    padding: 0 18px;
}

body.cyb-ui .product-detail-panel > .panel-body {
    padding: 15px 18px;
}

/* ---- 右栏：购买须知 ---- */
body.cyb-ui .product-aside-card > .panel-body,
body.cyb-ui .aside-help > .panel-body {
    padding: 6px 18px 15px;
}

body.cyb-ui .aside-facts {
    margin: 0;
}

body.cyb-ui .aside-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--cyb-line);
    font-size: 13.5px;
}

body.cyb-ui .aside-facts li:last-child {
    border-bottom: 0;
}

body.cyb-ui .aside-facts .fact-key {
    flex: 0 0 auto;
    color: var(--cyb-muted-2);
}

body.cyb-ui .aside-facts .fact-val {
    color: var(--cyb-text);
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

body.cyb-ui .aside-promise {
    padding-top: 4px;
    border-top: 1px solid var(--cyb-line);
}

body.cyb-ui .aside-promise p {
    position: relative;
    margin: 10px 0 0;
    padding-left: 22px;
    color: var(--cyb-muted);
    font-size: 12.5px;
    line-height: 1.65;
}

body.cyb-ui .aside-promise i {
    position: absolute;
    top: 3px;
    left: 0;
    color: var(--cyb-brand);
    font-size: 13px;
}

/* ---- 右栏：同类商品 ---- */
body.cyb-ui .product-aside-relate > .panel-body {
    padding: 14px 20px 18px;
}

body.cyb-ui .relate-grid {
    display: grid;
    gap: 10px;
}

body.cyb-ui .relate-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    background: var(--cyb-surface);
    text-decoration: none;
    transition: border-color .2s var(--cyb-ease), background-color .2s var(--cyb-ease),
        transform .2s var(--cyb-ease-out);
}

body.cyb-ui .relate-item:hover {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-bg-soft);
    transform: translateX(2px);
}

body.cyb-ui .relate-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-bg-mute);
    overflow: hidden;
}

body.cyb-ui .relate-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.cyb-ui .relate-body {
    min-width: 0;
}

body.cyb-ui .relate-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--cyb-text);
    font-size: 13.5px;
    line-height: 1.5;
}

body.cyb-ui .relate-item:hover .relate-title {
    color: var(--cyb-brand);
}

body.cyb-ui .relate-price {
    display: block;
    margin-top: 4px;
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 14px;
    font-weight: 700;
}

/* ---- 右栏：热销榜 ---- */
body.cyb-ui .hot-product > .panel-body {
    padding: 6px 20px 16px;
}

body.cyb-ui .hot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .hot-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

body.cyb-ui .hot-rank {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: var(--cyb-r-xs);
    background: var(--cyb-bg-mute);
    color: var(--cyb-muted);
    font-family: var(--cyb-font-num);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

body.cyb-ui .hot-row:nth-child(-n+3) .hot-rank {
    background: var(--cyb-fire);
    color: #fff;
}

body.cyb-ui .hot-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-bg-mute);
    overflow: hidden;
}

body.cyb-ui .hot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.cyb-ui .hot-body {
    min-width: 0;
    flex: 1;
}

body.cyb-ui .hot-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--cyb-text-2);
    font-size: 13px;
    line-height: 1.5;
}

body.cyb-ui .hot-title:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .hot-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
}

body.cyb-ui .hot-price {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 13.5px;
    font-weight: 700;
}

body.cyb-ui .hot-sales {
    color: var(--cyb-muted-2);
    font-size: 12px;
}

/* ---- 右栏：常见问题 ---- */
body.cyb-ui .aside-faq {
    margin: 0;
}

body.cyb-ui .aside-faq dt {
    position: relative;
    padding-left: 18px;
    color: var(--cyb-text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
}

body.cyb-ui .aside-faq dt::before {
    content: "Q";
    position: absolute;
    left: 0;
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 12.5px;
    font-weight: 700;
}

body.cyb-ui .aside-faq dd {
    margin: 4px 0 14px;
    padding-left: 18px;
    color: var(--cyb-muted);
    font-size: 12.5px;
    line-height: 1.7;
}

body.cyb-ui .aside-faq dd:last-of-type {
    margin-bottom: 16px;
}

body.cyb-ui .aside-contact {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--cyb-brand-line);
    border-radius: var(--cyb-r);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    font-size: 13.5px;
    text-align: center;
    transition: background-color .2s var(--cyb-ease), border-color .2s var(--cyb-ease);
}

body.cyb-ui .aside-contact i {
    margin-right: 6px;
}

body.cyb-ui .aside-contact:hover,
body.cyb-ui .aside-contact:focus {
    border-color: var(--cyb-brand);
    background: #ffe9e1;
    color: var(--cyb-brand-deep);
}

@media (max-width: 991px) {
    /* 单栏时右栏内容紧接详情之后，不需要卡片底部的双倍留白 */
    body.cyb-ui .product-detail-layout > aside > .panel:last-child {
        margin-bottom: 0;
    }
}

body.cyb-ui .product-crumb {
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
}

/* 主图区正方形：高度不再写死，跟随自身宽度（桌面约 457px、手机约 350px），
   方图（600×600）正好铺满、不再两侧留空；竖版截图仍按 contain 完整显示不被裁。 */
body.cyb-ui .product-gallery-top {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
}

body.cyb-ui .product-gallery-top .swiper-slide {
    cursor: zoom-in;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background-color: var(--cyb-surface);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.cyb-ui .product-gallery-top .swiper-button-next,
body.cyb-ui .product-gallery-top .swiper-button-prev {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: var(--cyb-shadow-sm);
    background-size: 11px 11px;
    opacity: .9;
    transition: opacity .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease);
}

body.cyb-ui .product-gallery-top .swiper-button-next:hover,
body.cyb-ui .product-gallery-top .swiper-button-prev:hover {
    opacity: 1;
    box-shadow: var(--cyb-shadow);
}

/* 缩略图条：Swiper 会把每格宽度按容器算成 (宽 - 间距)/4，所以高度不能再写死，
   交给 aspect-ratio 跟着格宽走，四格正好排成一条正方形。 */
body.cyb-ui .product-gallery-thumbs {
    width: 100%;
    height: auto;
    margin-top: 10px;
}

body.cyb-ui .product-gallery-thumbs .swiper-slide {
    width: 25%;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid var(--cyb-line);
    border-radius: var(--cyb-r-sm);
    background-color: var(--cyb-surface);
    background-size: cover;
    background-position: center;
    opacity: .62;
    transition: opacity .2s var(--cyb-ease), border-color .2s var(--cyb-ease);
}

body.cyb-ui .product-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--cyb-brand);
}

/* 详情页标题在三种模板里本是两种字号（文章/单页 25px、商品 22px、下载 22px），
   统一到 25px：与文章详情、单页、以及列表页页头同一档，
   详情页的 h1 不再比它上面的页头还小。 */
/* ---- 商品标题 ---- */
body.cyb-ui .product-title {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cyb-ink);
    word-break: break-all;
}

body.cyb-ui .product-summary {
    margin: 0 0 12px;
    color: var(--cyb-muted);
    font-size: 13.5px;
    line-height: 1.7;
}

body.cyb-ui .product-meta-line {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--cyb-line);
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

body.cyb-ui .product-meta-line > span {
    margin-right: 16px;
}

body.cyb-ui .product-meta-line i {
    margin-right: 4px;
    opacity: .8;
}

/* ---- 购买区 ---- */
body.cyb-ui .product-buy {
    color: var(--cyb-text-2);
}

/* 价格块是详情页的视觉重心：暖底 + 细描边，不用重投影 */
body.cyb-ui .product-buy .buy-price {
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--cyb-brand-line);
    border-radius: var(--cyb-r-lg);
    background: linear-gradient(180deg, var(--cyb-brand-bg), #fff 78%);
}

body.cyb-ui .product-buy .price-now {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.5px;
}

body.cyb-ui .product-buy .price-from {
    margin-left: 2px;
    color: var(--cyb-muted-2);
    font-size: 14px;
}

body.cyb-ui .product-buy .price-old {
    margin-left: 10px;
    color: var(--cyb-muted-2);
    font-size: 14px;
    text-decoration: line-through;
}

body.cyb-ui .product-buy .buy-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px;
}

body.cyb-ui .product-buy .buy-label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    width: 60px;
    color: var(--cyb-muted-2);
    line-height: 32px;
}

body.cyb-ui .product-buy .buy-value {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    line-height: 32px;
    font-size: 13.5px;
}

body.cyb-ui .product-buy .delivery-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 8px;
    border: 1px solid var(--cyb-brand-line);
    border-radius: var(--cyb-r-xs);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    font-size: 12px;
    line-height: 20px;
}

body.cyb-ui .product-buy .spec-group {
    margin-bottom: 8px;
    line-height: 32px;
}

body.cyb-ui .product-buy .spec-group .spec-name {
    margin-right: 6px;
    color: var(--cyb-muted-2);
}

body.cyb-ui .product-buy .spec-group .spec-values a {
    display: inline-block;
    padding: 4px 14px;
    margin: 0 8px 8px 0;
    border: 1px solid var(--cyb-line-2);
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-surface);
    color: var(--cyb-text-2);
    line-height: 1.5;
    text-decoration: none;
    transition: border-color .18s var(--cyb-ease), background-color .18s var(--cyb-ease),
        color .18s var(--cyb-ease);
}

body.cyb-ui .product-buy .spec-group .spec-values a:hover {
    border-color: var(--cyb-brand);
    color: var(--cyb-brand);
}

body.cyb-ui .product-buy .spec-group .spec-values a.active {
    border-color: var(--cyb-brand);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    font-weight: 600;
}

body.cyb-ui .product-buy .spec-group .spec-values a.disabled {
    border-color: var(--cyb-line);
    background: var(--cyb-bg-mute);
    color: var(--cyb-muted-2);
    cursor: not-allowed;
}

body.cyb-ui .product-buy .js-spec-tip {
    margin-bottom: 8px;
    color: var(--cyb-brand);
    font-size: 12.5px;
}

body.cyb-ui .product-buy .num-box {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

body.cyb-ui .product-buy .num-box .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 30px;
}

body.cyb-ui .product-buy .num-box input {
    width: 60px;
    height: 32px;
    margin: 0 6px;
    text-align: center;
}

body.cyb-ui .product-buy .stock-tip {
    margin-left: 10px;
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

body.cyb-ui .product-buy .buy-btns {
    margin: 20px 0 12px;
}

body.cyb-ui .product-buy .buy-btns .btn {
    min-width: 130px;
    margin: 0 10px 10px 0;
}

body.cyb-ui .product-buy .buy-notice {
    margin: 12px 0 0;
}

/* ---- 详情 / 参数 标签页 ---- */
body.cyb-ui .product-detail-panel > .panel-heading {
    padding: 0 18px;
    background: var(--cyb-surface);
}

body.cyb-ui .product-tabs {
    border-bottom: 0;
}

body.cyb-ui .product-tabs > li > a {
    padding: 15px 16px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--cyb-text-2);
    font-size: 15px;
    transition: color .18s var(--cyb-ease), border-color .18s var(--cyb-ease);
}

body.cyb-ui .product-tabs > li:first-child > a {
    padding-left: 0;
}

body.cyb-ui .product-tabs > li > a:hover {
    background: transparent;
    color: var(--cyb-brand);
}

body.cyb-ui .product-tabs > li.active > a,
body.cyb-ui .product-tabs > li.active > a:hover,
body.cyb-ui .product-tabs > li.active > a:focus {
    border-bottom-color: var(--cyb-brand);
    background: transparent;
    color: var(--cyb-brand);
    font-weight: 600;
}

body.cyb-ui .product-content {
    color: var(--cyb-text-2);
    line-height: 1.85;
    word-break: break-all;
}

body.cyb-ui .product-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cyb-r);
}

body.cyb-ui .product-param-table th {
    width: 150px;
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-weight: 400;
}

body.cyb-ui .product-param-table td {
    color: var(--cyb-text);
    word-break: break-all;
}

body.cyb-ui .product-block-title {
    margin: 24px 0 14px;
    padding-left: 12px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: var(--cyb-ink);
}

body.cyb-ui .product-block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 15px;
    margin-top: -7px;
    border-radius: 2px;
    background: var(--cyb-fire);
}

@media (max-width: 991px) {
    /* 主图区已由 aspect-ratio 定高，各断点不再写死像素高度 */
    body.cyb-ui .product-gallery-top {
        max-width: 520px;
    }
}

@media (max-width: 767px) {
    body.cyb-ui .product-gallery-thumbs {
        margin-top: 8px;
    }

    body.cyb-ui .product-title {
        margin-top: 16px;
        font-size: 19px;
    }

    body.cyb-ui .product-param-table th {
        width: 100px;
    }

    body.cyb-ui .product-buy .buy-label {
        -ms-flex: 0 0 48px;
        flex: 0 0 48px;
        width: 48px;
    }

    body.cyb-ui .product-buy .price-now {
        font-size: 25px;
    }

    /* 规格行比其它行高（里面是一排规格胶囊），label 与 value 需要按整行居中，
       否则「规格」二字会贴在这一行的顶端 */
    body.cyb-ui .product-buy .buy-row {
        align-items: center;
    }

    /* 三个全宽按钮纵排会占掉 148px 且在 39px 高时低于手指的舒适点按区。
       改成「加入购物车 + 立即购买」并排（主按钮在右，符合阅读与操作习惯），
       「我的购物车」降级成文字入口，不再单占一行 */
    body.cyb-ui .product-buy .buy-btns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 18px 0 8px;
    }

    body.cyb-ui .product-buy .buy-btns .btn {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 12px;
        margin: 0;
        border-radius: var(--cyb-r-lg);
        font-size: 15px;
        line-height: 44px;
    }

    body.cyb-ui .product-buy .buy-btns .btn > i {
        margin-right: 5px;
    }

    body.cyb-ui .product-buy .buy-btns .btn-default {
        grid-column: 1 / -1;
        height: auto;
        padding: 8px 0 0;
        border: 0;
        background: transparent;
        color: var(--cyb-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    body.cyb-ui .product-buy .buy-btns .btn-default:hover,
    body.cyb-ui .product-buy .buy-btns .btn-default:focus {
        background: transparent;
        color: var(--cyb-brand);
    }

    /* 数量加减：32px 太小，手指容易点错 */
    body.cyb-ui .product-buy .num-box .btn {
        width: 40px;
        height: 40px;
        line-height: 38px;
        font-size: 16px;
    }

    body.cyb-ui .product-buy .num-box input {
        width: 62px;
        height: 40px;
        font-size: 15px;
    }
}

/* ==========================================================================
   3. 内容详情（文章 / 新闻 / 下载）
   ========================================================================== */
/* ---- 下载列表页：每条是一张小卡，两列排开 ---- */
body.cyb-ui .article-list .article-item.no-border {
    height: 100%;
    padding: 14px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    transition: border-color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease),
        transform .24s var(--cyb-ease-out);
}

body.cyb-ui .article-list .article-item.no-border:hover {
    border-color: var(--cyb-line-2);
    box-shadow: var(--cyb-shadow);
    transform: translateY(-2px);
}

body.cyb-ui .article-list .article-item.no-border .media-left {
    padding-right: 16px;
}

body.cyb-ui .article-list .article-item.no-border .media .media-left a {
    width: 104px;
}

body.cyb-ui .article-list .article-item.no-border .article-title {
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

body.cyb-ui .article-list .article-item.no-border .article-intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 40px;
    margin-top: 6px;
}

body.cyb-ui .article-list .article-item.no-border .article-tag {
    margin-top: 8px;
}

/* 下载列表是两列卡片：行间距交给网格，Bootstrap3 的 float 列在这里会错落 */
body.cyb-ui .article-list.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0;
}

@media (min-width: 768px) {
    body.cyb-ui .article-list.row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.cyb-ui .article-list.row > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
}

body.cyb-ui .article-list.row::before,
body.cyb-ui .article-list.row::after {
    display: none;
    content: none;
}

/* ---- 下载详情页 ---- */
body.cyb-ui .entry-box {
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .entry-box .media-left {
    padding-right: 20px;
}

body.cyb-ui .entry-box .embed-responsive-square {
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-bg-mute);
    box-shadow: var(--cyb-shadow-xs);
}

body.cyb-ui .entry-box .media-heading {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cyb-ink);
    word-break: break-all;
}

body.cyb-ui .entry-box .media-content {
    margin-top: 6px;
    color: var(--cyb-muted);
    font-size: 13.5px;
    line-height: 1.75;
    word-break: break-all;
}

body.cyb-ui .entry-box .media-extend {
    margin-top: 16px;
}

body.cyb-ui .entry-box .media-extend .btn {
    height: 40px;
    padding: 0 22px;
    font-size: 14.5px;
}

/* 预览截图：横滑卡片，悬停浮起一点 */
body.cyb-ui .screenshots-box {
    margin-top: 26px;
    position: relative;
}

body.cyb-ui .screenshots-box h2,
body.cyb-ui .intro-box h2,
body.cyb-ui .base-info h2 {
    position: relative;
    margin: 0 0 16px;
    padding-left: 13px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--cyb-ink);
}

body.cyb-ui .screenshots-box h2::before,
body.cyb-ui .intro-box h2::before,
body.cyb-ui .base-info h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 15px;
    margin-top: -7px;
    border-radius: 2px;
    background: var(--cyb-fire);
}

body.cyb-ui .screenshots-box .swiper-slide {
    height: 400px;
    margin-right: 16px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    box-shadow: var(--cyb-shadow-xs);
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .24s var(--cyb-ease);
}

body.cyb-ui .screenshots-box .swiper-slide:hover {
    box-shadow: var(--cyb-shadow);
}

body.cyb-ui .screenshots-box .swiper-slide img {
    height: 100%;
    border-radius: 0;
}

body.cyb-ui .screenshots-box .swiper-button-prev,
body.cyb-ui .screenshots-box .swiper-button-next {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    background-size: 11px 11px;
    box-shadow: var(--cyb-shadow-sm);
    opacity: .9;
}

body.cyb-ui .screenshots-box .swiper-button-prev:hover,
body.cyb-ui .screenshots-box .swiper-button-next:hover {
    opacity: 1;
}

body.cyb-ui .intro-box {
    margin-top: 26px;
    line-height: 1.95;
}

body.cyb-ui .intro-box img {
    max-width: 100%;
    border-radius: var(--cyb-r);
}

/* 版本 / 语言 / 大小等基础信息：每行一条虚线，右侧数值对齐 */
body.cyb-ui .base-info .row {
    margin-bottom: 0;
    padding: 11px 0;
    border-bottom: 1px dashed var(--cyb-line);
    font-size: 13.5px;
}

body.cyb-ui .base-info .row > [class*="col-"]:first-child {
    color: var(--cyb-muted-2);
}

body.cyb-ui .base-info .row .col-xs-8 {
    color: var(--cyb-text);
    text-align: right;
    word-break: break-all;
}

body.cyb-ui .download-num {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .download-num .num {
    height: auto;
    padding: 6px 0 2px;
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

body.cyb-ui .download-num .text {
    color: var(--cyb-muted-2);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* 下载按钮：够大好点，多个来源并排时也整齐 */
body.cyb-ui #download .btn-download {
    display: inline-block;
    min-width: 150px;
    height: 42px;
    margin: 0 10px 10px 0;
    padding: 0 22px;
    border-radius: var(--cyb-r-lg);
    font-size: 14px;
    line-height: 40px;
}

body.cyb-ui #download .alert {
    margin-bottom: 14px;
}

body.cyb-ui #download .alert .btn {
    margin-top: 4px;
}

/* 下载列表（下载中心与「相关下载」共用）：保留原有图标横排，
   只把底色、圆角与悬停反馈统一到主题上，不动尺寸免得挤掉标题 */
body.cyb-ui .download-list li {
    border-radius: var(--cyb-r-lg);
    transition: background-color .2s var(--cyb-ease);
}

body.cyb-ui .download-list li:hover {
    background: var(--cyb-surface-2);
}

body.cyb-ui .download-list li > a.link {
    border-radius: var(--cyb-r);
}

body.cyb-ui .download-list li > a.link img,
body.cyb-ui .download-list img {
    border-radius: var(--cyb-r);
    background: var(--cyb-bg-mute);
}

body.cyb-ui .download-list li a {
    color: var(--cyb-text-2);
}

body.cyb-ui .download-list li a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .download-list em {
    color: var(--cyb-muted-2);
}

body.cyb-ui .download-list a.btn {
    border-radius: var(--cyb-r-sm);
}

/* ---- PC 下载列表：条目标题被切掉 ----
   基础样式把封面下的标题 span 固定成 height:20px，但字号/行高沿用正文的 15px/25.5px，
   单行文字比容器高 5px，被 overflow:hidden 从下缘切掉；标题在 95px 的窄格里横向溢出时
   也没有省略号，读起来像渲染坏了。
   这里只把字号/行高收进 20px 的容器（15/25.5 → 13/20），并补上省略号：
   条目高度仍是 170px，图片与留白不动，手机端另有排版不受影响。 */
@media (min-width: 768px) {
    body.cyb-ui .download-list:not(.download-related) > li > a.link > span,
    body.cyb-ui .download-list:not(.download-related) > li > a.link > img + span {
        font-size: 13px;
        line-height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--cyb-text-2);
    }
}

/* ---- 手机端的下载列表（下载频道的栏目区块） ----
   原样式是 95px 一格的图标横排（一屏四列、把 4:3 的封面压成 90×90 方块），
   小屏上既挤又不好点。这里改成三列卡片：按 4:3 裁切封面 + 两行标题，整卡可点。
   列数不取 2：每行两张会让 20 条的栏目拉得极长。
   注意排除 .download-related（详情页「相关下载」已是方形图 + 独立网格，另有排版）。 */
@media (max-width: 767px) {
    body.cyb-ui .download-list:not(.download-related) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
    }

    body.cyb-ui .download-list:not(.download-related) > li {
        width: auto;
        height: auto;
        float: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: left;
        border: 1px solid var(--cyb-line);
        border-radius: var(--cyb-r-lg);
        background: var(--cyb-surface);
    }

    body.cyb-ui .download-list:not(.download-related) > li > a.link {
        height: auto;
        padding-bottom: 9px;
        border-radius: 0;
    }

    /* 封面按 4:3 裁切，任意比例的缩略图都不会再被拉扁 */
    body.cyb-ui .download-list:not(.download-related) > li > a.link > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 0;
        border-radius: 0;
        object-fit: cover;
    }

    body.cyb-ui .download-list:not(.download-related) > li > a.link > span,
    body.cyb-ui .download-list:not(.download-related) > li > a.link > img + span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: auto;
        max-height: 38px;
        padding: 8px 8px 0;
        color: var(--cyb-ink);
        font-size: 13px;
        font-weight: 600;
        line-height: 19px;
    }

    /* 区块内每条都同属当前栏目，「未知」之类的栏目名重复且占位，隐藏 */
    body.cyb-ui .download-list:not(.download-related) > li > em {
        display: none;
    }
}

/* 相关下载是「一列一条」的横向卡片，靠网格排齐而不是浮动 */
body.cyb-ui .download-related {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

@media (min-width: 992px) {
    body.cyb-ui .download-related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.cyb-ui .download-related > li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    text-align: left;
    transition: border-color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease),
        transform .24s var(--cyb-ease-out);
}

body.cyb-ui .download-related > li:hover {
    border-color: var(--cyb-line-2);
    box-shadow: var(--cyb-shadow);
    transform: translateY(-2px);
}

body.cyb-ui .download-related > li > a.link {
    height: auto;
}

body.cyb-ui .download-related > li > a.link img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: var(--cyb-r-sm);
}

/* 相关下载里每条都直接给下载按钮，不用悬停才出现 */
body.cyb-ui .download-related > li > a.btn {
    display: block;
    margin-top: 8px;
}

/* 基础样式在悬停时会隐藏分类名（为了腾位给按钮），卡片布局里两者要同时可见 */
body.cyb-ui .download-related > li:hover em {
    display: block;
}

body.cyb-ui .download-related > li > a.btn:hover {
    width: auto;
    margin: 8px 0 0;
}

body.cyb-ui .download-related > li a p {
    height: 40px;
    line-height: 20px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

body.cyb-ui .article-content > .panel-heading {
    padding: 10px 18px;
    margin: 0;
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .article-content > .panel-heading > .breadcrumb {
    background: transparent;
}

body.cyb-ui .article-metas {
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .article-metas .metas-title {
    margin: 0 0 12px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cyb-ink);
    letter-spacing: .1px;
    word-break: break-all;
}

body.cyb-ui .article-metas .metas-title a {
    color: var(--cyb-ink);
}

body.cyb-ui .article-metas .metas-title a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .article-metas .metas-body {
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

body.cyb-ui .article-metas .metas-body span {
    margin-right: 16px;
}

body.cyb-ui .article-metas .metas-body span i {
    margin-right: 4px;
    opacity: .8;
}

body.cyb-ui .article-text {
    margin-top: 20px;
    color: var(--cyb-text-2);
    font-size: 15.5px;
    line-height: 1.95;
    word-break: break-all;
}

body.cyb-ui .article-text p {
    margin-bottom: 18px;
}

/* S 正文排版：标题 / 列表 / 分隔线（文章与协议页共用） */
body.cyb-ui .article-text h2,
body.cyb-ui .article-text h3,
body.cyb-ui .article-text h4 {
    margin: 32px 0 14px;
    color: var(--cyb-text);
    font-weight: 600;
    line-height: 1.5;
}

body.cyb-ui .article-text h2 {
    padding-left: 12px;
    border-left: 3px solid var(--cyb-brand);
    font-size: 19.5px;
}

body.cyb-ui .article-text h3 {
    font-size: 17.5px;
}

body.cyb-ui .article-text h4 {
    font-size: 16px;
    color: var(--cyb-text-2);
}

body.cyb-ui .article-text > h2:first-child,
body.cyb-ui .article-text > h3:first-child {
    margin-top: 4px;
}

body.cyb-ui .article-text ul,
body.cyb-ui .article-text ol {
    padding-left: 24px;
    margin-bottom: 18px;
}

body.cyb-ui .article-text li {
    margin-bottom: 8px;
}

body.cyb-ui .article-text li > ul,
body.cyb-ui .article-text li > ol {
    margin: 8px 0 0;
}

body.cyb-ui .article-text hr {
    margin: 26px 0;
    border: 0;
    border-top: 1px solid var(--cyb-line);
}

body.cyb-ui .article-text strong {
    color: var(--cyb-text);
}

/* 正文里的表格与代码块由编辑器产出，原先完全跟随浏览器默认（无边框、11px 等宽字），
   在手机上一屏全是挤在一起的文字，这里补上基本的可读性 */
body.cyb-ui .article-text table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 14px;
}

body.cyb-ui .article-text table th,
body.cyb-ui .article-text table td {
    padding: 9px 12px;
    border: 1px solid var(--cyb-line);
    line-height: 1.6;
    vertical-align: top;
}

body.cyb-ui .article-text table th {
    background: var(--cyb-surface-2);
    color: var(--cyb-text);
    font-weight: 600;
}

body.cyb-ui .article-text pre {
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    background: var(--cyb-surface-2);
    color: var(--cyb-text-2);
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.cyb-ui .article-text pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

body.cyb-ui .article-text code {
    font-size: 13px;
}

@media (max-width: 767px) {
    body.cyb-ui .article-text {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.9;
    }

    body.cyb-ui .article-text p {
        margin-bottom: 15px;
    }

    body.cyb-ui .article-text h2 {
        margin: 26px 0 12px;
        font-size: 18px;
    }

    body.cyb-ui .article-text h3 {
        margin: 24px 0 11px;
        font-size: 16.5px;
    }

    /* 宽表格改为整块横向滑动，而不是把列压扁或撑破页面 */
    body.cyb-ui .article-text table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13.5px;
    }

    body.cyb-ui .article-text table th,
    body.cyb-ui .article-text table td {
        padding: 7px 10px;
        /* 列太窄时文字会被挤成竖条，给个下限，超出部分交给上面的横向滑动 */
        min-width: 92px;
    }

    body.cyb-ui .article-text pre {
        margin: 16px -16px;
        padding: 12px 16px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        font-size: 12.5px;
    }
}

/* S 协议 / 说明类页面：日期行、要点提示、联系方式卡 */
body.cyb-ui .article-text .doc-meta {
    padding: 10px 14px;
    margin-bottom: 22px;
    border-radius: var(--cyb-r);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 13.5px;
    line-height: 1.8;
}

body.cyb-ui .article-text .doc-meta p:last-child {
    margin-bottom: 0;
}

body.cyb-ui .article-text .doc-note {
    padding: 14px 18px;
    margin: 22px 0;
    border-radius: var(--cyb-r);
    background: var(--cyb-brand-bg);
    border-left: 3px solid var(--cyb-brand);
    color: var(--cyb-text-2);
    font-size: 14.5px;
}

body.cyb-ui .article-text .doc-note p:last-child {
    margin-bottom: 0;
}

body.cyb-ui .article-text .contact-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0;
}

body.cyb-ui .article-text .contact-item {
    flex: 1 1 240px;
    padding: 18px 20px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
}

body.cyb-ui .article-text .contact-item .contact-label {
    color: var(--cyb-muted);
    font-size: 13px;
}

body.cyb-ui .article-text .contact-item .contact-value {
    margin-top: 6px;
    color: var(--cyb-brand);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .5px;
    word-break: break-all;
}

body.cyb-ui .article-text .contact-item .contact-tip {
    margin-top: 6px;
    color: var(--cyb-muted);
    font-size: 13px;
}
/* E 协议 / 说明类页面 */

/* E 正文排版 */

/* ==========================================================================
   4. 交易流程（购物车 / 确认订单 / 支付 / 我的购买）
   ========================================================================== */
body.cyb-ui .shop-empty {
    padding: 70px 0;
    color: var(--cyb-muted-2);
    text-align: center;
}

body.cyb-ui .shop-empty i {
    display: block;
    margin-bottom: 16px;
    color: var(--cyb-line-2);
    font-size: 52px;
}

body.cyb-ui .shop-empty p {
    margin-bottom: 18px;
}

/* ---- 购物车 ---- */
body.cyb-ui .shop-cart .cart-head,
body.cyb-ui .shop-cart .cart-item {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .shop-cart .cart-head {
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 13px;
    font-weight: 600;
}

body.cyb-ui .shop-cart .cart-item {
    transition: background-color .18s var(--cyb-ease);
}

body.cyb-ui .shop-cart .cart-item:hover {
    background: var(--cyb-surface-2);
}

body.cyb-ui .shop-cart .col-check {
    width: 40px;
    text-align: center;
}

body.cyb-ui .shop-cart .col-goods {
    flex: 1;
    min-width: 0;
}

body.cyb-ui .shop-cart .col-price,
body.cyb-ui .shop-cart .col-num,
body.cyb-ui .shop-cart .col-sub,
body.cyb-ui .shop-cart .col-op {
    width: 110px;
    text-align: center;
}

body.cyb-ui .shop-cart .goods-box {
    display: flex;
    align-items: center;
}

body.cyb-ui .shop-cart .goods-box img {
    width: 70px;
    height: 70px;
    margin-right: 12px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    object-fit: cover;
}

body.cyb-ui .shop-cart .goods-title {
    color: var(--cyb-ink);
    font-size: 14.5px;
    line-height: 1.5;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .shop-cart .goods-title:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .shop-cart .goods-spec {
    margin-top: 4px;
    color: var(--cyb-muted-2);
    font-size: 12px;
}

body.cyb-ui .shop-cart .goods-invalid {
    margin-top: 4px;
    color: var(--cyb-brand);
    font-size: 12px;
}

body.cyb-ui .shop-cart .num-box {
    display: inline-flex;
    align-items: center;
}

body.cyb-ui .shop-cart .num-box input {
    width: 50px;
    height: 30px;
    text-align: center;
}

body.cyb-ui .shop-cart .num-box button {
    width: 30px;
    height: 30px;
    line-height: 1;
}

body.cyb-ui .shop-cart .price-now {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-weight: 700;
}

body.cyb-ui .shop-cart .price-old {
    margin-left: 4px;
    color: var(--cyb-muted-2);
    font-size: 12px;
    text-decoration: line-through;
}

body.cyb-ui .shop-cart .cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--cyb-surface-2);
    border-top: 1px solid var(--cyb-line);
}

body.cyb-ui .shop-cart .cart-bar .total {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 21px;
    font-weight: 700;
}

body.cyb-ui .shop-cart .disabled-goods {
    opacity: .5;
}

/* ---- 确认订单 / 支付 ---- */
body.cyb-ui .shop-confirm .goods,
body.cyb-ui .shop-pay .goods {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .shop-confirm .goods img,
body.cyb-ui .shop-pay .goods img {
    width: 70px;
    height: 70px;
    margin-right: 12px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    object-fit: cover;
}

body.cyb-ui .shop-confirm .goods .info {
    flex: 1;
}

body.cyb-ui .shop-confirm .goods .spec {
    margin-top: 4px;
    color: var(--cyb-muted-2);
    font-size: 12px;
}

body.cyb-ui .shop-confirm .goods .price {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-weight: 700;
}

body.cyb-ui .shop-confirm .total-row,
body.cyb-ui .shop-pay .total-row {
    padding: 18px 0;
    text-align: right;
    font-size: 15px;
}

body.cyb-ui .shop-confirm .total-row .amount,
body.cyb-ui .shop-pay .total-row .amount {
    color: var(--cyb-brand);
    font-family: var(--cyb-font-num);
    font-size: 25px;
    font-weight: 700;
}

body.cyb-ui .shop-confirm .submit-row {
    padding: 18px 0 4px;
    border-top: 1px solid var(--cyb-line);
    text-align: right;
}

body.cyb-ui .shop-confirm .paytype-list label,
body.cyb-ui .shop-pay .paytype-list label {
    margin-right: 22px;
    font-weight: 400;
}

body.cyb-ui .shop-confirm .delivery-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--cyb-brand-line);
    border-radius: var(--cyb-r-xs);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    font-size: 12px;
    line-height: 20px;
}

/* ---- 我的购买 ---- */
body.cyb-ui .shop-purchased .item {
    margin-bottom: 16px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    overflow: hidden;
    transition: border-color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease);
}

body.cyb-ui .shop-purchased .item:hover {
    border-color: var(--cyb-line-2);
    box-shadow: var(--cyb-shadow-xs);
}

body.cyb-ui .shop-purchased .item-head {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--cyb-surface-2);
}

body.cyb-ui .shop-purchased .item-head img {
    width: 62px;
    height: 62px;
    margin-right: 12px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    object-fit: cover;
}

body.cyb-ui .shop-purchased .item-body {
    padding: 14px 16px;
    border-top: 1px dashed var(--cyb-line);
}

body.cyb-ui .shop-purchased .deliver-row {
    display: flex;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .shop-purchased .deliver-row:last-child {
    border-bottom: none;
}

body.cyb-ui .shop-purchased .deliver-name {
    flex: none;
    width: 90px;
    color: var(--cyb-muted);
}

body.cyb-ui .shop-purchased .deliver-value {
    flex: 1;
    word-break: break-all;
}

body.cyb-ui .shop-purchased .deliver-code {
    padding: 3px 8px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-xs);
    background: var(--cyb-bg-soft);
    color: var(--cyb-text);
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
}

body.cyb-ui .shop-purchased .pending-tip {
    color: #b57612;
}

body.cyb-ui .shop-purchased .status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--cyb-r-xs);
    font-size: 12px;
    line-height: 1.7;
}

body.cyb-ui .shop-purchased .status-delivered {
    background: #eef7ef;
    color: #2e7d32;
}

body.cyb-ui .shop-purchased .status-pending {
    background: #fff6e6;
    color: #b57612;
}

body.cyb-ui .shop-purchased .status-failed {
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

body.cyb-ui .shop-purchased .deliver-snapshot {
    padding: 6px 16px 14px;
}

body.cyb-ui .shop-purchased .snapshot-tip {
    padding: 9px 12px;
    margin-bottom: 10px;
    border-left: 3px solid #f0ad4e;
    border-radius: 0 var(--cyb-r-sm) var(--cyb-r-sm) 0;
    background: #fffaf0;
    color: #8a6212;
    font-size: 12.5px;
}

@media (max-width: 767px) {
    /* 手机端把购物车表格折成两行，价格与数量不再挤在同一行 */
    body.cyb-ui .shop-cart .cart-head {
        display: none;
    }

    body.cyb-ui .shop-cart .cart-item {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    body.cyb-ui .shop-cart .col-goods {
        flex: 1 1 100%;
        order: 1;
        padding-left: 8px;
    }

    body.cyb-ui .shop-cart .col-check {
        order: 0;
        align-self: flex-start;
        padding-top: 26px;
    }

    body.cyb-ui .shop-cart .col-price,
    body.cyb-ui .shop-cart .col-num,
    body.cyb-ui .shop-cart .col-sub,
    body.cyb-ui .shop-cart .col-op {
        order: 2;
        width: auto;
        flex: 1 1 auto;
        margin-top: 10px;
        text-align: left;
    }

    body.cyb-ui .shop-cart .cart-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    body.cyb-ui .shop-confirm .goods,
    body.cyb-ui .shop-pay .goods {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   5. 搜索页
   ========================================================================== */
body.cyb-ui .category-title form .input-group .form-control {
    height: 44px;
    padding: 10px 18px;
    border-color: var(--cyb-line-2);
    border-radius: var(--cyb-r-lg) 0 0 var(--cyb-r-lg);
    background: var(--cyb-surface);
    font-size: 14.5px;
}

body.cyb-ui .category-title form .input-group .form-control:focus {
    border-color: var(--cyb-brand);
}

body.cyb-ui .category-title form .input-group-btn .btn {
    height: 44px;
    padding: 0 30px;
    border-radius: 0 var(--cyb-r-lg) var(--cyb-r-lg) 0;
    font-size: 14.5px;
}

/* ==========================================================================
   6. 会员中心 / 登录注册
   ========================================================================== */
body.cyb-ui main content {
    background: transparent;
}

/* ---- 侧栏导航：白卡 + 强调色左边线 ---- */
body.cyb-ui .sidenav {
    padding: 14px 0 10px;
    margin-bottom: 20px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-xl);
    background: var(--cyb-surface);
    box-shadow: var(--cyb-shadow-xs);
    overflow: hidden;
}

body.cyb-ui .sidenav .list-group .list-group-heading {
    margin: 0 0 8px 20px;
    color: var(--cyb-ink);
    font-size: 14.5px;
    font-weight: 600;
}

body.cyb-ui .sidenav .list-group .list-group-item {
    border: 0;
    border-left: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .18s var(--cyb-ease), border-color .18s var(--cyb-ease);
}

body.cyb-ui .sidenav .list-group .list-group-item > a {
    display: block;
    padding: 11px 16px 11px 20px;
    color: var(--cyb-text-2);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .sidenav .list-group .list-group-item > a i {
    width: 18px;
    margin-right: 6px;
    color: var(--cyb-muted-2);
    text-align: center;
}

body.cyb-ui .sidenav .list-group .list-group-item:hover {
    border-left-color: var(--cyb-line-2);
    background-color: var(--cyb-surface-2);
}

body.cyb-ui .sidenav .list-group .list-group-item:hover > a {
    color: var(--cyb-ink);
}

body.cyb-ui .sidenav .list-group .list-group-item.active {
    border-left-color: var(--cyb-brand);
    background-color: var(--cyb-brand-bg);
}

body.cyb-ui .sidenav .list-group .list-group-item.active > a {
    color: var(--cyb-brand);
    font-weight: 600;
}

body.cyb-ui .sidenav .list-group .list-group-item.active > a i {
    color: var(--cyb-brand);
}

/* ---- 会员中心首页 ---- */
body.cyb-ui .user-baseinfo .ui-content h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--cyb-ink);
}

body.cyb-ui .user-baseinfo .ui-content h4 a {
    color: var(--cyb-ink);
}

body.cyb-ui .user-baseinfo .ui-content h4 a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .user-baseinfo .avatar-img img {
    border: 3px solid var(--cyb-surface);
    box-shadow: var(--cyb-shadow-sm);
}

body.cyb-ui .basicinfo {
    padding: 8px 14px;
    margin: 15px 0;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 13.5px;
}

body.cyb-ui .basicinfo .viewmoney,
body.cyb-ui .basicinfo .viewscore {
    color: var(--cyb-brand);
    font-weight: 600;
}

/* ---- 发文 / 我的投稿 / 我的评论 ---- */
body.cyb-ui .userinfo {
    border-radius: var(--cyb-r-lg);
    overflow: hidden;
}

body.cyb-ui .nav-noborder.nav-tabs > li > a {
    padding: 12px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cyb-text-2);
    font-size: 15px;
}

body.cyb-ui .nav-noborder.nav-tabs > li.active > a,
body.cyb-ui .nav-noborder.nav-tabs > li.active > a:hover,
body.cyb-ui .nav-noborder.nav-tabs > li.active > a:focus {
    border-bottom-color: var(--cyb-brand);
    background: transparent;
    color: var(--cyb-brand);
    font-weight: 600;
}

/* ---- 登录 / 注册 ---- */
body.cyb-ui .login-section {
    width: 420px;
    margin: 40px auto;
    padding: 0;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-xl);
    background: var(--cyb-surface);
    box-shadow: var(--cyb-shadow);
    overflow: hidden;
}

body.cyb-ui .login-section .logon-tab {
    margin: 0;
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .login-section .logon-tab > a {
    padding: 16px;
    background-color: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s var(--cyb-ease), color .2s var(--cyb-ease);
}

body.cyb-ui .login-section .logon-tab > a:hover {
    background-color: var(--cyb-bg-soft);
    color: var(--cyb-text-2);
}

body.cyb-ui .login-section .logon-tab > a.active {
    background-color: var(--cyb-surface);
    color: var(--cyb-brand);
    box-shadow: inset 0 -2px 0 var(--cyb-brand);
}

body.cyb-ui .login-section .login-main {
    padding: 32px 36px 26px;
}

body.cyb-ui .login-section .form-control {
    height: 42px;
    font-size: 14px;
}

body.cyb-ui .login-section .btn-lg,
body.cyb-ui .login-section .btn-block {
    height: 44px;
    padding: 0;
    line-height: 42px;
    font-size: 15px;
}

body.cyb-ui .login-section .btn-default.no-border {
    border: 1px solid var(--cyb-line-2);
    background: var(--cyb-surface);
}

/* 注册页：协议勾选行 */
body.cyb-ui .login-section .agree-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--cyb-muted);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.7;
    cursor: pointer;
}

body.cyb-ui .login-section .agree-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 4px 0 0;
    accent-color: var(--cyb-brand);
    cursor: pointer;
}

body.cyb-ui .login-section .agree-label a {
    color: var(--cyb-brand);
    border-bottom: 1px solid var(--cyb-brand-line);
}

body.cyb-ui .login-section .agree-label a:hover {
    border-bottom-color: var(--cyb-brand);
}

body.cyb-ui .login-section .agree-label input[type="checkbox"].error + span {
    color: #d9534f;
}

@media (max-width: 767px) {
    body.cyb-ui .login-section {
        width: auto;
        margin: 16px 12px;
    }

    body.cyb-ui .login-section .login-main {
        padding: 22px 20px 16px;
    }
}

/* ---- 充值 / VIP ---- */
body.cyb-ui .panel-recharge {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.cyb-ui .panel-recharge > .panel-body {
    padding: 0;
}

body.cyb-ui .row-money .btn,
body.cyb-ui .row-pricelist .price-item,
body.cyb-ui .row-paytype .btn {
    border: 1px solid var(--cyb-line-2);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    color: var(--cyb-text-2);
    transition: border-color .18s var(--cyb-ease), background-color .18s var(--cyb-ease),
        color .18s var(--cyb-ease), box-shadow .18s var(--cyb-ease);
}

body.cyb-ui .row-money .btn:hover,
body.cyb-ui .row-pricelist .price-item:hover,
body.cyb-ui .row-paytype .btn:hover {
    border-color: var(--cyb-brand);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

body.cyb-ui .alert-info-light,
body.cyb-ui .alert-warning-light {
    border: 1px solid var(--cyb-brand-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand-deep);
}

body.cyb-ui .tabbable-line > .nav-tabs {
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .tabbable-line > .nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cyb-text-2);
}

body.cyb-ui .tabbable-line > .nav-tabs > li.active > a,
body.cyb-ui .tabbable-line > .nav-tabs > li.active > a:hover,
body.cyb-ui .tabbable-line > .nav-tabs > li > a:hover {
    border-bottom-color: var(--cyb-brand);
    background: transparent;
    color: var(--cyb-brand);
}

/* ---- 上传附件 ---- */
body.cyb-ui .panel-intro {
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
}

/* ==========================================================================
   7. 单页 / 自定义表单 / 专题等兜底
   ========================================================================== */
/* ---- 新闻页的栏目区块 ----
   区块之间只靠留白与标题层级分开，不给每块再套一层边框：
   外层已经是一张白卡，里面再套白卡就成了两圈框，一屏下来线条比内容还抢眼 */
body.cyb-ui .news-blocks > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px 40px;
    margin: 0;
}

@media (min-width: 768px) {
    body.cyb-ui .news-blocks > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.cyb-ui .news-blocks > .row > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
}

body.cyb-ui .news-blocks > .row::before,
body.cyb-ui .news-blocks > .row::after {
    display: none;
    content: none;
}

body.cyb-ui .news-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---- 区块标题：强调色竖条 + 栏目名 + 篇数 ---- */
/* 标题下留一条极淡的线，是整块里唯一的线：它标出「这一组从这里开始」 */
body.cyb-ui .news-block-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--cyb-line);
}

body.cyb-ui .news-block-head h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cyb-ink);
}

body.cyb-ui .news-block-head h3 a {
    color: var(--cyb-ink);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .news-block-head h3 a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .news-block-head h3 a::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    margin-right: 10px;
    border-radius: 2px;
    background: var(--cyb-fire);
    vertical-align: -2px;
}

/* 篇数：告诉访客这个栏目有多少内容，用淡色小字跟在名字后面就够，不必加框 */
body.cyb-ui .news-block-count {
    color: var(--cyb-muted-2);
    font-family: var(--cyb-font-num);
    font-size: 12px;
}

/* 底部入口：纯文字链接，margin-top:auto 让它贴着这一块的底部。
   原来做成带框按钮，一个区块里就多出一个方框，四个区块就是四个 */
body.cyb-ui .news-block-all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 12px;
    color: var(--cyb-muted);
    font-size: 12.5px;
    text-decoration: none;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .news-block-all i {
    margin-left: 4px;
    font-size: 13px;
    transition: transform .2s var(--cyb-ease-out);
}

body.cyb-ui .news-block-all:hover,
body.cyb-ui .news-block-all:focus {
    color: var(--cyb-brand);
    text-decoration: none;
}

body.cyb-ui .news-block-all:hover i {
    transform: translateX(2px);
}

/* ---- 头条：图左文右，是整个区块的视觉锚点 ---- */
/* 不加分割线：图片本身就是与下面文字列表的分界 */
body.cyb-ui .news-block-lead {
    display: flex;
    gap: 14px;
    padding: 14px 0 4px;
    text-decoration: none;
}

body.cyb-ui .news-block-lead:hover {
    text-decoration: none;
}

body.cyb-ui .news-block-thumb {
    flex: 0 0 168px;
    width: 168px;
    height: 112px;
    border-radius: var(--cyb-r);
    background: var(--cyb-bg-mute);
    overflow: hidden;
}

body.cyb-ui .news-block-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .news-block-lead:hover .news-block-thumb img {
    transform: scale(1.06);
}

body.cyb-ui .news-block-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

body.cyb-ui .news-block-info h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 46px;
    margin: 0;
    color: var(--cyb-ink);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 23px;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .news-block-lead:hover .news-block-info h4 {
    color: var(--cyb-brand);
}

body.cyb-ui .news-block-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 40px;
    margin: 6px 0 0;
    color: var(--cyb-muted);
    font-size: 13px;
    line-height: 20px;
}

body.cyb-ui .news-block-date {
    margin-top: auto;
    padding-top: 6px;
    color: var(--cyb-muted-2);
    font-size: 12px;
}

/* ---- 其余条目：序号 + 标题 + 日期 ---- */
/* 每条之间不画线：一屏十几条虚线，区块再淡也会显得碎 */
body.cyb-ui .news-block-list {
    flex: 1;
    margin: 4px 0 0;
    counter-reset: newsitem;
}

body.cyb-ui .news-block-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
}

body.cyb-ui .news-block-list li:first-child {
    padding-top: 10px;
}

/* 序号用等宽数字，多行标题时左侧始终对齐 */
body.cyb-ui .news-block-list li::before {
    content: counter(newsitem, decimal-leading-zero);
    counter-increment: newsitem;
    flex: 0 0 auto;
    color: var(--cyb-line-2);
    font-family: var(--cyb-font-num);
    font-size: 12px;
    font-weight: 700;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .news-block-list li:hover::before {
    color: var(--cyb-brand);
}

body.cyb-ui .news-block-list li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--cyb-text-2);
    font-size: 13.5px;
    line-height: 1.6;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .news-block-list li a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .news-block-list li span {
    flex: 0 0 auto;
    color: var(--cyb-muted-2);
    font-family: var(--cyb-font-num);
    font-size: 12px;
}

@media (max-width: 991px) {
    body.cyb-ui .news-block-thumb {
        flex: 0 0 140px;
        width: 140px;
        height: 96px;
    }
}

@media (max-width: 767px) {
    /* 手机上头条改为一图压顶：小屏里「图左文右」会把标题挤成窄条，
       大图 + 通栏标题才是手机上真正的「头条」观感 */
    body.cyb-ui .news-block-lead {
        flex-direction: column;
        gap: 12px;
        padding: 14px 0 6px;
    }

    body.cyb-ui .news-block-thumb {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    body.cyb-ui .news-block-info h4 {
        font-size: 16px;
        line-height: 23px;
        max-height: 46px;
    }

    body.cyb-ui .news-block-info p {
        margin-top: 6px;
    }

    body.cyb-ui .news-block-list li {
        gap: 8px;
        padding: 9px 0;
    }

    body.cyb-ui .news-block-list li a {
        font-size: 13.5px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 43px;
    }

    body.cyb-ui .news-block-list li span {
        padding-top: 1px;
    }
}

@media (max-width: 400px) {
    body.cyb-ui .news-block-list li a {
        font-size: 13px;
    }
}

body.cyb-ui .diyform-post .panel-body .form-group label,
body.cyb-ui .diyform-post .control-label {
    color: var(--cyb-text-2);
    font-weight: 400;
}

body.cyb-ui .special-list .special-item {
    border-radius: var(--cyb-r-lg);
    overflow: hidden;
}

/* ---- 专题页 ---- */
body.cyb-ui .special-banner {
    position: relative;
    height: 300px;
    border-radius: var(--cyb-r-xl);
    background-color: var(--cyb-bg-mute);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

body.cyb-ui .special-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 26px 24px;
    background: linear-gradient(to top, rgba(10, 12, 16, .82), rgba(10, 12, 16, .22) 55%, rgba(10, 12, 16, 0));
}

body.cyb-ui .special-title .label {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 12px;
    border-radius: var(--cyb-r-xs);
    font-size: 12px;
    line-height: 1.7;
}

body.cyb-ui .special-title h1 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.45;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}

body.cyb-ui .special-headline {
    margin-top: 20px;
}

body.cyb-ui .special-headline blockquote {
    position: relative;
    margin: 0;
    padding: 16px 22px 16px 44px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-bg-soft);
    font-family: var(--cyb-font);
}

/* 引言开头一枚引号，用伪元素避免正文里出现多余字符 */
body.cyb-ui .special-headline blockquote::before {
    content: "\201C";
    position: absolute;
    left: 15px;
    top: 8px;
    color: var(--cyb-brand-line);
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 1;
}

body.cyb-ui .special-headline blockquote p {
    margin: 0;
    color: var(--cyb-text-2);
    font-size: 14.5px;
    line-height: 1.85;
}

body.cyb-ui .special-body {
    margin-top: 6px;
}

@media (max-width: 767px) {
    body.cyb-ui .special-banner {
        height: 190px;
    }

    body.cyb-ui .special-title {
        padding: 54px 18px 18px;
    }

    body.cyb-ui .special-title h1 {
        font-size: 19px;
    }

    body.cyb-ui .special-headline blockquote {
        padding: 14px 16px 14px 38px;
    }
}

body.cyb-ui .tag-list .tag {
    margin: 0 8px 10px 0;
}

/* ==========================================================================
   8. 栏目页首屏：焦点图右侧的图片墙
   ========================================================================== */
body.cyb-ui .focus-img > .row {
    margin: 0 -6px;
}

body.cyb-ui .focus-img > .row > div {
    margin-bottom: 12px;
    padding: 0 6px;
}

body.cyb-ui .focus-img > .row > div a > span {
    border-radius: var(--cyb-r-lg);
    box-shadow: var(--cyb-shadow-xs);
    transition: box-shadow .24s var(--cyb-ease), transform .24s var(--cyb-ease-out);
}

body.cyb-ui .focus-img > .row > div:hover a > span {
    box-shadow: var(--cyb-shadow);
    transform: translateY(-2px);
}

body.cyb-ui .focus-img > .row > div a > span img {
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .focus-img > .row > div:hover a > span img {
    transform: scale(1.06);
}

/* 标题从半透明黑块换成底部压暗渐变：浅图上白字也读得清 */
body.cyb-ui .focus-img .intro {
    height: 34px;
    padding: 0 12px;
    border-radius: 0;
    background: linear-gradient(to top, rgba(10, 12, 16, .82), rgba(10, 12, 16, .12));
    color: #fff;
    font-size: 12.5px;
    line-height: 34px;
    text-align: left;
    opacity: 1;
}

@media (min-width: 768px) {
    /* 图片墙两行的高度拼起来正好等于焦点图高度，右侧不会空出一截 */
    body.cyb-ui .focus-img > .row > div {
        margin-bottom: 0;
    }

    body.cyb-ui .focus-img > .row > div:nth-child(-n+2) {
        margin-bottom: 16px;
    }

    body.cyb-ui .focus-img .embed-responsive-4by3 {
        height: calc((var(--cyb-hero-h) - 16px) / 2);
        padding-bottom: 0;
    }
}

/* 分页条与「暂无数据」在窄屏下不再顶到卡片边缘 */
@media (max-width: 767px) {
    body.cyb-ui .pager {
        margin: 14px 0 4px;
    }

    body.cyb-ui .focus-img {
        margin-top: 14px;
    }

    body.cyb-ui .focus-img > .row > div {
        margin-bottom: 10px;
    }
}