@charset "utf-8";
/* ==========================================================================
   创业宝盒 · 全站组件层
   作用域：body.cyb-ui —— CMS 前台所有页面 + 会员中心等模块共用
   职责：把首页确立的「暖白画布 + 白卡片 + 单一强调色」语言，落到所有页面都会用到的
        通用组件上（导航、卡片面板、列表、分页、侧栏、页脚…）
        首页专属规则（焦点图、商品区栅格、与焦点图等高的侧栏）在 pc-home.css
        页面专属规则（商品列表/详情、交易流程、会员中心）在 cyb-pages.css
   加载顺序：common.css / frontend.css → cyb-theme.css → cyb-ui.css →
            cyb-pages.css → pc-home.css
   ========================================================================== */

/* ---------- 1. 基底 ---------- */
body.cyb-ui {
    font-size: 15px;
    line-height: 1.7;
    /* 焦点图高度统一由这个变量管理：首页右侧「最新更新」要按它精确等高，
       栏目页的首屏大图也取同一档高度，两处观感才会一致 */
    --cyb-hero-h: 320px;
}

/* 焦点图控制在 2.3:1 左右，一屏内能同时看到下方板块 */
@media (min-width: 1600px) {
    body.cyb-ui {
        --cyb-hero-h: 350px;
    }
}

@media (max-width: 1199px) {
    body.cyb-ui {
        --cyb-hero-h: 300px;
    }
}

@media (max-width: 991px) {
    body.cyb-ui {
        --cyb-hero-h: 270px;
    }
}

@media (max-width: 767px) {
    body.cyb-ui {
        --cyb-hero-h: 210px;
    }
}

/* 会员中心的顶栏比 CMS 矮，这里统一成同一档高度，页面之间的呼吸感才对得上 */
@media (min-width: 768px) {
    body.cyb-ui {
        padding-top: 100px;
    }
}

/* ---------- 2. 顶部导航 ---------- */
/* 2.1 导航条基底：72px 悬浮白条 + 毛玻璃，只有一条 1px 细线收边 */
body.cyb-ui .navbar-white {
    background-color: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--cyb-line);
    box-shadow: none;
}

body.cyb-ui .navbar-white > .container {
    position: relative;
}

/* Logo 只限高不限宽，任意比例的图都不会被拉变形 */
body.cyb-ui .navbar-white .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0 34px 0 0;
}

body.cyb-ui .navbar-white .navbar-brand img {
    display: block;
    max-height: 38px;
    width: auto !important;
}

body.cyb-ui .navbar-white .navbar-brand:hover img {
    opacity: .82;
}

body.cyb-ui .navbar-white .navbar-collapse .navbar-right {
    background-color: transparent;
}

/* 2.2 桌面端导航项 */
@media (min-width: 768px) {
    body.cyb-ui .navbar-white {
        min-height: 72px;
    }

    body.cyb-ui .navbar-white .navbar-brand {
        height: 72px;
    }

    /* 顶栏左右与内容列对齐：
       Bootstrap 用 .navbar-brand 的 -15px 左外边距抵消它自带的 15px 左内边距，
       主题把左内边距清成 0 之后，-15px 就没人抵消了，logo 比内容列（下面所有卡片）
       左移 15px；右侧 .navbar-right 的 -15px 右外边距同理，让最后一个导航项外溢 15px。
       两处一起归零，顶栏与内容列同宽，logo、导航、搜索框都和对齐线落在一起。 */
    body.cyb-ui .navbar-white .navbar-brand {
        margin-left: 0;
    }

    body.cyb-ui .navbar-white .navbar-collapse > .navbar-right {
        margin-right: 0;
    }

    /* 基础样式是 space-around，会把栏目推到右侧搜索区下方，这里改为左对齐 */
    body.cyb-ui .navbar-white .navbar-nav {
        justify-content: flex-start;
        align-items: stretch;
    }

    body.cyb-ui .navbar-white .navbar-collapse .navbar-right > li {
        display: flex;
        align-items: center;
        height: 72px;
    }

    body.cyb-ui .navbar-white .navbar-nav > li > a {
        position: relative;
        display: block;
        height: 72px;
        line-height: 72px;
        padding: 0 18px;
        color: var(--cyb-text-2);
        font-size: 15px;
        letter-spacing: .3px;
        transition: color .18s var(--cyb-ease);
    }

    body.cyb-ui .navbar-white .navbar-nav > li > a:hover,
    body.cyb-ui .navbar-white .navbar-nav > li > a:focus {
        color: var(--cyb-ink);
        background-color: transparent;
    }

    /* 悬停/选中的下划线：从中间展开的强调色细条 */
    body.cyb-ui .navbar-white .navbar-nav:not(.navbar-right) > li > a::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 21px;
        height: 2px;
        border-radius: 1px;
        background: var(--cyb-brand);
        transform: scaleX(0);
        transform-origin: 50% 50%;
        transition: transform .24s var(--cyb-ease-out);
    }

    body.cyb-ui .navbar-white .navbar-nav:not(.navbar-right) > li > a:hover::after,
    body.cyb-ui .navbar-white .navbar-nav:not(.navbar-right) > li.active > a::after,
    body.cyb-ui .navbar-white .navbar-nav:not(.navbar-right) > li.open > a::after {
        transform: scaleX(1);
    }

    body.cyb-ui .navbar-white .navbar-nav > li.active > a,
    body.cyb-ui .navbar-white .navbar-nav > .active > a:hover,
    body.cyb-ui .navbar-white .navbar-nav > .active > a:focus {
        background-color: transparent;
        color: var(--cyb-brand);
        font-weight: 600;
        box-shadow: none;
    }

    body.cyb-ui .navbar-white .navbar-nav > li > a .caret {
        margin-left: 3px;
        opacity: .45;
    }

    body.cyb-ui .navbar-white .navbar-nav > li.active > a .caret {
        opacity: .8;
    }

    body.cyb-ui .navbar-white .navbar-collapse .navbar-right > li:last-child > a {
        padding-right: 0;
    }
}

/* 2.3 搜索：常显胶囊 + 聚焦光晕 */
body.cyb-ui .navbar .navbar-form {
    margin: 0;
    padding: 0;
    border: 0;
}

body.cyb-ui .navbar .form-search input[type=search] {
    width: 200px;
    height: 38px;
    margin-right: 16px;
    padding: 6px 16px 6px 36px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-pill);
    background-color: var(--cyb-bg-soft);
    background-position: 13px center;
    background-size: 16px 16px;
    color: var(--cyb-ink);
    font-size: 14px;
    cursor: text;
    transition: width .28s var(--cyb-ease), border-color .2s var(--cyb-ease),
        background-color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease);
}

body.cyb-ui .navbar .form-search input[type=search]::placeholder {
    color: var(--cyb-muted-2);
}

