/* =========================================================================
   theme.css —— 2026 改版：外壳层（深色影院调）
   -------------------------------------------------------------------------
   定位：在 style.css / customer.css 之后加载的「覆盖层」，只改颜色、间距、
   质感，不改任何布局机制、不改任何 DOM。要回滚只需在 master.jsp 里注释掉
   这一行 <link>，站点即刻回到改版前的样子。

   为什么不直接改 style.css：那份文件是 scss/ 编译产物（175KB，带 .map），
   手改会和源码脱节，下次谁重新编译就全没了。
   ========================================================================= */

:root {
    /* ---- 深色外壳 ---- */
    --nf-bg:         #0e1012;   /* 页面底色，比原来的 #222627 更沉，让海报图更跳 */
    --nf-surface:    #16191c;   /* 卡片 */
    --nf-surface-2:  #1e2226;   /* 悬浮/次级卡片 */
    --nf-line:       #2a2f34;   /* 分隔线 */
    --nf-line-soft:  rgba(255, 255, 255, .07);
    --nf-text:       #e9ecef;   /* 正文（不用纯白，纯白在暗底上会发晕） */
    --nf-heading:    #ffffff;
    --nf-muted:      #98a1a9;   /* 次要信息：时间、浏览数 */

    /* ---- 品牌色 ---- */
    --nf-brand:      #e50914;   /* 影视红，和站内已有的语言切换条同色 */
    --nf-brand-2:    #ff2b36;   /* hover */
    --nf-brand-dim:  rgba(229, 9, 20, .14);
    --nf-gold:       #f5c518;   /* 排行/热度点缀，克制使用 */

    /* ---- 浅色纸面（正文阅读区，见 prose.css）----
       纸面不用纯白：#fff 打在 #0e1012 上是 20.6:1，整屏都是这块面积，夜里看
       晃眼。收到 #f6f7f8（对正文字仍有 15:1 以上，可读性一点没丢），再靠
       .post-details-area 抬一档背景 + 卡片描边把边界过渡出来。 */
    --pp-bg:         #f4f5f7;
    --pp-sub:        #eaecef;
    --pp-line:       #dcdfe3;
    --pp-text:       #1d2126;
    --pp-muted:      #6a7480;

    /* ---- 几何 ---- */
    --nf-radius:     10px;
    --nf-radius-sm:  6px;
    --nf-shadow:     0 6px 24px rgba(0, 0, 0, .38);
    --nf-shadow-lg:  0 14px 44px rgba(0, 0, 0, .5);
    --nf-ease:       220ms cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   1. Bootstrap 5 兼容校准
   BS5 的默认栅格间距是 1.5rem(24px)，BS4 是 30px。vizew 整套卡片间距都是按
   30px 排的，这里把变量拨回去，避免升级后所有列宽整体缩一圈。
   ========================================================================= */
.row { --bs-gutter-x: 30px; }

/* BS5 在 ≥1400px 多了一档 1320px 的 container。站点的列表图是定宽的
   （303×207 / 110×75），容器一旦变宽卡片就会被拉稀，这里钉回 1140。 */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1140px; }
}

/* BS5 reboot 会给 body 设 --bs-body-* 系列变量，这里对齐成站点自己的值，
   让所有用到这些变量的 BS 组件（modal、dropdown、table…）跟着走深色。 */
body {
    --bs-body-bg: var(--nf-bg);
    --bs-body-color: var(--nf-text);
    --bs-border-color: var(--nf-line);
    --bs-emphasis-color: var(--nf-heading);
    --bs-link-color: var(--nf-text);
    --bs-link-hover-color: var(--nf-brand-2);
}

/* =========================================================================
   2. 全局基调
   ========================================================================= */