body.cyb-ui .navbar .form-search input[type=search]:hover {
    border-color: var(--cyb-line-2);
    background-color: var(--cyb-surface);
}

body.cyb-ui .navbar .form-search input[type=search]:focus {
    width: 240px;
    border-color: var(--cyb-brand-line);
    background-color: var(--cyb-surface);
    box-shadow: 0 0 0 3px var(--cyb-brand-bg), var(--cyb-shadow-xs);
}

body.cyb-ui .navbar .navbar-nav > li > a .badge {
    background: var(--cyb-brand);
}

/* 2.4 下拉菜单：紧贴导航底边，避免出现「悬停断档」 */
body.cyb-ui .navbar-white ul.dropdown-menu {
    margin-top: 0;
    padding: 8px;
    min-width: 168px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    box-shadow: var(--cyb-shadow-lg);
}

body.cyb-ui .navbar-white ul.dropdown-menu > li > a {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: var(--cyb-r-xs);
    color: var(--cyb-text-2);
    font-size: 14px;
    transition: color .16s var(--cyb-ease), background-color .16s var(--cyb-ease);
}

body.cyb-ui .navbar-white ul.dropdown-menu > li > a:hover,
body.cyb-ui .navbar-white ul.dropdown-menu > li > a:focus,
body.cyb-ui .navbar-white ul.dropdown-menu > li.active > a {
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

/* ---------- 2.5 焦点图（首页与栏目页共用） ---------- */
body.cyb-ui .carousel-focus {
    margin-bottom: 24px;
}

body.cyb-ui .carousel-focus,
body.cyb-ui .carousel-focus .carousel-inner {
    border-radius: var(--cyb-r-xl);
}

body.cyb-ui .carousel-focus {
    overflow: hidden;
    box-shadow: var(--cyb-shadow);
}

body.cyb-ui .carousel-focus .item .carousel-img {
    height: var(--cyb-hero-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 基础样式里用 #id 写死过 340/358/295 三个高度，优先级高于类选择器，
   这里必须同样带上 id 才能把它们统一到变量上 */
body.cyb-ui #index-focus .item .carousel-img,
body.cyb-ui #channel-focus .item .carousel-img {
    height: var(--cyb-hero-h);
    width: 100%;
}

/* 标题改为左下角压暗渐变，并补一个「查看详情」胶囊提升可点击感知 */
body.cyb-ui .carousel-focus .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 78px 26px 24px;
    text-align: left;
    /* 底部压深一点：浅色图上白字也读得清 */
    background: linear-gradient(to top, rgba(10, 12, 16, .82), rgba(10, 12, 16, .22) 52%, rgba(10, 12, 16, 0));
    text-shadow: none;
}

body.cyb-ui .carousel-focus .carousel-caption h3 {
    margin: 0;
    padding: 0;
    max-width: 70%;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    letter-spacing: .2px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

body.cyb-ui .carousel-focus .carousel-caption::after {
    content: "查看详情 \2192";
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--cyb-r-pill);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.4;
    letter-spacing: .3px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .22s var(--cyb-ease), border-color .22s var(--cyb-ease);
}

body.cyb-ui .carousel-focus .item:hover .carousel-caption::after {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .72);
}

/* 指示器移到右下，与左下 CTA 形成对角平衡 */
body.cyb-ui .carousel-focus .carousel-indicators {
    left: auto;
    right: 28px;
    bottom: 34px;
    width: auto;
    margin-left: 0;
    opacity: 1;
}

body.cyb-ui .carousel-focus .carousel-indicators li {
    width: 20px;
    height: 3px;
    margin: 0 0 0 6px;
    border: 0;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .42);
    transition: width .24s var(--cyb-ease-out), background-color .24s var(--cyb-ease);
}

body.cyb-ui .carousel-focus .carousel-indicators li:hover {
    background-color: rgba(255, 255, 255, .7);
}

body.cyb-ui .carousel-focus .carousel-indicators .active {
    width: 34px;
    height: 3px;
    margin: 0 0 0 6px;
    background-color: #fff;
}

/* 左右切换：悬停才浮出的玻璃圆钮 */
body.cyb-ui .carousel-focus .carousel-control {
    width: 72px;
    opacity: 1;
    filter: none;
}

body.cyb-ui .carousel-focus .carousel-control.left span,
body.cyb-ui .carousel-focus .carousel-control.right span {
    top: 50%;
    display: block;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    line-height: 42px;
    text-align: center;
    font-size: 15px;
    color: var(--cyb-ink);
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
    opacity: 0;
    transition: opacity .24s var(--cyb-ease), transform .24s var(--cyb-ease-out), background-color .2s var(--cyb-ease);
}

body.cyb-ui .carousel-focus .carousel-control.left span {
    left: 22px;
    margin-left: 0;
    transform: translateX(-6px);
}

body.cyb-ui .carousel-focus .carousel-control.right span {
    right: 22px;
    left: auto;
    margin-left: 0;
    transform: translateX(6px);
}

body.cyb-ui .carousel-focus:hover .carousel-control.left span,
body.cyb-ui .carousel-focus:hover .carousel-control.right span {
    opacity: 1;
    transform: translateX(0);
}

body.cyb-ui .carousel-focus .carousel-control span:hover {
    background: #fff;
}

/* ---------- 3. 卡片面板 ---------- */
/* 白卡「浮」在近白画布上：靠极淡投影和细描边分层，不用重阴影 */
body.cyb-ui .panel-default {
    padding: 0;
    margin-bottom: 18px;
    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 .panel-default > .panel-heading {
    padding: 14px 20px;
    background: var(--cyb-surface);
    border-bottom: 1px solid var(--cyb-line);
    border-radius: 0;
    color: var(--cyb-text-2);
}

body.cyb-ui .panel-default > .panel-heading ~ .panel-heading {
    border-top: 1px solid var(--cyb-line);
}

/* 标题前缀一枚强调色竖条，板块识别度更高 */
body.cyb-ui .panel-default > .panel-heading .panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cyb-ink);
    letter-spacing: .1px;
}

/* 板块标题前缀：火焰渐变小竖条，一眼点出「火」的调性 */
body.cyb-ui .panel-default > .panel-heading .panel-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--cyb-fire);
}

body.cyb-ui .panel-default > .panel-heading .panel-title small {
    margin-left: 2px;
    color: var(--cyb-muted-2);
    font-size: 12.5px;
    font-weight: 400;
}

/* 右上「更多」垂直居中，标题内边距变化时不再错位。
   右侧内缩值要与 .panel-heading 的左右内边距（20px）一致：
   原先写死 24px，是更早一版 24px 内边距留下的值，
   于是「更多 / 全部」比板块标题与正文各缩进 4px，右边缘不在一条竖线上。 */