body {
    background-color: var(--nf-bg);
    color: var(--nf-text);
    /* 中文优先的字体栈：原来只有 Roboto，中文全落到系统默认宋/黑，观感很旧 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
                 "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
                 sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    color: var(--nf-heading);
    letter-spacing: -.01em;
}

a { color: inherit; }
a:hover, a:focus { color: var(--nf-brand-2); }

::selection { background: var(--nf-brand-dim); color: var(--nf-heading); }

/* 键盘可达性：原主题把 outline 全清了，这里补回一个只在键盘导航时出现的焦点环 */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--nf-brand-2);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 深色页面的滚动条 */
@supports (scrollbar-color: red blue) {
    html { scrollbar-color: #3a4046 var(--nf-bg); }
}
/* =========================================================================
   3. 顶部条 + 导航
   -------------------------------------------------------------------------
   整体是暗色系，不做「上半截亮、下半截暗」那种割裂。三层靠明度轻推区分，
   相邻两层差得不多但一眼能分开：

       #0b0d0e   顶部工具条   最深
       #16191c   导航条       抬一档
       #0e1012   页面主体     介于两者之间

   logo.png 是黑字 + 白描边、给浅底做的，直接放深色导航条上，黑色笔画会糊进
   背景，只剩一圈白边（实测过 #2a2f34 / #1e2226 / #16191c 三档都糊）。
   解决办法不是把整条导航刷亮，而是只给 logo 垫一块浅色底板 —— 亮面从整条
   1140px 缩到 160px 左右，站点整体仍然是暗的。
   ========================================================================= */
:root {
    --nf-topbar-bg:  #0b0d0e;   /* 顶部工具条 */
    --nf-nav-bg:     #1a1e22;   /* 导航条 */
    --nf-nav-text:   #e9ecef;   /* 导航条上的文字 */
    --nf-nav-line:   rgba(255, 255, 255, .10);
    --nf-plate:      #f2f3f5;   /* logo 底板 */
}

/* -------- 顶部工具条 -------- */
/* style.css 把 .top-header-area 的高度写死成 50px，而里面的内容（44px 内条 +
   上下内边距）有 57px，撑破了盒子 —— 于是右侧那组看起来整体偏下。
   高度交还给内容算，左右两组各自锁 40px 行高，居中就对齐了。 */
.header-area .top-header-area {
    background-color: var(--nf-topbar-bg);
    border-bottom: 0;
    height: auto;
    padding: 8px 0;
}
/* 这条 1px 线在 style.css 里画在 .breaking-news-area 上，而它只占左半列，
   于是分隔线到页面中间就断了。收掉。 */
.header-area .top-header-area .breaking-news-area {
    height: 40px;
    border-bottom: 0;
}
.header-area .top-header-area .top-meta-data {
    height: 40px;
    gap: 14px;
}
.header-area .top-header-area .news-title p,
.header-area .top-header-area .top-social-info a {
    color: var(--nf-muted);
    font-size: 13px;
}
.header-area .top-header-area .news-title p strong { color: var(--nf-heading); }
.header-area .top-header-area .top-social-info a:hover { color: var(--nf-brand-2); }

/* -------- 导航条 -------- */
/* 原来这里是块粉色 (#f875aa)，跟影视站调性不搭 */
.header-area .vizew-main-menu .classy-nav-container {
    background-color: var(--nf-nav-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--nf-nav-line);
    border-bottom: 1px solid var(--nf-nav-line);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
.header-area .vizew-main-menu .classy-navbar { height: 78px; }

/* logo 底板：深色导航条上给 logo.png 垫一块浅底，让黑色笔画有依托 */
.header-area .nav-brand {
    display: inline-flex;
    align-items: center;
    background-color: var(--nf-plate);
    padding: 6px 13px;
    border-radius: 10px;
    transition: background-color var(--nf-ease);
}
.header-area .nav-brand:hover { background-color: #ffffff; }
/* style.css 给 .nav-brand 设了 max-width（150/120/110 三档）。父级是 flex 之后
   这个上限会把图片横向压扁 —— 实测手机上原始比例 3.302 被压成 2.619。
   解掉上限，改用高度控制大小，再加 object-fit 兜底，比例永远不会再坏。 */
.header-area .vizew-main-menu .classy-navbar .nav-brand { max-width: none; }
.header-area .nav-brand img {
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
}

.header-area .vizew-main-menu .classy-navbar .classynav ul li a {
    color: var(--nf-nav-text);
    font-size: 15px;
    font-weight: 700;
    height: 78px;
    line-height: 78px;
    border-bottom: 0;          /* style.css 那条 3px 边框掉在条子外面，弃用 */
    position: relative;
    transition: color var(--nf-ease);
}
/* 指示条：贴着文字底下走，不是贴着导航条底边 —— 后者离字太远，看着像另一个
   元件。文字垂直居中于 78px，底边约在 50px 处，所以 bottom:22px 正好在字下
   面 6px。hover 从中间展开，激活态常驻。 */
.header-area .vizew-main-menu .classy-navbar .classynav ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 22px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--nf-brand);
    transition: left var(--nf-ease), right var(--nf-ease);
}
.header-area .vizew-main-menu .classy-navbar .classynav ul li a:hover,
.header-area .vizew-main-menu .classy-navbar .classynav ul li a:focus {
    color: var(--nf-brand-2);
}
.header-area .vizew-main-menu .classy-navbar .classynav ul li a:hover::after,
.header-area .vizew-main-menu .classy-navbar .classynav ul li a:focus::after {
    left: 0;
    right: 0;
}
.header-area .vizew-main-menu .classy-navbar .classynav ul li.active a { color: var(--nf-brand-2); }
.header-area .vizew-main-menu .classy-navbar .classynav ul li.active a::after { left: 0; right: 0; }
/* 下拉子菜单 */
.header-area .vizew-main-menu .classy-navbar .classynav ul li ul {
    background-color: var(--nf-surface-2);
    border: 1px solid var(--nf-line);
    box-shadow: var(--nf-shadow);
}
.header-area .vizew-main-menu .classy-navbar .classynav ul li ul li a {
    color: var(--nf-text);
    height: 38px;
    line-height: 38px;
    border-bottom: 0;
    font-weight: 500;
    background-color: transparent;
}
.header-area .vizew-main-menu .classy-navbar .classynav ul li ul li a:hover {
    color: var(--nf-brand-2);
    background-color: rgba(255, 255, 255, .04);
}
.header-area .classy-navbar-toggler .navbarToggler span { background-color: var(--nf-nav-text); }
/* -------------------------------------------------------------------------
   搜索框
   之前的写法把药丸背景加在 <input> 上，而 input 高度等于顶栏高度（50px），
   于是药丸上下顶满整条顶栏，看着像塞了一块灰板；放大镜按钮又是 input 的
   兄弟节点、各自定位，两者对不齐。
   改法：让容器 .newSearchForm 成为那颗药丸，input 和按钮都放进去。
   ------------------------------------------------------------------------- */
.top-header-area .top-search-area .newSearchForm {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 4px 0 14px;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background-color var(--nf-ease), border-color var(--nf-ease);
}
/* 焦点态提升到容器上，输入框和按钮一起亮起来 */
.top-header-area .top-search-area .newSearchForm:focus-within {
    background-color: rgba(255, 255, 255, .13);
    border-color: rgba(229, 9, 20, .55);
}
.top-header-area .top-search-area .newSearch,
.top-header-area .top-search-area .newSearch:focus {
    width: 178px;
    height: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--nf-text);
    font-size: 13px;
    font-style: normal;   /* 原来是 italic，跟站内其它文字格格不入 */
    line-height: 1;
}
.top-header-area .top-search-area .newSearch::placeholder { color: #7c858d; font-style: normal; }
/* 按钮收成药丸内的圆形图标键 */
.top-header-area .top-search-area .newSearchSub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--nf-muted);
    font-size: 13px;
    transition: color var(--nf-ease), background-color var(--nf-ease);
}
.top-header-area .top-search-area .newSearchSub:hover,
.top-header-area .top-search-area .newSearchSub:focus {
    color: var(--nf-heading);
    background-color: var(--nf-brand);
    box-shadow: none;
}

/* style.css 里那批响应式规则写的是 .top-search-area form input，但 markup
   早就从 <form> 换成了 <div class="newSearchForm">，选择器全部落空 ——
   所以手机上搜索框会撑满整行、把「网站地图」挤到换行。按现在的 DOM 重写一遍。 */
@media (min-width: 768px) and (max-width: 991px) {
    .top-header-area .top-search-area .newSearch { width: 132px; }
    .header-area .vizew-main-menu .classy-navbar { height: 70px; }
    .header-area .vizew-main-menu .classy-navbar .classynav ul li a { height: 70px; line-height: 70px; }
    .header-area .vizew-main-menu .classy-navbar .classynav ul li a::after { bottom: 18px; }
}
@media (max-width: 767.98px) {
    .header-area .top-header-area { padding: 6px 0; }
    .header-area .top-header-area .breaking-news-area,
    .header-area .top-header-area .top-meta-data { height: 36px; }

    /* 手机上语言切换和搜索原本各占一整行（两个 col-12），顶栏被撑成两层。
       不动 DOM，改成一行里左右对开。 */
    .header-area .top-header-area .row {
        flex-wrap: nowrap;
        align-items: center;
    }
    .header-area .top-header-area .row > [class*="col-"] {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }
    .header-area .top-header-area .row > [class*="col-"]:last-child { flex: 1 1 auto; }

    .header-area .top-header-area .news-title { min-width: 0; }
    .header-area .top-header-area .news-title p {
        font-size: 12px;
        margin-bottom: 0;
        white-space: nowrap;
    }
    .top-header-area .top-meta-data { gap: 8px; }
    .top-header-area .top-search-area .newSearchForm { height: 30px; padding: 0 3px 0 11px; }
    .top-header-area .top-search-area .newSearch { width: 100%; max-width: 140px; font-size: 12px; }

    .header-area .vizew-main-menu .classy-navbar { height: 62px; }
    /* .nav-brand 的 max-width 在这一档是 110px，会把 logo 压扁；解掉之后
       用高度控制，比例交给 width:auto */
    .header-area .nav-brand { padding: 5px 10px; border-radius: 8px; }
    .header-area .nav-brand img { height: 30px; }

    .header-area .vizew-main-menu .classy-navbar .classynav ul li a {
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    /* 抽屉里链接是竖排的，横向指示条没有意义，改用左侧红条标记当前项 */
    .header-area .vizew-main-menu .classy-navbar .classynav ul li a::after { display: none; }
    .header-area .vizew-main-menu .classy-navbar .classynav ul li.active a {
        box-shadow: inset 3px 0 0 var(--nf-brand);
        padding-left: 12px;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 这一档 style.css 给 .nav-brand 的上限是 120px，同样会压扁 */
    .header-area .nav-brand img { height: 36px; }
}

/* 搜索联想下拉（bootstrap3-typeahead 渲染的 .dropdown-menu） */
.typeahead.dropdown-menu {
    background-color: var(--nf-surface-2);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-sm);
    box-shadow: var(--nf-shadow);
    padding: 6px;
}
.typeahead.dropdown-menu > li > a,
.typeahead.dropdown-menu .dropdown-item {
    color: var(--nf-text);
    border-radius: 4px;
    padding: 7px 10px;
    white-space: normal;
}
.typeahead.dropdown-menu > .active > a,
.typeahead.dropdown-menu .dropdown-item:hover,
.typeahead.dropdown-menu .dropdown-item:focus {
    background-color: var(--nf-brand-dim);
    color: var(--nf-heading);
}

/* =========================================================================
   4. 面包屑
   ========================================================================= */
.vizew-breadcrumb {
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--nf-line-soft);
}
.vizew-breadcrumb .breadcrumb .breadcrumb-item,
.vizew-breadcrumb .breadcrumb .breadcrumb-item a { font-size: 13px; color: var(--nf-muted); }
.vizew-breadcrumb .breadcrumb .breadcrumb-item a:hover { color: var(--nf-brand-2); }
.vizew-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--nf-text); }
/* 当前页标题可能很长，单行截断，避免面包屑换行把首屏顶下去 */
.vizew-breadcrumb .breadcrumb .breadcrumb-item.active {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   5. 区块标题：居中细线 → 左对齐 + 红色竖条
   ========================================================================= */
.section-heading,
.section-heading.style-2 { text-align: left; margin-bottom: 28px; }
.section-heading h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 13px;
    position: relative;
    line-height: 1.4;
}
.section-heading h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--nf-brand-2), var(--nf-brand));
}
/* 「看更多」是嵌在 h4 里的第二个 h4，去掉它的竖条并降权 */
.section-heading h4 span a h4 {
    font-size: 13px;
    font-weight: 500;
    color: var(--nf-muted);
    padding-left: 0;
    margin-bottom: 0;
}
.section-heading h4 span a h4::before { display: none; }
.section-heading h4 span a:hover h4 { color: var(--nf-brand-2); }
.section-heading .line { display: none; }