body.cyb-ui .panel-default > .panel-heading .more {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--cyb-muted);
    font-size: 13px;
}

body.cyb-ui .panel-default > .panel-heading div.more {
    top: 50%;
}

body.cyb-ui .panel-default > .panel-heading .more:hover {
    color: var(--cyb-brand);
}

/* 面板内边距：桌面端由 24px 收到 20px。
   原来是 15px 容器 + 24px 面板 = 内容离窗口边缘 39px，正文可读宽度被白边吃掉；
   收到 20px 后仍比容器留白宽一档，层次还在，但正文更透气。 */
body.cyb-ui .panel-default > .panel-body {
    position: relative;
    padding: 14px 18px;
}

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

body.cyb-ui .panel-default > .panel-body.p-0 .article-item {
    padding-left: 18px;
    padding-right: 18px;
}

/* 标题里的栏目筛选词条：与排序项同一套标签语言 */
body.cyb-ui .panel-heading .more ul.list-inline {
    margin: 0;
}

body.cyb-ui .panel-heading .more ul.list-inline > li {
    padding: 0 0 0 6px;
}

body.cyb-ui .panel-heading .more ul.list-inline > li > a {
    display: inline-block;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 12.5px;
    line-height: 20px;
    white-space: nowrap;
    transition: all .18s var(--cyb-ease);
}

body.cyb-ui .panel-heading .more ul.list-inline > li > a:hover {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

/* ---------- 4. 分类标题与面包屑 ---------- */
body.cyb-ui .category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cyb-ink);
}

body.cyb-ui .category-title .pull-right {
    float: none !important;
}

/* 标题前同一枚火焰竖条，与面板标题呼应 */
body.cyb-ui #content-container > .category-title {
    padding-left: 14px;
    position: relative;
}

body.cyb-ui #content-container > .category-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 2px;
    background: var(--cyb-fire);
}

body.cyb-ui .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    color: var(--cyb-muted-2);
}

body.cyb-ui .breadcrumb > li {
    color: var(--cyb-muted-2);
}

body.cyb-ui .breadcrumb > li + li::before {
    color: var(--cyb-muted-2);
    opacity: .7;
    content: "/\00a0";
}

body.cyb-ui .breadcrumb > li > a {
    color: var(--cyb-muted);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .breadcrumb > li > a:hover,
body.cyb-ui .breadcrumb > li > a:focus {
    color: var(--cyb-brand);
    text-decoration: none;
}

body.cyb-ui .article-content > .panel-heading > .breadcrumb {
    padding: 0;
}

/* ---------- 5. 筛选与排序 ---------- */
body.cyb-ui .tabs-wrapper .tabs-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

body.cyb-ui .tabs-wrapper .tabs-group + .tabs-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cyb-line);
}

body.cyb-ui .tabs-wrapper .tabs-group .title {
    flex: 0 0 auto;
    padding: 0;
    color: var(--cyb-muted-2);
    font-size: 13px;
}

body.cyb-ui .tabs-wrapper .tabs-group .content {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.9;
}

body.cyb-ui .tabs-wrapper .tabs-group .content > li {
    padding: 0;
    margin-right: 6px;
}

body.cyb-ui .tabs-wrapper .tabs-group .content > li > a {
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid transparent;
    border-radius: var(--cyb-r-pill);
    color: var(--cyb-text-2);
    font-size: 13px;
    line-height: 1.7;
    transition: all .18s var(--cyb-ease);
}

body.cyb-ui .tabs-wrapper .tabs-group .content > li > a:hover {
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

body.cyb-ui .tabs-wrapper .tabs-group .content > li.active > a,
body.cyb-ui .tabs-multiple .tabs-group .content > li.active > a {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    font-weight: 600;
}

body.cyb-ui .tabs-wrapper .tabs-group .content > li.active > a:hover {
    color: var(--cyb-brand);
}

/* 排序：做成标签而不是药丸。
   药丸（999px）在 29px 高的控件上等于把圆角拉到 14px，比它包着的字还抢眼；
   换成小圆角标签后，「默认 / 浏览次数 / 点赞数」这一排在手机上更紧凑、也更好读。
   选中态保留强调色实心，权重一眼可辨。 */
body.cyb-ui .category-order {
    margin: 0;
}

body.cyb-ui .category-order > li {
    padding: 0 0 0 6px;
}

body.cyb-ui .category-order > li > a {
    display: inline-block;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 12.5px;
    line-height: 20px;
    white-space: nowrap;
    transition: all .18s var(--cyb-ease);
}

body.cyb-ui .category-order > li > a:hover {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

body.cyb-ui .category-order > li > a.active {
    border-color: var(--cyb-brand);
    background: var(--cyb-brand);
    color: #fff;
}

/* ---------- 6. 标签 ---------- */
body.cyb-ui .tag,
body.cyb-ui a.tag,
body.cyb-ui .tags .tag,
body.cyb-ui .article-tag .tag,
body.cyb-ui .hot-tags .tag {
    display: inline-block;
    height: 26px;
    line-height: 24px;
    padding: 0 12px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-xs);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 12.5px;
    font-weight: 400;
    text-align: center;
    transition: border-color .2s var(--cyb-ease), background-color .2s var(--cyb-ease),
        color .2s var(--cyb-ease);
}

body.cyb-ui .tag[href]:hover,
body.cyb-ui .tag[href]:focus,
body.cyb-ui a.tag:hover {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    text-decoration: none;
}

/* ---------- 7. 内容列表 ---------- */
body.cyb-ui .article-list {
    background: transparent;
}

body.cyb-ui .article-list .article-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--cyb-line);
    transition: background-color .18s var(--cyb-ease);
}

body.cyb-ui .article-list .article-item:first-child {
    padding-top: 4px;
}

body.cyb-ui .article-list .article-item:last-child {
    border-bottom: 0;
    padding-bottom: 10px;
}

/* 整行可点：悬停时整条浅浅浮起，降低「找焦点」的成本 */
body.cyb-ui .article-list .article-item:hover {
    background-color: var(--cyb-surface-2);
}

body.cyb-ui .article-list .media,
body.cyb-ui .article-list .media .media-left,
body.cyb-ui .article-list .media .media-body {
    color: var(--cyb-muted);
}

body.cyb-ui .article-list .media .media-left a {
    width: 190px;
}

body.cyb-ui .article-list .embed-responsive-4by3,
body.cyb-ui .article-list .embed-responsive-square {
    border-radius: var(--cyb-r);
    background: var(--cyb-bg-mute);
}

body.cyb-ui .article-list .media-left .embed-responsive {
    box-shadow: var(--cyb-shadow-xs);
    transition: box-shadow .24s var(--cyb-ease);
}