/* 「强推主题」轮播的左右箭头。style.css 把它们绝对定位在 top:-88px —— 那是
   原来那个居中大标题的高度。标题改成左对齐紧凑版（h4 28px + 10 + 区块下边距
   28 = 66px）之后，-88px 就跑到上一个区块里去了。按新标题高度重新对位：
   实测标题文字纵向中心在轮播上方 42px 处，箭头 30px 高，所以 top = -(42+15) = -57px。 */
.featured-post-slides .owl-prev,
.featured-post-slides .owl-next,
.sport-video-slides .owl-prev,
.sport-video-slides .owl-next,
.business-video-slides .owl-prev,
.business-video-slides .owl-next {
    top: -57px;
    background-color: var(--nf-surface-2);
    border-radius: var(--nf-radius-sm);
    color: var(--nf-text);
}
.featured-post-slides .owl-prev:hover,
.featured-post-slides .owl-next:hover,
.sport-video-slides .owl-prev:hover,
.sport-video-slides .owl-next:hover,
.business-video-slides .owl-prev:hover,
.business-video-slides .owl-next:hover {
    background-color: var(--nf-brand);
    color: #fff;
}

/* =========================================================================
   6. 卡片：列表项 / 首屏大图 / 侧栏小图
   ========================================================================= */