body.cyb-ui .article-list .media-left:hover .embed-responsive {
    box-shadow: var(--cyb-shadow);
}

body.cyb-ui .article-list .media-left .embed-responsive img {
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .article-list .media-left:hover .embed-responsive img {
    transform: scale(1.06);
}

body.cyb-ui .article-list .media .media-body {
    padding-left: 22px;
    padding-bottom: 4px;
    vertical-align: top;
}

body.cyb-ui .article-list .article-title {
    margin: 0;
    height: auto;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cyb-ink);
}

body.cyb-ui .article-list .article-title a {
    color: var(--cyb-ink);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .article-list .article-title a:hover,
body.cyb-ui .article-list .article-title a span.highlight {
    color: var(--cyb-brand);
}

body.cyb-ui .article-list .gallery-article .article-title span.highlight {
    color: var(--cyb-brand);
}

body.cyb-ui .article-list .article-intro {
    height: 42px;
    margin-top: 8px;
    line-height: 21px;
    color: var(--cyb-muted);
    font-size: 13.5px;
}

/* 元信息改为参与排版（原先是绝对定位，标题两行时会压字） */
body.cyb-ui .article-list .media-body .article-tag,
body.cyb-ui .article-list .gallery-article .media .media-body .article-tag {
    position: static;
    margin-top: 12px;
    color: var(--cyb-muted-2);
    font-size: 12.5px;
    line-height: 24px;
}

body.cyb-ui .article-list .media-body .article-tag span,
body.cyb-ui .article-list .gallery-article .media .media-body .article-tag span {
    margin: 0 16px 0 0;
}

body.cyb-ui .article-list .media-body .article-tag span a {
    color: var(--cyb-muted-2);
}

body.cyb-ui .article-list .media-body .article-tag span a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .article-list .media-body .article-tag i {
    margin-right: 3px;
    opacity: .75;
}

/* 图集型条目：标题 + 四宫格 */
body.cyb-ui .article-list .gallery-article .article-title {
    margin-bottom: 14px;
}

body.cyb-ui .article-list .gallery-article .media {
    margin-top: 0;
}

body.cyb-ui .article-list .gallery-article .row {
    margin: 0 -5px;
}

body.cyb-ui .article-list .gallery-article .row .col-sm-3 {
    padding: 0 5px;
}

body.cyb-ui .article-list .gallery-article .row .col-sm-3 .embed-responsive {
    border-radius: var(--cyb-r-sm);
    background: var(--cyb-bg-mute);
    box-shadow: var(--cyb-shadow-xs);
    transition: box-shadow .24s var(--cyb-ease);
}

body.cyb-ui .article-list .gallery-article .row .col-sm-3:hover .embed-responsive {
    box-shadow: var(--cyb-shadow-sm);
}

body.cyb-ui .article-list .gallery-article .row .col-sm-3 img {
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .article-list .gallery-article .row .col-sm-3:hover img {
    transform: scale(1.06);
}

/* 相关阅读：标题固定两行，卡片基线对齐 */
body.cyb-ui .related-article h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 44px;
    margin: 12px 0 0;
    line-height: 22px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--cyb-text-2);
}

body.cyb-ui .related-article h5 a {
    color: var(--cyb-text-2);
    transition: color .18s var(--cyb-ease);
}

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

/* ---------- 8. 商品卡片 ----------
   首页「热门商品」与产品列表页共用同一套卡片，两个页面的商品观感才一致 */
body.cyb-ui .shop-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    overflow: hidden;
    transition: border-color .2s var(--cyb-ease), box-shadow .24s var(--cyb-ease),
        transform .24s var(--cyb-ease-out);
}

body.cyb-ui .shop-card:hover {
    border-color: var(--cyb-line-2);
    box-shadow: var(--cyb-shadow);
    transform: translateY(-3px);
}

body.cyb-ui .shop-thumb {
    position: relative;
    display: block;
    background: var(--cyb-bg-mute);
    overflow: hidden;
}

/* 商品缩略图统一正方形。图源比例很杂（迁移的封面 800×600、后台上传的截图 800×800 /
   376×358），4:3 容器会把方图上下各裁 12%；正方形既贴合商品图本身，栅格也整齐。
   .embed-responsive img 自带 object-fit:cover，任意比例都是裁切铺满，不会拉变形。 */
body.cyb-ui .shop-thumb .embed-responsive {
    border-radius: 0;
    padding-bottom: 100%;
}

body.cyb-ui .shop-thumb img {
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .shop-card:hover .shop-thumb img {
    transform: scale(1.05);
}

/* 发货方式角标：图片上唯一的信息，用半透明玻璃底保证不抢图 */
body.cyb-ui .shop-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: var(--cyb-r-xs);
    background: rgba(18, 20, 26, .62);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .2px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.cyb-ui .shop-mask {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(18, 20, 26, .5);
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
}

body.cyb-ui .shop-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
}

body.cyb-ui .shop-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    /* 最多两行，但高度随文字走：只有一行标题时不再预留出第二行的空白，
       标题与描述挨在一起，卡片上半部分不会显得松散 */
    max-height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.cyb-ui .shop-title a {
    color: var(--cyb-ink);
    transition: color .18s var(--cyb-ease);
}

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

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

body.cyb-ui .shop-meta {
    margin-top: 10px;
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

body.cyb-ui .shop-meta span {
    margin-right: 14px;
}

body.cyb-ui .shop-meta i {
    margin-right: 3px;
    opacity: .8;
}

/* 价格与按钮同排：按钮紧跟价格，靠 margin-top:auto 把这一行顶到卡片底部，
   卡片等高后同排卡片的按钮自然落在同一条水平线上 */
body.cyb-ui .shop-foot {
    display: flex;
    /* 价格在左、按钮在右，恒定同一行：卡片窄到极限时只让价格被裁切，
       也不把按钮甩到第二行（用户明确要求两者不折行） */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

body.cyb-ui .shop-price {
    display: flex;
    align-items: baseline;
    /* 「￥xx 起」整体不换行，超长价格由 overflow 兜底裁切 */
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    /* 行高压到 1.3，让这一行的高度由按钮决定，价格不再把底部撑高 */
    line-height: 1.3;
    font-family: var(--cyb-font-num);
}

body.cyb-ui .shop-price .price-now {
    color: var(--cyb-brand);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
}

body.cyb-ui .shop-price .price-from {
    margin-left: 1px;
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

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

body.cyb-ui .shop-btn {
    display: inline-block;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--cyb-r);
    /* 主行动按钮用火焰渐变，是页面上唯一的「热源」 */
    background: var(--cyb-fire);
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(224, 57, 27, .2);
    transition: box-shadow .2s var(--cyb-ease), transform .2s var(--cyb-ease-out),
        filter .2s var(--cyb-ease);
}

/* 按钮本身是 <a>，要把链接的默认色与下划线一起压掉 */
body.cyb-ui a.shop-btn:hover,
body.cyb-ui a.shop-btn:focus,
body.cyb-ui .shop-btn:hover,
body.cyb-ui .shop-btn:focus {
    background: var(--cyb-brand-hover);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--cyb-shadow-fire);
}

/* ---------- 9. 栏目页的分栏列表 ---------- */
body.cyb-ui .channel-list .row .col-xs-12,
body.cyb-ui .channel-list .row .col-sm-6 {
    padding-bottom: 10px;
}

body.cyb-ui .channel-list .row .col-xs-12 h3,
body.cyb-ui .channel-list .row .col-sm-6 h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 16px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--cyb-ink);
}