.single-post-area .post-thumbnail,
.single-blog-post .post-thumbnail {
    overflow: hidden;
    border-radius: var(--nf-radius-sm);
    background-color: var(--nf-surface-2);
}
/* .single-blog-post 是 d-flex，缩略图那一列默认 align-self:stretch，会被右边
   两三行标题撑到整行高；而 EasyLazyload 生成的 .lazy-box 只有 100×65。
   我给 .post-thumbnail 加了底色之后，多出来的那截就显形成了图片下方的空档。
   让它按内容高度收住，不跟着行高拉伸。 */
.single-blog-post .post-thumbnail { align-self: flex-start; }
.single-blog-post .post-thumbnail .lazy-box,
.single-post-area .post-thumbnail .lazy-box {
    background-color: var(--nf-surface-2);
    border-radius: var(--nf-radius-sm);
    overflow: hidden;
}
.single-post-area .post-thumbnail img,
.single-blog-post .post-thumbnail img {
    border-radius: var(--nf-radius-sm);
    transition: transform 420ms var(--nf-ease);
}
.single-post-area:hover .post-thumbnail img,
.single-blog-post:hover .post-thumbnail img { transform: scale(1.045); }

.single-post-area .post-content .post-title,
.single-post-area .post-content > a,
.single-blog-post .post-content .post-title,
.single-blog-post .post-content > a {
    color: var(--nf-heading);
    font-weight: 600;
    line-height: 1.5;
    transition: color var(--nf-ease);
}
.single-post-area .post-content > a:hover,
.single-post-area .post-content .post-title:hover,
.single-blog-post .post-content > a:hover,
.single-blog-post .post-content .post-title:hover { color: var(--nf-brand-2); }

.post-meta a, .post-meta span { color: var(--nf-muted); font-size: 12px; }
.post-meta a:hover { color: var(--nf-brand-2); }

/* 首屏大图：加一层自下而上的渐变，保证压在图上的标题永远可读 */
.single-feature-post {
    border-radius: var(--nf-radius);
    overflow: hidden;
}
.single-feature-post::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%);
    pointer-events: none;
}
.single-feature-post .post-content { position: relative; z-index: 2; }
.single-feature-post .post-content .post-title {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* 首屏右侧的 tab 列表 */
.vizew-nav-tab .nav-link {
    border-radius: var(--nf-radius-sm);
    padding: 10px;
    border: 1px solid transparent;
    transition: background-color var(--nf-ease), border-color var(--nf-ease);
}
.vizew-nav-tab .nav-link:hover { background-color: var(--nf-surface); }
.vizew-nav-tab .nav-link.active {
    background-color: var(--nf-surface-2);
    border-color: rgba(229, 9, 20, .45);
}

/* 分类小标签 */
.post-cata {
    background-color: var(--nf-brand);
    border-radius: 999px;
    padding: 5px 12px 4px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}
.post-cata:hover { background-color: var(--nf-brand-2); color: #fff; }
.post-cata.cata-danger { background-color: var(--nf-brand); }

/* 日期徽章（列表页 badge） */
.badge.bg-danger { background-color: var(--nf-brand) !important; }
.badge.bg-secondary { background-color: #343a40 !important; color: var(--nf-muted) !important; }

/* =========================================================================
   6b. 列表 / 排行页
   ========================================================================= */
/* 列表页顶部的「分类名 + 视图切换」 */
.archive-catagory-view {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--nf-line);
    margin-bottom: 28px !important;
}
.archive-catagory h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
}
.archive-catagory h4 .fa { color: var(--nf-brand); margin-right: 6px; }
.view-options a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--nf-radius-sm);
    border: 1px solid var(--nf-line);
    color: var(--nf-muted);
    margin-left: 6px;
    transition: color var(--nf-ease), border-color var(--nf-ease), background-color var(--nf-ease);
}
.view-options a:hover { color: var(--nf-text); border-color: #3c434a; }
.view-options a.active {
    color: #fff;
    background-color: var(--nf-brand);
    border-color: var(--nf-brand);
}

/* 列表条目做成卡片，原来是裸排在页面底色上，条目之间没有边界感 */
.single-post-area.style-2 {
    background-color: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius);
    padding: 16px;
    margin-bottom: 22px;
    transition: border-color var(--nf-ease), transform var(--nf-ease), box-shadow var(--nf-ease);
}
.single-post-area.style-2:hover {
    border-color: #3c434a;
    transform: translateY(-2px);
    box-shadow: var(--nf-shadow);
}
.single-post-area.style-2 .post-content p { font-size: 14px; line-height: 1.75; color: var(--nf-muted); }
.single-post-area.style-2 .post-content .post-title { font-size: 17px; }
.single-post-area.style-2 .post-meta .post-author,
.single-post-area.style-2 .post-meta .post-date { color: var(--nf-muted); font-size: 12px; }
.single-post-area.style-2 .post-meta i.fa-circle { color: #4a5157; }

/* 分类色标：详情页用 cata-danger、列表页用 cata-success，同一个分类两种颜色，
   观感很割裂。统一收到品牌红。 */
.post-cata.cata-success,
.post-cata.cata-danger,
.post-cata.cata-sm { background-color: var(--nf-brand); color: #fff; }
.post-cata.cata-success:hover,
.post-cata.cata-danger:hover { background-color: var(--nf-brand-2); color: #fff; }

/* 分类页顶部的分类头图 */
.youtube-channel-thumbnail img { border-radius: var(--nf-radius); }

/* =========================================================================
   7. 侧栏组件
   ========================================================================= */
.single-widget {
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius);
    background-color: var(--nf-surface);
    padding: 24px 20px;
}
.single-widget .widget-title,
.single-widget .section-heading h4 { color: var(--nf-heading); }
.single-widget .single-blog-post { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--nf-line-soft); }
.single-widget .single-blog-post:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.share-post-widget a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--nf-surface-2);
    border: 1px solid var(--nf-line);
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--nf-text);
    transition: border-color var(--nf-ease), color var(--nf-ease);
}
.share-post-widget a:hover { border-color: var(--nf-brand); color: var(--nf-brand-2); }

.author-widget .authors--meta-data {
    border-top: 1px solid var(--nf-line-soft);
    justify-content: space-around;
}
.author-widget .authors--meta-data p { color: var(--nf-muted); }
.author-widget .authors--meta-data p .counter { color: var(--nf-heading); font-weight: 700; }

/* =========================================================================
   8. 分页
   ========================================================================= */