body.cyb-ui .channel-list .row .col-xs-12 h3 > a,
body.cyb-ui .channel-list .row .col-sm-6 h3 > a {
    color: var(--cyb-ink);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .channel-list .row .col-xs-12 h3 > a:hover,
body.cyb-ui .channel-list .row .col-sm-6 h3 > a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .channel-list .row .col-xs-12 h3 > a:before,
body.cyb-ui .channel-list .row .col-sm-6 h3 > a:before {
    background: var(--cyb-fire);
    width: 3px;
    height: 15px;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}

body.cyb-ui .channel-list .row .col-xs-12 h3 em,
body.cyb-ui .channel-list .row .col-sm-6 h3 em {
    margin-left: auto;
    font-size: 12.5px;
    font-style: normal;
}

body.cyb-ui .channel-list .row .col-xs-12 h3 em a,
body.cyb-ui .channel-list .row .col-sm-6 h3 em a {
    color: var(--cyb-muted);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .channel-list .row .col-xs-12 h3 em a:hover,
body.cyb-ui .channel-list .row .col-sm-6 h3 em a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .channel-list .row .media {
    padding-bottom: 14px;
    margin-top: 0;
}

body.cyb-ui .channel-list .row .media .media-left a {
    width: 108px;
}

body.cyb-ui .channel-list .row .media .media-left a .embed-responsive-4by3 {
    border-radius: var(--cyb-r);
    background: var(--cyb-bg-mute);
    box-shadow: var(--cyb-shadow-xs);
}

body.cyb-ui .channel-list .row .media .media-body {
    padding-left: 16px;
}

body.cyb-ui .channel-list .row .media .media-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

body.cyb-ui .channel-list .row .media .media-body h4 a {
    color: var(--cyb-ink);
}

body.cyb-ui .channel-list .row .media .media-body h4 a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .channel-list .row .media .media-body p {
    margin: 0;
    color: var(--cyb-muted);
    font-size: 13px;
    line-height: 1.7;
}

body.cyb-ui .channel-list .row ul.inner-list {
    margin-bottom: 10px;
    border-top: 1px dashed var(--cyb-line);
    padding-top: 4px;
}

body.cyb-ui .channel-list .row ul.inner-list li {
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--cyb-text-2);
}

body.cyb-ui .channel-list .row ul.inner-list li a {
    color: var(--cyb-text-2);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .channel-list .row ul.inner-list li a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .channel-list .row ul.inner-list li span {
    color: var(--cyb-muted-2);
    font-size: 12.5px;
}

/* ---------- 10. 加载更多与分页 ---------- */
/* 注意：.px-4 / .my-4 带 !important，这里只改外观不动内外边距 */
body.cyb-ui .btn-loadmore {
    height: 42px;
    line-height: 1.2;
    border: 1px solid var(--cyb-line-2);
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-surface);
    color: var(--cyb-text);
    font-size: 14px;
    letter-spacing: .3px;
    box-shadow: var(--cyb-shadow-xs);
    transition: border-color .2s var(--cyb-ease), background-color .2s var(--cyb-ease),
        color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease);
}

body.cyb-ui .btn-loadmore:hover,
body.cyb-ui .btn-loadmore:focus {
    border-color: var(--cyb-brand);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    box-shadow: none;
}

body.cyb-ui .pagination > li > a,
body.cyb-ui .pagination > li > span {
    margin: 0 3px;
    border-color: var(--cyb-line-2);
    border-radius: var(--cyb-r-sm) !important;
    color: var(--cyb-text-2);
}

body.cyb-ui .pagination > li > a:hover {
    background: var(--cyb-bg-soft);
    color: var(--cyb-text);
}

body.cyb-ui .pagination > .active > a,
body.cyb-ui .pagination > .active > span {
    background: var(--cyb-brand);
    border-color: var(--cyb-brand);
}

body.cyb-ui .loadmore-line {
    border-top-color: var(--cyb-line);
}

body.cyb-ui .loadmore-line .loadmore-tips {
    background-color: var(--cyb-canvas);
    color: var(--cyb-muted-2);
}

body.cyb-ui .loadmore-nodata .loadmore-tips {
    color: var(--cyb-muted-2);
}

/* ---------- 11. 侧栏 ---------- */
body.cyb-ui aside > .panel:last-child {
    margin-bottom: 0;
}

body.cyb-ui .lasest-update .panel-body {
    padding: 10px 24px 14px;
}

/* 每条前加一枚小圆点，长列表的节奏感更清晰 */
body.cyb-ui .lasest-update .panel-body ul li {
    position: relative;
    height: auto;
    line-height: 1.6;
    padding: 8px 0 8px 14px;
    border-bottom: 1px dashed var(--cyb-line);
    font-size: 13.5px;
    color: var(--cyb-muted-2);
}

body.cyb-ui .lasest-update .panel-body ul li::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cyb-line-2);
    transition: background-color .18s var(--cyb-ease);
}

body.cyb-ui .lasest-update .panel-body ul li:hover::before {
    background: var(--cyb-brand);
}

body.cyb-ui .lasest-update .panel-body ul li:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