.pagination .page-link,
.pagination li a {
    background-color: var(--nf-surface);
    border: 1px solid var(--nf-line);
    color: var(--nf-text);
    border-radius: var(--nf-radius-sm);
    margin: 0 3px;
    transition: background-color var(--nf-ease), border-color var(--nf-ease);
}
.pagination .page-link:hover,
.pagination li a:hover { background-color: var(--nf-surface-2); border-color: var(--nf-brand); color: var(--nf-heading); }
.pagination .page-item.active .page-link,
.pagination li.active a { background-color: var(--nf-brand); border-color: var(--nf-brand); color: #fff; }

/* =========================================================================
   8.5 Bootstrap 语义色归拢
   -------------------------------------------------------------------------
   页面里散着几个 Bootstrap 默认语义类：.text-primary（#0d6efd 蓝）、
   .btn-primary（蓝）、.btn-warning（#ffc107 黄）、.text-success（#198754 绿）。
   它们跟站点的「黑 + 红 + 少量金」完全不是一套色，摆在深色背景上尤其像误触。
   这里不动 markup，只把这几个类的取值接回站点色板。
   ========================================================================= */

/* 首页两列「最新文章」标题用的是 .text-primary，深底上是一片荧光蓝。
   正文级信息就该用正文色，红留给 hover。BS5 的工具类带 !important，得跟上。 */
.list-group-item a.text-primary,
.list-group-item .text-primary { color: var(--nf-text) !important; }
.list-group-item a.text-primary:hover,
.list-group-item a.text-primary:focus { color: var(--nf-brand-2) !important; }
.list-group-item { padding: 12px 16px; }

/* 标签墙的标签按钮 */
.btn-primary {
    --bs-btn-bg: var(--nf-surface-2);
    --bs-btn-border-color: var(--nf-line);
    --bs-btn-color: var(--nf-text);
    --bs-btn-hover-bg: var(--nf-brand);
    --bs-btn-hover-border-color: var(--nf-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nf-brand-2);
    --bs-btn-active-border-color: var(--nf-brand-2);
}

/* 排行页顶部的三个切换按钮。
   金色跟顶部导航的红选中态打架，三个全红又太扎眼——三个按钮同时喊，
   反而看不出当前在哪一个。按标签页控件的常规做法：未选中的安静下来，
   只有选中那个用品牌红。这样既不刺眼，也终于能一眼看出当前选的是哪个。 */
.btn-warning {
    --bs-btn-bg: var(--nf-surface-2);
    --bs-btn-border-color: var(--nf-line);
    --bs-btn-color: var(--nf-muted);
    --bs-btn-hover-bg: var(--nf-surface-2);
    --bs-btn-hover-border-color: var(--nf-brand);
    --bs-btn-hover-color: var(--nf-text);
    font-weight: 600;
}
/* archive-grid.js 会给当前那一个加 .active */
.btn-group .btn-warning.active,
.btn-group .btn-warning.active:hover {
    --bs-btn-bg: var(--nf-brand);
    --bs-btn-border-color: var(--nf-brand);
    --bs-btn-color: #fff;
    background-color: var(--nf-brand);
    border-color: var(--nf-brand);
    color: #fff;
}

/* 「链接复制成功」提示。成功语义保留绿色，但换成深底上不刺眼的那支 */
.text-success { color: #3fb950 !important; }

/* =========================================================================
   9. 页脚
   ========================================================================= */
.footer-area {
    background-color: #08090a;
    border-top: 1px solid var(--nf-line-soft);
    padding-top: 40px;
}
/* 每个 widget 上挂着 .mb-70（70px !important），三列高度又差得远，于是最矮的
   那列下面空出一大片。收到 28px，并且让整块页脚不要再撑那么高。 */
.footer-area .footer-widget.mb-70 { margin-bottom: 28px !important; }
.footer-area .footer-widget .foo-logo.mb-4 { margin-bottom: 14px !important; }
.footer-area .footer-widget .foo-logo img { width: 200px !important; }
.footer-area .footer-widget .widget-title {
    font-size: 15px;
    letter-spacing: .02em;
    padding-left: 11px;
    position: relative;
}
.footer-area .footer-widget .widget-title::before {
    content: "";
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 3px; border-radius: 2px;
    background: var(--nf-brand);
}
.footer-area .footer-widget p { font-size: 13px; line-height: 1.8; color: var(--nf-muted); }
.footer-area .footer-widget .single-twit p { color: var(--nf-muted); }
.footer-area .footer-widget .single-twit p span { color: var(--nf-brand-2); }
.footer-area .copywrite-area {
    border-top: 1px solid var(--nf-line-soft);
    margin-top: 0;
    padding: 16px 0;
}
.footer-area .copywrite-area .copywrite-text { font-size: 12px; color: #79828a; }
.footer-area .copywrite-area .copywrite-text a { color: #79828a; }
.footer-area .copywrite-area .copywrite-text a:hover { color: var(--nf-brand-2); }
/* 友链（customer.css 里已有一套，这里只把颜色接到 token 上）。
   customer.css 给每行 11px 上下内边距，四条链接就撑出 170px，比左边两列都高，
   页脚被它一个人拉长；收到 7px。 */
.footer-area .footer-widget .friend-links a { color: var(--nf-muted); padding-top: 7px; padding-bottom: 7px; }
.footer-area .footer-widget .friend-links a:hover,
.footer-area .footer-widget .friend-links a:focus { color: var(--nf-heading); }

/* =========================================================================
   10. 语言提示条 —— 接到 token，并且不再遮挡首屏
   ========================================================================= */
#lang-prompt-bar {
    background: rgba(8, 9, 10, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nf-line);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}
#lang-switch-btn { background: var(--nf-brand); border-radius: 999px; padding: 5px 14px; font-weight: 600; }
#lang-switch-btn:hover { background: var(--nf-brand-2); color: #fff; }

/* =========================================================================
   11. 回到顶部
   ========================================================================= */
#scrollUp {
    background-color: var(--nf-brand);
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--nf-shadow);
}
#scrollUp:hover { background-color: var(--nf-brand-2); }

/* =========================================================================
   12. 广告位
   注意：广告 <ins> 本身的尺寸、slot、format 一律不碰（AdSense 依赖内联样式
   里的宽高做填充判断）。这里只给「外面」留白，避免广告和正文贴在一起。
   ========================================================================= */
ins.adsbygoogle { display: block; }

/* 由 js/common/ad-fallback.js 打上：确认这个位子不会有广告了（Google 盖章
   unfilled，或广告脚本被拦截 / 加载失败），把预留的 min-height 收掉。
   不这么做的话，<ins> 内联的 min-height:280px 会一直占着位子 —— 首页 5 个
   广告位叠起来就是一屏多的空白。 */
ins.adsbygoogle.nf-ad-empty {
    display: none !important;
}

/* 动效偏好 */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .single-post-area:hover .post-thumbnail img,
    .single-blog-post:hover .post-thumbnail img { transform: none; }
}