body.cyb-ui .lasest-update .panel-body ul li a {
    color: var(--cyb-text-2);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .lasest-update .panel-body ul li a:hover {
    color: var(--cyb-brand);
}

body.cyb-ui .media-number {
    padding: 10px 0;
    border-bottom: 1px dashed var(--cyb-line);
}

body.cyb-ui .media-number:last-child {
    border-bottom: 0;
}

body.cyb-ui .media-number .media-left {
    padding-right: 12px;
}

/* 榜单前三名给到强调色块，权重一眼可见 */
body.cyb-ui .media-number .media-left .num.tag {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0;
    text-align: center;
    border: 0;
    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: 600;
}

body.cyb-ui .media-number:nth-child(-n+3) .media-left .num.tag {
    background: var(--cyb-fire);
    color: #fff;
}

body.cyb-ui .media-number .media-body a {
    color: var(--cyb-text-2);
    font-size: 13.5px;
    line-height: 1.6;
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui .media-number .media-body a:hover {
    color: var(--cyb-brand);
}

/* 广告位：圆角 + 悬停微推近 */
body.cyb-ui .panel-blockimg {
    margin-bottom: 22px;
    border-radius: var(--cyb-r-lg);
    overflow: hidden;
    box-shadow: var(--cyb-shadow-sm);
}

body.cyb-ui .panel-blockimg:not(:has(img)) {
    display: none;
}

body.cyb-ui .panel-blockimg a {
    display: block;
    overflow: hidden;
}

body.cyb-ui .panel-blockimg img {
    display: block;
    width: 100%;
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-ui .panel-blockimg:hover img {
    transform: scale(1.03);
}

body.cyb-ui .hot-tags .panel-body {
    padding-bottom: 12px;
}

body.cyb-ui .hot-tags .panel-body .tags {
    display: block;
}

/* .tag 直接挂在 <a> 上，选择器必须用 a.tag，写成 a .tag 会失效导致基础蓝泄漏 */
body.cyb-ui .hot-tags .panel-body a.tag,
body.cyb-ui .hot-tags .panel-body .tag {
    margin: 0 6px 8px 0;
}

/* ---------- 12. 浮动按钮 ---------- */
body.cyb-ui #floatbtn {
    width: 44px;
    /* 模板原样式为 right:50% + margin-right:-640px，仅在 ≥1280px 时落回视口内，
       更窄的屏幕（含手机、平板）会被推到屏幕外而完全看不见。
       这里改成：宽屏时贴在内容容器右侧外沿，窄屏时自动收敛为贴屏幕右边距。 */
    right: max(12px, calc((100% - 1200px) / 2 + 12px));
    margin-right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

body.cyb-ui #floatbtn > a,
body.cyb-ui #floatbtn .floatbtn-item {
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin-top: 10px;
    font-size: 17px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    background-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--cyb-muted);
    box-shadow: var(--cyb-shadow-sm);
    transition: background-color .2s var(--cyb-ease), border-color .2s var(--cyb-ease),
        color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease);
}

body.cyb-ui #floatbtn > a:hover,
body.cyb-ui #floatbtn .floatbtn-item:hover,
body.cyb-ui #floatbtn > a.hover:hover,
body.cyb-ui #floatbtn .floatbtn-item.hover:hover {
    padding: 4px;
    line-height: 1.55;
    background-color: var(--cyb-ink);
    border-color: var(--cyb-ink);
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(18, 20, 26, .8);
}

body.cyb-ui #floatbtn > a.hover:hover em,
body.cyb-ui #floatbtn .floatbtn-item.hover:hover em {
    font-size: 12.5px;
}

body.cyb-ui .floatbtn-wrapper {
    right: 53px;
    background-color: var(--cyb-surface);
    border-color: var(--cyb-line);
    border-radius: var(--cyb-r-lg);
    box-shadow: var(--cyb-shadow-lg);
}

body.cyb-ui .floatbtn-wrapper::before {
    right: -9px;
    width: 9px;
    height: 100%;
}

body.cyb-ui .floatbtn-wrapper::after {
    border-left-color: var(--cyb-line);
}

body.cyb-ui .floatbtn-wrapper p {
    font-size: 13px;
    line-height: 20px;
    color: var(--cyb-muted);
}

/* ---------- 13. 页脚 ---------- */
/* 深底 + 中性灰字：与浅色画布形成干净的收尾，不加装饰光带 */
body.cyb-ui footer {
    margin-top: 10px;
    background: #0f172a;
    color: var(--cyb-muted-2);
}

body.cyb-ui .footer-inner {
    padding: 40px 0 36px;
}

body.cyb-ui footer a {
    color: var(--cyb-muted-2);
    transition: color .18s var(--cyb-ease);
}

body.cyb-ui footer a:hover,
body.cyb-ui footer a:focus {
    color: #fff;
}

body.cyb-ui .footer-inner .footer-logo {
    margin-right: 18px !important;
}

body.cyb-ui .footer-inner .footer-logo a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--cyb-r-lg);
    background: var(--cyb-fire);
    color: #fff;
    font-size: 19px;
}

body.cyb-ui .footer-inner .footer-logo a:hover,
body.cyb-ui .footer-inner .footer-logo a:focus {
    background: var(--cyb-brand-hover);
    color: #fff;
}

body.cyb-ui .footer-inner > .row > .col-xs-12 > .pull-left:not(.footer-logo) {
    padding-top: 2px;
    color: var(--cyb-muted-2);
    font-size: 13.5px;
    line-height: 1.9;
    letter-spacing: .1px;
}

body.cyb-ui .footer-inner .list-inline {
    margin-top: 14px;
    margin-bottom: 0;
    /* Bootstrap 的 .list-inline 自带 margin-left:-5px，而主题已把每个 li 的左内边距
       清零，这个负边距没人抵消，于是「关于我们 / 联系我们 …」整行比上方版权文案
       左移 5px。归零后两种文案落在同一条左基线上。 */
    margin-left: 0;
}

body.cyb-ui .footer-inner .list-inline > li {
    padding-left: 0;
    padding-right: 14px;
}

/* 链接之间用一枚极小的圆点分隔，比竖线更轻盈 */
body.cyb-ui .footer-inner .list-inline > li + li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 11px 0 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    vertical-align: middle;
}

/* ---------- 14. 通用控件收敛 ---------- */
body.cyb-ui .form-control {
    border-color: var(--cyb-line-2);
    border-radius: var(--cyb-r-sm);
    color: var(--cyb-text);
    font-size: 14px;
    box-shadow: none;
}

body.cyb-ui .form-control::placeholder {
    color: var(--cyb-muted-2);
}

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

body.cyb-ui .msg-box {
    color: var(--cyb-brand);
}

body.cyb-ui .btn-default {
    border-color: var(--cyb-line-2);
    background: var(--cyb-surface);
    color: var(--cyb-text-2);
    border-radius: var(--cyb-r-sm);
    transition: border-color .18s var(--cyb-ease), background-color .18s var(--cyb-ease),
        color .18s var(--cyb-ease);
}

body.cyb-ui .btn-default:hover,
body.cyb-ui .btn-default:focus {
    border-color: var(--cyb-brand);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
}

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

/* 通用面板内的表格：去掉 Bootstrap 的深色表头，改成暖灰底 */
body.cyb-ui .table > thead > tr > th {
    border-bottom: 1px solid var(--cyb-line-2);
    background: var(--cyb-surface-2);
    color: var(--cyb-text-2);
    font-weight: 600;
}

body.cyb-ui .table > tbody > tr > td,
body.cyb-ui .table > tbody > tr > th,
body.cyb-ui .table > tfoot > tr > td,
body.cyb-ui .table > tfoot > tr > th,
body.cyb-ui .table > thead > tr > td,
body.cyb-ui .table > thead > tr > th {
    border-color: var(--cyb-line);
}