/* =========================================================================
   12. 区块与页面骨架之间的呼吸
   -------------------------------------------------------------------------
   模板里这几个主内容区块只有 .mb-80（外边距），没有 padding。
   .post-details-area 还带自己的背景色，于是白卡的上下边缘正好压在背景色的
   起止线上——视觉上就是「贴死了」，而且背景与页面底色的接缝就画在卡片边上。
   统一补上内边距，让背景先于内容开始、晚于内容结束。
   ========================================================================= */
.post-details-area {
    padding-top: 34px;
    padding-bottom: 56px;
}
/* 上面给了 56px 内边距，再叠 80px 外边距就空得过头了。
   让这块深色背景直接铺到页脚，少一道接缝。 */
.post-details-area.mb-80 { margin-bottom: 0 !important; }

/* 白卡自己也要留出下边距：桌面端它是 col-lg-8 的最后一个元素，看不出来；
   但窄屏下 col-lg-4 的侧栏会堆到它正下方，没有这一条就是两张卡糊在一起。 */
.post-details-area .post-details-content { margin-bottom: 30px; }

/* 列表页 / 排行页 / 标签墙：面包屑之下直接就是内容，同样缺一口气 */
.vizew-archive-list-posts-area,
.contact-area { padding-top: 34px; }

@media (max-width: 767.98px) {
    .post-details-area { padding-top: 22px; padding-bottom: 36px; }
    .post-details-area .post-details-content { margin-bottom: 22px; }
    .vizew-archive-list-posts-area,
    .contact-area { padding-top: 22px; }
}

/* =========================================================================
   13. 两处密度问题
   ========================================================================= */

/* 标签墙：模板把每个标签塞进一个 Bootstrap 栅格列（col-4/col-md-2、
   col-6/col-md-3），于是标签被钉在列的起始位置上，短标签后面拖一大片空白，
   看起来松散得不像一组东西。不动 markup，把这两处的栅格行拆成自然流的
   标签云——宽度由内容决定，间距统一。 */
.contact-area .single-widget .row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
}
.contact-area .single-widget .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.contact-area .single-widget .row > [class*="col-"] .single-post-area.mb-30 {
    margin-bottom: 0 !important;
}

/* 首页头部右侧的文章列表：缩略图固定 75px 高，标题却能占四行，
   于是行被标题撑高，缩略图下面空出一大块。标题限两行，多的省略——
   点进去之前左边的大图预览本来就会显示完整标题。 */
.vizew-nav-tab .single-blog-post.style-2 .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* line-clamp 只在 -webkit-box 下生效，给个 max-height 兜底，
       万一哪天浏览器不认，也不会让标题无限撑高 */
    max-height: 3.2em;
    line-height: 1.6;
}
.vizew-nav-tab .single-blog-post.style-2 .post-thumbnail img {
    /* 原本只给了宽高，图片比例不对时会拉伸变形 */
    object-fit: cover;
}