body.cyb-ui .table > tbody > tr:hover > td {
    background: var(--cyb-surface-2);
}

body.cyb-ui .alert {
    border-radius: var(--cyb-r-lg);
    border: 1px solid var(--cyb-line);
    background: var(--cyb-surface-2);
    color: var(--cyb-text-2);
    font-size: 13.5px;
}

body.cyb-ui .alert-info {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand-deep);
}

body.cyb-ui .alert-warning {
    border-color: #f5e0b5;
    background: #fffaf0;
    color: #8a6212;
}

body.cyb-ui .alert-danger {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand-deep);
}

body.cyb-ui .text-danger {
    color: var(--cyb-brand) !important;
}

body.cyb-ui .text-muted {
    color: var(--cyb-muted-2) !important;
}

body.cyb-ui .page-header {
    margin: 6px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cyb-line);
    color: var(--cyb-ink);
    font-size: 19px;
    font-weight: 600;
}

/* ---------- 15. 响应式 ---------- */
/* 仅压缩横向导航的内边距；加 min-width 是为了不污染 <768px 的抽屉菜单
   （抽屉菜单项需要上下内边距，否则会挤成一条线） */
@media (min-width: 768px) and (max-width: 1199px) {
    body.cyb-ui .navbar-white .navbar-nav > li > a {
        padding: 0 14px;
    }

    body.cyb-ui .navbar-white .navbar-nav:not(.navbar-right) > li > a::after {
        left: 14px;
        right: 14px;
    }
}

@media (max-width: 991px) {
    body.cyb-ui .navbar-white .navbar-brand {
        padding-right: 20px;
    }

    body.cyb-ui .navbar-white .navbar-brand img {
        max-height: 34px;
    }

    /* 该尺寸下导航项已占用左侧一段，搜索框收窄以留出空间（原先被 hidden-sm 隐藏） */
    body.cyb-ui .navbar .form-search input[type=search] {
        width: 160px;
    }

    body.cyb-ui .navbar .form-search input[type=search]:focus {
        width: 200px;
    }

    body.cyb-ui .panel-default > .panel-body {
        padding: 14px 18px;
    }

    body.cyb-ui .carousel-focus .carousel-caption {
        padding: 72px 22px 22px;
    }

    body.cyb-ui .carousel-focus .carousel-caption h3 {
        font-size: 19px;
    }

    body.cyb-ui .category-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    /* 抽屉式导航：同样是浅色卡片语言 */
    body.cyb-ui .navbar-white {
        background-color: rgba(255, 255, 255, .94);
    }

    body.cyb-ui .navbar-white .navbar-brand {
        height: 58px;
        padding-right: 12px;
    }

    body.cyb-ui .navbar-white .navbar-brand img {
        max-height: 32px;
    }

    /* 抽屉菜单：补齐菜单项内边距，否则各项会挤成一条线（<768px 无桌面端的高度规则） */
    body.cyb-ui .navbar .navbar-collapse {
        box-shadow: 0 24px 48px -24px rgba(16, 24, 40, .4);
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav {
        margin: 8px 0;
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li {
        margin-bottom: 6px;
        border-radius: var(--cyb-r-sm);
        background: var(--cyb-bg-soft);
        overflow: hidden;
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li > a {
        display: block;
        height: auto;
        padding: 13px 14px;
        line-height: 1.4;
        color: var(--cyb-text-2);
        font-size: 15px;
        white-space: normal;
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li > a:hover,
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li > a:focus {
        color: var(--cyb-ink);
        background-color: var(--cyb-surface);
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li.active > a,
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li.active > a:hover,
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li.active > a:focus {
        color: var(--cyb-brand);
        font-weight: 600;
        background-color: var(--cyb-surface);
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav > li.open > a {
        color: var(--cyb-ink);
        background-color: var(--cyb-surface);
    }

    /* 展开箭头：置于菜单项右侧并垂直居中 */
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li > a b.caret {
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -2px;
        opacity: .5;
    }

    /* 二级菜单：缩进 + 浅底，与一级项区分 */
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li ul.dropdown-menu {
        margin: 0 8px 8px;
        padding: 4px;
        border: 0;
        border-radius: var(--cyb-r-sm);
        background: var(--cyb-surface);
        box-shadow: none;
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li ul.dropdown-menu > li > a {
        padding: 9px 12px;
        border-radius: var(--cyb-r-xs);
        color: var(--cyb-muted);
        font-size: 14px;
        line-height: 1.4;
        white-space: normal;
    }

    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li ul.dropdown-menu > li.active > a,
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li ul.dropdown-menu > li > a:hover,
    body.cyb-ui .navbar .navbar-collapse > ul.navbar-nav li ul.dropdown-menu > li > a:focus {
        color: var(--cyb-brand);
        background-color: var(--cyb-brand-bg);
    }

    /* 汉堡按钮需高于遮罩（遮罩 9998 / 抽屉 9999），否则展开后无法再点击关闭 */
    body.cyb-ui .navbar .navbar-toggle {
        position: relative;
        z-index: 10000;
    }

    /* 抽屉展开时压暗背景，突出菜单本身 */
    body.cyb-ui .navbar .navbar-collapse-bg {
        background: rgba(16, 24, 40, .42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    body.cyb-ui .navbar .form-search input[type=search],
    body.cyb-ui .navbar .form-search input[type=search]:focus {
        width: 100%;
        height: 40px;
        margin-right: 0;
    }

    body.cyb-ui .panel-default > .panel-heading {
        padding: 15px 16px;
    }

    body.cyb-ui .panel-default > .panel-heading .panel-title {
        font-size: 16px;
    }

    body.cyb-ui .panel-default > .panel-heading .more {
        right: 16px;
    }

    body.cyb-ui .panel-default > .panel-body {
        padding: 14px 16px;
    }

    body.cyb-ui .panel-default > .panel-body.p-0 .article-item {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 手机端商品卡：图片仍是主角，次要信息让位给价格与按钮 */
    body.cyb-ui .shop-body {
        padding: 10px 12px 12px;
    }

    body.cyb-ui .shop-title {
        font-size: 14px;
        line-height: 20px;
        max-height: 40px;
    }

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

    body.cyb-ui .shop-foot {
        gap: 8px;
        padding-top: 8px;
    }

    body.cyb-ui .shop-price .price-now {
        font-size: 17px;
    }

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

    body.cyb-ui .carousel-focus {
        margin-bottom: 18px;
    }

    body.cyb-ui .carousel-focus .carousel-indicators {
        right: 16px;
        bottom: 16px;
    }

    body.cyb-ui .carousel-focus .carousel-control {
        width: 56px;
    }

    body.cyb-ui .carousel-focus .carousel-control.left span {
        left: 10px;
    }

    body.cyb-ui .carousel-focus .carousel-control.right span {
        right: 10px;
    }

    body.cyb-ui .category-title {
        font-size: 19px;
        margin-bottom: 14px;
    }

    body.cyb-ui .category-title {
        display: block;
    }

    body.cyb-ui .category-title .more {
        margin-top: 8px;
    }

    body.cyb-ui .tabs-wrapper .tabs-group {
        display: block;
    }

    body.cyb-ui .tabs-wrapper .tabs-group .title {
        margin-bottom: 8px;
    }

    body.cyb-ui .tabs-wrapper .tabs-group .content > li {
        margin: 0 8px 8px 0;
    }

    body.cyb-ui .tabs-wrapper .tabs-group .content > li > a {
        padding: 6px 14px;
        font-size: 13.5px;
    }

    body.cyb-ui .category-order > li {
        padding-left: 0;
        margin: 0 8px 0 0;
    }

    body.cyb-ui .category-order > li > a {
        min-height: 32px;
        padding: 5px 11px;
        font-size: 13px;
        line-height: 20px;
    }

    /* 结果区标题栏：手机上排成「标题一行、控件一行」。
       .more 原本是 position:absolute（common.css 给的面板右上角定位），
       在手机宽度下它的内容（3 个排序项 + 视图切换）比可用宽度还宽，
       既会自身换行、又会压到左边的标题上。这里让它回到文档流。 */
    body.cyb-ui .panel-result > .panel-heading {
        padding: 12px 14px;
    }

    body.cyb-ui .panel-result > .panel-heading > .panel-title {
        display: block;
    }

    body.cyb-ui .panel-result > .panel-heading > .panel-title > small {
        display: none;
    }

    body.cyb-ui .panel-result > .panel-heading .more {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 9px;
        transform: none;
    }

    /* 一行放不下时也不换行：让排序项一侧先压缩内边距，实在不够才轮到滚动 */
    body.cyb-ui .panel-result > .panel-heading .more > ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.cyb-ui .panel-result > .panel-heading .more > ul::-webkit-scrollbar {
        display: none;
    }

    body.cyb-ui .panel-result .view-switch {
        flex: 0 0 auto;
    }

    body.cyb-ui .panel-result .view-switch button {
        width: 38px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    /* 窄屏下列表条目改为「图左文右」的一行：整条更紧凑，一眼能扫过更多条目 */
    body.cyb-ui .article-list .media {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    body.cyb-ui .article-list .media .media-left {
        flex: 0 0 auto;
        float: none;
        width: auto;
        margin: 0;
    }

    body.cyb-ui .article-list .media .media-left a {
        width: 112px;
    }

    /* 必须清掉 Bootstrap .media-body 自带的 width:10000px（表格单元格时代用来撑满），
       留着它时文字永不换行，长标题会被卡片右侧直接裁掉 */
    body.cyb-ui .article-list .media .media-body {
        display: block;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-left: 0;
        padding-bottom: 0;
    }

    body.cyb-ui .article-list .article-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        max-height: 42px;
        font-size: 14.5px;
        line-height: 1.45;
    }

    body.cyb-ui .article-list .article-intro {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: auto;
        max-height: 38px;
        margin-top: 5px;
        font-size: 12.5px;
        line-height: 19px;
    }

    body.cyb-ui .article-list .media-body .article-tag {
        margin-top: 6px;
        font-size: 12px;
        line-height: 20px;
    }

    body.cyb-ui .article-list .media-body .article-tag span {
        margin-right: 12px;
    }

    body.cyb-ui .article-list .article-item {
        padding: 14px 0;
    }

    body.cyb-ui .article-list .article-item:first-child {
        padding-top: 6px;
    }

    body.cyb-ui .article-list .article-item:last-child {
        padding-bottom: 8px;
    }

    body.cyb-ui .lasest-update .panel-body {
        padding: 8px 16px 12px;
    }

    /* ---- 页脚：小屏上不再左右分栏，品牌、版权、备案、链接自上而下排 ---- */
    body.cyb-ui .footer-inner {
        padding: 28px 0 24px;
    }

    body.cyb-ui .footer-inner .footer-logo {
        float: none;
        margin: 0 0 16px !important;
    }

    body.cyb-ui .footer-inner > .row > .col-xs-12 > .pull-left:not(.footer-logo) {
        float: none;
        width: auto;
        font-size: 13px;
        line-height: 1.85;
    }

    /* 备案号各自独占一行：挤在一行时会从号码中间断开 */
    body.cyb-ui .footer-inner .pull-left > span {
        display: block;
    }

    body.cyb-ui .footer-inner .list-inline {
        margin-top: 12px;
        margin-left: -2px;
    }

    body.cyb-ui .footer-inner .list-inline > li {
        padding-right: 18px;
    }

    body.cyb-ui .footer-inner .list-inline > li > a {
        display: inline-block;
        padding: 4px 0;
        font-size: 13px;
    }

    /* ---- 浮动按钮：二维码类要悬停才展开，手机上没有扫码场景，只留「返回顶部」---- */
    body.cyb-ui #floatbtn {
        right: 10px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    body.cyb-ui #floatbtn .floatbtn-desk {
        display: none;
    }

    body.cyb-ui #floatbtn > a,
    body.cyb-ui #floatbtn .floatbtn-item {
        margin-top: 0;
    }

    /* ---- 触控目标：汉堡与表单控件补足到手指能稳稳点中的尺寸 ---- */
    body.cyb-ui .navbar .navbar-toggle {
        width: 44px;
        height: 44px;
        margin: 7px 0 7px 12px;
        padding: 13px 11px;
        border-radius: var(--cyb-r-sm);
    }

    body.cyb-ui .navbar .navbar-toggle .icon-bar {
        width: 22px;
        height: 2px;
        border-radius: 1px;
    }

    /* 允许双指缩放后，iOS 会在聚焦小于 16px 的输入框时自动放大页面 → 表单控件统一到 16px */
    body.cyb-ui .form-control,
    body.cyb-ui .search input,
    body.cyb-ui .login-section .form-control {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body.cyb-ui .related-article h5 {
        font-size: 13.5px;
    }
}

/* 尊重系统的「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    body.cyb-ui *,
    body.cyb-ui *::before,
    body.cyb-ui *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    body.cyb-ui .shop-card:hover,
    body.cyb-ui .list-links a:hover {
        transform: none;
    }

    body.cyb-ui .article-list .media-left:hover .embed-responsive img,
    body.cyb-ui .channel-list .row .media .media-left a:hover img,
    body.cyb-ui .panel-blockimg:hover img,
    body.cyb-ui .shop-card:hover .shop-thumb img {
        transform: none;
    }
}