/* =============================================================
   安盾新闻网 · 宽屏炫酷新闻门户模板 (EyouCMS)
   style.css — 设计令牌 / 全站布局 / 全设备自适应
   无任何第三方依赖，仅原生 CSS
   视觉体系：深海军蓝沉浸式头部 + 电光蓝/青渐变点缀 + 浅冷灰正文
   ============================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 色彩：深色头部 + 电光蓝渐变 + 浅色正文 */
    --c-electric: #2E6BFF;      /* 电光蓝（主强调） */
    --c-electric-dark: #1E4FD6;
    --c-cyan: #00C2FF;          /* 青色（次强调） */
    --c-violet: #7C5CFF;        /* 紫蓝（渐变第三色） */

    --c-dark: #060D1F;          /* 深海军蓝底 */
    --c-dark-2: #0A1226;        /* 顶部信息条 */
    --c-dark-3: #0B1530;        /* 主导航 */
    --c-dark-panel: #0E1B3D;    /* 深色下拉面板 */

    --c-bg: #F4F6FB;            /* 正文浅冷灰背景 */
    --c-card: #FFFFFF;

    --ink: #141D33;             /* 标题深色 */
    --ink-2: #2A3550;           /* 正文 */
    --ink-3: #5A6B85;           /* 次要文字 */
    --muted: #93A3BE;           /* 弱化文字 */
    --line: #E4E9F4;            /* 浅色分隔线 */

    --c-hot: #F26D5B;           /* 热度橙红 */
    --c-danger: #E5453B;        /* 必填标记 / 校验提示（表单用） */
    --tag-blue-bg: #EAF1FF;
    --tag-cyan-bg: #E6FAF9;
    --tag-cyan-fg: #00A8B5;

    /* 头部深色系文字 */
    --hd-text: #C7D4EA;
    --hd-muted: #8FA3C4;
    --hd-faint: #5F7BB0;

    /* 渐变 */
    --grad-main: linear-gradient(90deg, var(--c-electric), var(--c-cyan));
    --grad-brand: linear-gradient(135deg, var(--c-electric), var(--c-cyan));
    --grad-num: linear-gradient(180deg, var(--c-electric), var(--c-cyan));
    --grad-violet: linear-gradient(90deg, var(--c-electric), var(--c-violet));

    /* 字体 */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;

    /* 尺寸：宽屏大容器 + 侧栏宽度（列表页 / 详情页侧栏共用，
       改这一处即可整体收放，首页右栏另有自己的 340px 参数） */
    --container: 1360px;
    --sidebar-w: 330px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;

    /* 阴影 */
    --shadow-card: 0 12px 32px rgba(20, 40, 90, 0.08);
    --shadow-card-hover: 0 18px 44px rgba(46, 107, 255, 0.16);
    --shadow-deep: 0 20px 50px rgba(2, 8, 24, 0.45);
}

/* ---------- 2. 基础重置 ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

button {
    font-family: inherit;
    cursor: pointer;
}

time,
i,
em {
    font-style: normal;
}

time {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--c-electric);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--c-electric);
    outline-offset: 2px;
}

/* ---------- 3. 通用工具 ---------- */
.container {
    max-width: calc(var(--container) + 48px);
    margin-inline: auto;
    padding-inline: 24px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 100;
    padding: 8px 16px;
    background: var(--grad-main);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* 分类小标签 */
.tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border-radius: 99px;
    white-space: nowrap;
}

.tag-cyan {
    color: var(--tag-cyan-fg);
    background: var(--tag-cyan-bg);
}

/* 空板块隐藏（main.js 判空后添加 .is-empty，:has 规则随之重排布局） */
.js-empty-hide.is-empty {
    display: none !important;
}

/* ---------- 4. 板块标题：渐变竖条 + 英文点缀 ---------- */
.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.sec-head-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.sec-head h2,
.sec-title {
    position: relative;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
    padding-left: 17px;
    letter-spacing: 0.5px;
}

.sec-head h2::before,
.sec-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    border-radius: 3px;
    background: var(--grad-brand);
}

.sec-en {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    white-space: nowrap;
}

.more {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-electric);
    white-space: nowrap;
}

.more span {
    margin-left: 2px;
}

.more:hover {
    color: var(--c-electric-dark);
    text-shadow: 0 0 12px rgba(46, 107, 255, 0.35);
}

/* ---------- 5. 品牌徽标 + 站名 + 搜索（并入单行头 .mainnav） ---------- */
/* LOGO 裸显示：无底板、无圆角框，仅保留贴合图形的柔光；
   品牌区本身也不给底色——悬停时不出现背景色块，只有 LOGO 柔光增强 */
.brand {
    position: relative;
    display: inline-flex;
    align-items: stretch;   /* 徽标与右侧文字块整体等高（图与字一样高，改字号自动跟随） */
    gap: 15px;
    padding: 7px 22px 7px 6px;
    border-radius: 16px;
    flex-shrink: 0;
}

.brand:hover .brand-mark img {
    filter: drop-shadow(0 8px 22px rgba(0, 194, 255, 0.62));
}

.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    height: auto;
    align-self: stretch;    /* 高度 = 文字块高度（站名 + 英文副标） */
    min-width: 56px;
    flex-shrink: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* 含 LOGO 图片时自适应为横向徽标（宽 logo 完整显示，不再被压成小图） */
.brand-mark:has(img) {
    width: auto;
    min-width: 56px;
    max-width: 260px;
    padding: 0;
}

.brand-mark img {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    max-height: 56px;       /* 极端高文字块时的保险上限 */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 194, 255, 0.4));
}

/* 兜底盾牌（未上传 LOGO 时显示）：与 LOGO 图片同策略——高度跟随文字块，
   aspect-ratio 保证 SVG 始终正方形，不因拉伸变形 */
.brand-mark-shield {
    position: relative;
    z-index: 1;
    display: none;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    color: #7FD8FF;
}

.brand-mark.no-logo .brand-mark-shield {
    display: block;
}

/* 品牌文字区：站名 + 英文副标 */
.brand-word {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding-left: 17px;
}

/* 站名左侧的竖向霓虹分隔线：强化品牌区与导航区的层级分界，更显大气 */
.brand-word::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(0, 194, 255, 0), rgba(0, 194, 255, 0.85) 45%, rgba(46, 107, 255, 0.1));
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.55);
}

.brand-name {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(110deg, #FFFFFF 22%, #A9CDFF 60%, #7FE6FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 26px rgba(46, 107, 255, 0.45);
}

.brand-sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3.6px;
    color: var(--hd-faint);
    white-space: nowrap;
}

.brand-sub::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-main);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.6);
}

/* 品牌行右侧：图标工具区（搜索弹窗 + 会员 + 多语言，未开启的功能自动隐藏）
   靠右由 .nav-list 的 margin-left:auto 统一完成，此处不再单独推右 */
.hd-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 玻璃图标按钮（搜索 / 会员等通用） */
.hd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--hd-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    cursor: pointer;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.hd-icon-btn svg {
    width: 22px;
    height: 22px;
}

.hd-icon-btn:hover,
.hd-icon-btn[aria-expanded="true"] {
    color: #fff;
    background: linear-gradient(135deg, rgba(46, 107, 255, 0.85), rgba(0, 194, 255, 0.7));
    border-color: transparent;
    box-shadow: 0 12px 26px -12px rgba(0, 194, 255, 0.95);
    transform: translateY(-1px);
}

/* 搜索弹窗（点击图标展开） */
.search-pop {
    position: relative;
}

.search-pop-panel {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    z-index: 70;
    width: min(384px, calc(100vw - 40px));
    padding: 14px;
    background: linear-gradient(160deg, rgba(17, 29, 63, 0.97), rgba(9, 17, 40, 0.97));
    border: 1px solid rgba(120, 180, 255, 0.28);
    border-radius: 14px;
    box-shadow:
        0 34px 80px -32px rgba(2, 8, 26, 0.98),
        0 22px 56px -30px rgba(46, 107, 255, 0.7);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

/* 弹窗小箭头 */
.search-pop-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 15px;
    width: 10px;
    height: 10px;
    background: linear-gradient(160deg, rgba(17, 29, 63, 0.97), rgba(17, 29, 63, 0.97));
    border-top: 1px solid rgba(120, 180, 255, 0.28);
    border-left: 1px solid rgba(120, 180, 255, 0.28);
    transform: rotate(45deg);
}

.search-pop.is-open .search-pop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 弹窗内的搜索表单 */
.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-form input[type="text"],
.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #EAF1FF;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
    border-color: rgba(0, 194, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.12);
}

.search-form input::placeholder {
    color: var(--hd-muted);
}

.search-form button,
.search-form input[type="submit"] {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--grad-main);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.search-form button:hover,
.search-form input[type="submit"]:hover {
    filter: brightness(1.12);
    box-shadow: 0 14px 30px -14px rgba(0, 194, 255, 0.95);
}

/* 面板内 [hidden] 一律隐藏（作者 display 会覆盖浏览器默认的 hidden 行为） */
.search-pop-panel [hidden] {
    display: none !important;
}

/* 空关键词提示 */
.search-tip {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #FFB4A8;
}

/* 分区标题（最近搜索） */
.search-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.search-sec-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--hd-muted);
}

.search-hist {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* 历史：清空按钮 */
.search-hist-clear {
    padding: 0;
    font-size: 12px;
    color: var(--hd-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.search-hist-clear:hover {
    color: #EAF1FF;
}

/* 最近搜索（浏览器本地保存，可单条删除或清空） */
.search-hist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-hist-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px 6px 5px 12px;
    font-size: 13px;
    color: #C9D8F5;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.search-hist-item:hover {
    color: #fff;
    border-color: rgba(0, 194, 255, 0.5);
}

.search-hist-link {
    max-width: 190px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-hist-del {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--hd-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.search-hist-del:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

/* 会员入口（eyou:user type='login' 生成的链接）：未登录为图标，登录后显示会员名 */
.hd-users {
    display: inline-flex;
    align-items: center;
}

.hd-users a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 160px;
    height: 40px;
    padding: 0 11px;
    font-size: 13px;
    color: var(--hd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.hd-users a svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
}

.hd-users a:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(46, 107, 255, 0.85), rgba(0, 194, 255, 0.7));
    border-color: transparent;
    box-shadow: 0 12px 26px -12px rgba(0, 194, 255, 0.95);
}

/* 多语言切换（后台开启才渲染）：小胶囊，含语言图标与名称 */
.hd-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hd-lang-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 130px;
    height: 40px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #9FC6FF;
    white-space: nowrap;
    overflow: hidden;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.3);
    border-radius: 999px;
    transition: color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hd-lang-item img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

.hd-lang-item em {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-lang-item:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(46, 107, 255, 0.9), rgba(0, 194, 255, 0.75));
    border-color: transparent;
    box-shadow: 0 12px 26px -12px rgba(0, 194, 255, 0.95);
}

/* ---------- 6. 单行头：LOGO + 导航 + 搜索（深色渐变，吸顶） ---------- */
.mainnav {
    --nav-h: 86px;
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        radial-gradient(ellipse 36% 160% at 8% 50%, rgba(46, 107, 255, 0.24), rgba(46, 107, 255, 0) 100%),
        linear-gradient(90deg, #07112A 0%, #0B1530 52%, #0A1738 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* 底边流光扫描线 */
.mainnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(0, 194, 255, 0) 0%, rgba(0, 194, 255, 0.8) 18%, rgba(124, 92, 255, 0.62) 46%, rgba(0, 194, 255, 0.9) 70%, rgba(0, 194, 255, 0) 100%);
    background-size: 220% 100%;
    animation: navShine 6s linear infinite;
    pointer-events: none;
}

@keyframes navShine {
    0% {
        background-position: 130% 0;
    }

    100% {
        background-position: -130% 0;
    }
}

/* 吸顶后转为毛玻璃，层次更轻 */
.mainnav.is-scrolled {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    background: rgba(7, 14, 34, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.mainnav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: var(--nav-h);
}

/* 导航菜单：靠右显示，紧贴右侧工具图标（搜索/会员/多语言）左侧 */
.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;      /* 吞掉弹性空白，把导航与工具区一起压向右侧 */
    min-width: 0;
}

.nav-item {
    position: relative;
}

/* 导航项做成圆角胶囊：hover 时整块点亮，行高加高后视觉更饱满大气 */
.nav-link {
    position: relative;
    display: block;
    padding: 0 17px;
    font-size: 16px;
    font-weight: 500;
    line-height: calc(var(--nav-h) - 22px);
    margin: 11px 0;
    color: var(--hd-text);
    white-space: nowrap;
    border-radius: 10px;
    transition: color 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease;
}

.nav-item:hover > .nav-link {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(46, 107, 255, 0.2));
    text-shadow: 0 0 18px rgba(0, 194, 255, 0.6);
}

.nav-item.active > .nav-link {
    font-weight: 700;
    background: linear-gradient(90deg, #7FD8FF, #ffffff 62%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 悬停 / 当前栏目：底部渐变条（收进胶囊内部，两侧留出圆角） */
.nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-main);
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.75);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.nav-item:hover > .nav-link::after,
.nav-item.active > .nav-link::after {
    transform: scaleX(1);
}

/* 汉堡按钮（桌面隐藏，≤920 显示） */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0;
    font-size: 14px;
    color: var(--hd-text);
    background: none;
    border: 0;
}

.nav-toggle-box {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
}

.nav-toggle-box i {
    height: 2px;
    border-radius: 1px;
    background: var(--hd-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 搜索框样式已上移至第 5 节「品牌行」 */

/* 二级下拉（深色面板） */
.subnav {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 60;
    min-width: 156px;
    padding: 6px 0;
    background: var(--c-dark-panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-deep);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav-item:hover > .subnav,
.nav-item:focus-within > .subnav {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.subnav a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--hd-text);
    white-space: nowrap;
}

.subnav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* 无子栏目时隐藏下拉与其展开按钮（兼容部分版本 has_children 判断不准的情况） */
.subnav:empty {
    display: none;
}

.nav-item:has(> .subnav:empty) > .sub-toggle {
    display: none;
}

/* 移动端子栏目展开按钮（桌面隐藏）：必须 flex 居中 + 伪元素 block 化，
   否则行内伪元素上 width/height/rotate 全失效，箭头会退化成一根竖线 */
.sub-toggle {
    display: none;
    position: absolute;
    right: 6px;
    top: 0;
    width: 44px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
}

.sub-toggle::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(199, 212, 234, 0.75);
    border-bottom: 2px solid rgba(199, 212, 234, 0.75);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.sub-open > .sub-toggle::before {
    transform: rotate(-135deg) translateY(-2px);
}

/* ---------- 7. 快讯条：深色玻璃带 + 渐变跑马灯 ---------- */
.news-ticker {
    position: relative;
    background: linear-gradient(90deg, #050B1A 0%, #0A1430 52%, #06101F 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.95);
}

.ticker-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 11px;
}

.ticker-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--grad-main);
    border: 0;
    border-radius: 99px;
    letter-spacing: 2px;
    box-shadow: 0 12px 26px -14px rgba(0, 194, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.ticker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    animation: tickerBlink 1.4s ease-in-out infinite;
}

/* 快讯条右侧“更多”入口 */
.ticker-more {
    flex-shrink: 0;
    padding: 3px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 99px;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ticker-more span {
    margin-left: 2px;
}

.ticker-more:hover {
    color: #fff;
    background: var(--grad-main);
    border-color: transparent;
    box-shadow: 0 12px 26px -14px rgba(0, 194, 255, 0.95);
}

@keyframes tickerBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* 两端渐隐，滚动文字淡出而非硬切 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 36s linear infinite;
}

.news-ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-list {
    display: flex;
    align-items: center;
}

.ticker-list li {
    display: flex;
    align-items: center;
}

/* 条目之间的菱形分隔符 */
.ticker-list li::after {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    margin: 0 28px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.75);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(219, 234, 254, 0.9);
}

.ticker-list a {
    font-size: 14.5px;
    letter-spacing: 0.2px;
    color: #EAF1FF;
    white-space: nowrap;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.ticker-list a:hover {
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.75);
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 无快讯数据时整条隐藏（两份列表均为空） */
.news-ticker:has(.ticker-list:first-child:empty) {
    display: none;
}

/* ---------- 8. 首页焦点区：深色极光 ---------- */
.site-main {
    padding-block: 0 64px;
}

/* 首页（存在深色 hero 时）顶帖无浅色缝隙 */
.site-main:has(> .hero) {
    padding-top: 0;
}

.hero {
    background-color: #070E26;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px),
        radial-gradient(ellipse 55% 62% at 14% 4%, rgba(46, 107, 255, 0.4), rgba(46, 107, 255, 0) 100%),
        radial-gradient(ellipse 46% 56% at 88% 82%, rgba(124, 92, 255, 0.3), rgba(124, 92, 255, 0) 100%),
        linear-gradient(180deg, #0B1738 0%, #070E26 72%, #060C1E 100%);
    background-size: 24px 24px, auto, auto, auto;
    padding-block: 44px 52px;
}

.hero-inner {
    display: block;
}

/* ---------- 8b. 焦点模块：左侧大图 + 右侧热门列表（小圆角 + 流光描边，两列联动） ---------- */

/* 流光角度自定义属性：沿边框旋转的光带（不支持时静态显示，不影响布局） */
@property --focus-angle {
    syntax: "<angle>";
    initial-value: 210deg;
    inherits: false;
}

@keyframes focusSpin {
    to {
        --focus-angle: 570deg;
    }
}

@keyframes focusPulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
    }

    50% {
        opacity: 0.62;
        box-shadow: 0 0 18px rgba(0, 194, 255, 0.95);
    }
}

@keyframes focusSweep {
    from {
        transform: translateX(-130%);
    }

    to {
        transform: translateX(240%);
    }
}

/* 两列等高对齐：高度由右侧列表（8 条）自然决定，左图撑满同高。
   在 360–430px 宽的上传缩略图下，此高度区间图片只会轻微裁切、不会被放大，画质清晰 */
.focus {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    min-height: 420px;
    overflow: hidden;
    background: #0B1633;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
        0 44px 92px -42px rgba(2, 8, 26, 0.96),
        0 26px 74px -48px rgba(46, 107, 255, 0.85);
}

/* 流光描边：锥形渐变光带绕边框巡航 */
.focus::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--focus-angle),
            rgba(0, 194, 255, 0) 0deg 296deg,
            rgba(46, 107, 255, 0.9) 318deg,
            #00C2FF 342deg,
            rgba(0, 194, 255, 0) 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: focusSpin 7s linear infinite;
}

/* 左：图片舞台（多张图叠放，按右侧悬停切换）。
   两列等高对齐：图区撑满整列高度（与右侧列表同高），图片用 cover 居中裁切填充。
   16:9 原图在这个高度下只会纵向微裁、不会被放大，清晰度不受影响；
   非 16:9 的图也只裁切不拉伸。 */
.focus-stage {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    background: #0A1226;
}

/* 中缝过渡：图片右缘向内轻微压暗，与右侧列表面板自然衔接，消除"硬切"感。
   z-index:1 —— 压在图片之上、但在底部信息胶囊（z-index:2）之下 */
.focus-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow:
        inset -54px 0 60px -46px rgba(5, 11, 28, 0.9),
        inset 0 -1px 0 0 rgba(0, 194, 255, 0.16);
}

.focus-pic {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* object-fit: cover + 容器 16:9 = 与缩略图同比例，图片原样铺满、无额外放大裁切。
   已取消 focusZoom 缓慢缩放动效（用户要求：静止显示，避免观感发虚） */
.focus-pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片底部不再压黑色渐变，仅留一条霓虹渐变细线收边 */
.focus-pic::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, var(--c-electric), rgba(0, 194, 255, 0.85) 45%, rgba(0, 194, 255, 0));
    opacity: 0.9;
    pointer-events: none;
}

.focus-pic-meta {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 7px;
    font-size: 12.5px;
    color: rgba(226, 236, 252, 0.95);
    background: rgba(5, 11, 28, 0.58);
    border: 1px solid rgba(140, 190, 255, 0.28);
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 10px 26px -14px rgba(2, 8, 26, 0.9);
}

.focus-pic-meta em {
    padding: 4px 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(46, 107, 255, 0.95), rgba(0, 194, 255, 0.82));
    box-shadow: 0 6px 16px -8px rgba(0, 194, 255, 0.9);
}

/* 默认显示第 1 张；鼠标经过右侧标题，切换到对应配图（纯 CSS :has 驱动） */
.focus-pic:first-child {
    opacity: 1;
}

.focus:has(.focus-item:hover) .focus-pic:first-child {
    opacity: 0;
}

/* 规则按最大条数写足：右侧列表每加一条，这里就要多补一行（与 index.htm 的 row 保持一致） */
.focus:has(.focus-item:nth-child(1):hover) .focus-pic:nth-child(1),
.focus:has(.focus-item:nth-child(2):hover) .focus-pic:nth-child(2),
.focus:has(.focus-item:nth-child(3):hover) .focus-pic:nth-child(3),
.focus:has(.focus-item:nth-child(4):hover) .focus-pic:nth-child(4),
.focus:has(.focus-item:nth-child(5):hover) .focus-pic:nth-child(5),
.focus:has(.focus-item:nth-child(6):hover) .focus-pic:nth-child(6),
.focus:has(.focus-item:nth-child(7):hover) .focus-pic:nth-child(7),
.focus:has(.focus-item:nth-child(8):hover) .focus-pic:nth-child(8) {
    opacity: 1;
}

/* 右：热门列表面板（暗纹网点 + 底部扫描亮线） */
.focus-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(rgba(120, 170, 255, 0.055) 1px, rgba(120, 170, 255, 0) 1.5px),
        linear-gradient(180deg, rgba(11, 22, 51, 0.95), rgba(8, 16, 38, 0.95));
    background-size: 20px 20px, auto;
}

.focus-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 标题栏下的霓虹扫描短线 */
.focus-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 132px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-electric), rgba(0, 194, 255, 0));
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.8);
}

.focus-head h2 {
    display: flex;
    align-items: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
}

.focus-head h2::before {
    content: "";
    width: 4px;
    height: 18px;
    margin-right: 10px;
    background: var(--grad-main);
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.8);
}

.focus-en {
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #8FD9FF;
    border: 1px solid rgba(0, 194, 255, 0.4);
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.08);
    animation: focusPulse 2.6s ease-in-out infinite;
}

.focus-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    counter-reset: fhot;
}

.focus-item {
    counter-increment: fhot;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.focus-item:last-child {
    border-bottom: 0;
}

/* 行高保持舒适值：条数增加时由模块整体增高来容纳，不压缩行距 */
.focus-item a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px 15px 22px;
    overflow: hidden;
    transition: background-color 0.22s ease;
}

/* 悬停：左侧亮条 + 底纹 */
.focus-item a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: var(--grad-main);
    transform: scaleY(0);
    transition: transform 0.24s ease;
}

/* 悬停：一道流光扫过列表行 */
.focus-item a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg, rgba(0, 194, 255, 0), rgba(0, 194, 255, 0.14), rgba(0, 194, 255, 0));
    transform: translateX(-130%);
    pointer-events: none;
}

.focus-item:hover a {
    background: linear-gradient(90deg, rgba(46, 107, 255, 0.16), rgba(0, 194, 255, 0.05) 62%, rgba(0, 194, 255, 0));
}

.focus-item:hover a::before {
    transform: scaleY(1);
}

.focus-item:hover a::after {
    animation: focusSweep 0.9s ease;
}

.focus-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(205, 220, 244, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.focus-num::before {
    content: counter(fhot);
}

.focus-item:nth-child(-n+3) .focus-num {
    color: #fff;
    border-color: transparent;
    background: var(--grad-main);
    box-shadow: 0 8px 18px -10px rgba(0, 194, 255, 0.95);
}

/* 悬停行：序号徽章同步点亮（含 4-6 名） */
.focus-item:hover .focus-num {
    color: #fff;
    border-color: transparent;
    background: var(--grad-main);
    box-shadow: 0 8px 18px -10px rgba(0, 194, 255, 0.95);
}

/* 标题恒定单行截断：长标题不再折成两行，8 行条目等高、行距节奏一致 */
.focus-ttl {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #D6E1F6;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: color 0.2s ease;
}

/* 悬停行：标题点亮为渐变流光字 */
.focus-item:hover .focus-ttl {
    background: linear-gradient(90deg, #7FD8FF, #ffffff 65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 9. 首页浅色板块通用 ---------- */
.section {
    padding-top: 60px;
}

.card {
    position: relative;
    background: var(--c-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.card:hover,
.card:has(a:hover) {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* 悬停时的渐变描边光环 */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-main);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

a.card:hover::after,
.card:has(a:hover)::after {
    opacity: 0.55;
}

/* ---------- 10. 最新资讯：左最新文章卡片流 + 右广告/热门标签（右栏样式见 11b 共用定义） ---------- */
.latest-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

/* 左栏容器：板块标题与文章列表同宽，标题行「更多资讯」的右缘因此与列表卡片右缘对齐；
   右栏 aside 与左栏同起于布局顶部，于是侧栏顶部与板块标题顶部齐平 */
.latest-main {
    min-width: 0;
}

/* 卡片流：复用列表页 .news-item 卡片，随页面自然下滚（右栏同速跟随，不吸顶）。
   不用容器内滚动——卡片单条约 165px，限高会只剩 4~5 条，信息密度反而下降 */
.latest-feed {
    gap: 18px;
}

/* 卡片缩略图列略窄于列表页（230px），让首页卡片更紧凑 */
.latest-feed .news-item {
    grid-template-columns: 240px minmax(0, 1fr);
}

/* 首条「最新」角标 */
.news-flag {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--grad-main);
    border-radius: 99px;
    box-shadow: 0 2px 8px rgba(46, 107, 255, 0.32);
}

/* ---------- 11. 栏目速览：自适应聚合块（无文章栏目自动隐藏） ---------- */
.channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* 强调色按列循环，增强板块辨识度 */
.channel-block {
    --accent: var(--c-electric);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 12px;
    overflow: hidden;
}

.channel-block:nth-child(2) { --accent: var(--c-cyan); }
.channel-block:nth-child(3) { --accent: var(--c-violet); }
.channel-block:nth-child(4) { --accent: var(--c-hot); }
.channel-block:nth-child(5) { --accent: var(--c-electric); }
.channel-block:nth-child(6) { --accent: var(--c-cyan); }

/* 顶部强调细线 */
.channel-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 82%);
    opacity: 0.9;
}

.channel-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.channel-block-head h3 {
    position: relative;
    padding-left: 13px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: 0.5px;
}

.channel-block-head h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: var(--accent);
}

.channel-more {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.channel-more span {
    margin-left: 2px;
}

.channel-more:hover {
    color: var(--accent);
}

/* 首条：带缩略图焦点行 */
.channel-feature-li {
    padding: 4px 0 12px;
}

.channel-feature-li a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.cf-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--c-bg);
}

.cf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.channel-feature-li:hover .cf-thumb img {
    transform: scale(1.06);
}

.cf-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cf-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.channel-feature-li:hover .cf-title {
    color: var(--accent);
}

.cf-desc {
    font-size: 12.5px;
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-time {
    font-size: 12px;
    color: var(--muted);
}

.channel-block-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
}

.channel-block-list li + li {
    border-top: 1px dashed var(--line);
}

.channel-block-list li::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}

.channel-block-list a {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.channel-block-list a:hover {
    color: var(--accent);
}

.channel-block-list time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
}

/* ---------- 11b. 最新资讯右栏：广告 / 热门标签 ----------
   右栏随页面自然滚动（不做吸顶）：作为普通栅格列，滚出视口即随页面上移。
   排列顺序 = 广告位 → 热门标签 → 广告位，与左栏文章流同顶对齐 */
.latest-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 单图广告位 */
.ad-slot {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease;
}

.ad-slot:hover {
    box-shadow: var(--shadow-card-hover);
}

.ad-link {
    display: block;
}

.ad-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.ad-slot:hover .ad-img {
    transform: scale(1.04);
}

.ad-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    padding: 2px 8px;
    font-size: 11px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(6, 13, 31, 0.5);
    border-radius: 99px;
    pointer-events: none;
}

/* 热门标签卡容器 */
.hot-tags {
    padding: 18px 20px 20px;
}

.hot-tags-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.hot-tags-head h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.hot-tags-en {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted);
}

.hot-tags-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 热门标签：随机配色 + 按热度分大小。
   颜色为 10 组「浅底深字」循环（nth-child 轮换，视觉随机，同一标签颜色稳定），
   每组底色与文字色相刻意错开且明度差距大，保证对比清晰不糊字 */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-2);
    background: var(--tag-blue-bg);
    border: 1px solid rgba(20, 29, 51, 0.06);
    border-radius: 99px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* 10 组随机配色（浅底 / 深字交替轮换） */
.hot-tags-body .tag-pill:nth-child(10n + 1) { background: #FFE9E3; color: #C0392B; }
.hot-tags-body .tag-pill:nth-child(10n + 2) { background: #FFF3D6; color: #B26A00; }
.hot-tags-body .tag-pill:nth-child(10n + 3) { background: #FDF6C7; color: #8A6D00; }
.hot-tags-body .tag-pill:nth-child(10n + 4) { background: #E3F5E1; color: #1E7A34; }
.hot-tags-body .tag-pill:nth-child(10n + 5) { background: #DCF5F2; color: #0B7C74; }
.hot-tags-body .tag-pill:nth-child(10n + 6) { background: #E1EFFE; color: #1D5FD6; }
.hot-tags-body .tag-pill:nth-child(10n + 7) { background: #EEE9FE; color: #6A3BD8; }
.hot-tags-body .tag-pill:nth-child(10n + 8) { background: #FDE7F1; color: #C22583; }
.hot-tags-body .tag-pill:nth-child(10n + 9) { background: #EFEAE4; color: #6E4A2E; }
.hot-tags-body .tag-pill:nth-child(10n + 10) { background: #E8ECF1; color: #3D4A5C; }

/* 悬停统一转主渐变底白字（须写在随机配色之后，同权重靠后生效） */
.hot-tags-body .tag-pill:hover {
    transform: translateY(-2px);
    color: #fff;
    background: var(--grad-main);
    box-shadow: 0 6px 16px rgba(46, 107, 255, 0.35);
}

.tag-pill-txt {
    white-space: nowrap;
}

.tag-pill-num {
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    color: rgba(20, 29, 51, 0.5);
    background: rgba(255, 255, 255, 0.75);
    padding: 1px 6px;
    border-radius: 99px;
    transition: color 0.18s ease, background 0.18s ease;
}

.tag-pill:hover .tag-pill-num {
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
}

/* 二级 / 三级：只区分字号与字重（颜色统一走上面的随机轮换） */
.tag-pill.is-lv2 {
    font-size: 14px;
    font-weight: 700;
}

.tag-pill.is-lv3 {
    font-size: 15px;
    font-weight: 800;
}

/* ---------- 12. 榜单列表（首页「热门榜单」模块已删除；.rank-list 基础样式保留，
   供列表页侧栏 .side-block 内的榜单继续使用） ---------- */
.rank-list {
    counter-reset: rank;
    display: flex;
    flex-direction: column;
}

.rank-list li {
    counter-increment: rank;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 0;
}

.rank-list li + li {
    border-top: 1px dashed var(--line);
}

.rank-list li::before {
    content: counter(rank);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border: 1px solid rgba(46, 107, 255, 0.25);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.rank-list li:nth-child(-n + 3)::before {
    color: #fff;
    background: var(--grad-num);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(46, 107, 255, 0.3);
}

.rank-list a {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.rank-list a:hover {
    color: var(--c-electric);
}

/* ---------- 13. 面包屑与页面头部 ---------- */
.crumb {
    padding: 14px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.crumb a {
    color: var(--ink-3);
}

.crumb a:hover {
    color: var(--c-electric);
}

/* 分隔符与当前项：联系我们 / 搜索页手工面包屑复用同一套浅色底样式 */
.crumb-sep {
    margin: 0 8px;
    color: var(--muted);
}

.crumb-cur {
    color: var(--ink-3);
}

/* 深色横幅下方的面包屑：贴住正文区顶部，间距交给下方模块自己控制 */
.gb-hero + .crumb,
.search-hero + .crumb {
    margin-bottom: 0;
}

.page-head {
    margin-bottom: 22px;
}

.page-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: break-word;
}

.page-intro {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
}

.page-narrow {
    max-width: 900px;
}

/* ---------- 13.5 搜索结果页（紧凑横幅 + 双栏结果卡） ---------- */
.search-hero {
    position: relative;
    padding: 26px 0 30px;
    color: #EAF1FF;
    background-color: var(--c-dark);
    background-image:
        radial-gradient(ellipse 60% 80% at 12% 0%, rgba(46, 107, 255, 0.42), rgba(46, 107, 255, 0) 100%),
        radial-gradient(ellipse 50% 70% at 88% 10%, rgba(0, 194, 255, 0.24), rgba(0, 194, 255, 0) 100%);
    overflow: hidden;
}

.search-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(46, 107, 255, 0), rgba(0, 194, 255, 0.6), rgba(46, 107, 255, 0));
}

.search-hero-inner {
    position: relative;
    z-index: 1;
}

.search-hero-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.search-hero-kw {
    max-width: 100%;
    padding: 3px 14px;
    font-size: 19px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    background: linear-gradient(135deg, rgba(46, 107, 255, 0.95), rgba(0, 194, 255, 0.85));
    border-radius: 9px;
    box-shadow: 0 10px 26px -12px rgba(0, 194, 255, 0.9);
    overflow-wrap: break-word;
}

.search-hero-sub {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--hd-muted);
}

/* 结果区：顶栏（计数 + 排序） */
.search-body {
    padding-top: 24px;
}

.search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.search-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink-3);
}

.search-count::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 3px;
    background: var(--grad-brand);
}

.search-count-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-electric);
    font-variant-numeric: tabular-nums;
}

.search-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--muted);
}

.search-sort svg {
    width: 15px;
    height: 15px;
}

/* 结果卡：宽屏双栏，轻边框卡片，图片左、文字右 */
.search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.search-results .news-item {
    grid-template-columns: 188px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(20, 40, 90, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.search-results .news-item:hover {
    transform: translateY(-3px);
    border-color: rgba(46, 107, 255, 0.4);
    box-shadow: var(--shadow-card-hover);
}

.search-results .news-thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
}

.search-results .news-body {
    gap: 6px;
    padding-block: 0;
}

.search-results .news-title {
    font-size: 16px;
    line-height: 1.5;
}

.search-results .news-desc {
    font-size: 13.5px;
    line-height: 1.7;
}

.search-results .news-meta {
    gap: 12px;
    padding-top: 4px;
    font-size: 12.5px;
}

.search-results .news-cat {
    padding: 2px 10px;
    font-size: 11.5px;
}

/* 关键词高亮（脚本只包 mark，不拼接 HTML） */
mark.search-kw {
    padding: 0 2px;
    color: var(--c-electric-dark);
    background: linear-gradient(180deg, rgba(0, 194, 255, 0) 58%, rgba(0, 194, 255, 0.34) 58%);
    border-radius: 3px;
}

/* 空结果（列表内没有 .news-item 时生效；服务端 empty 兜底文案照常可见） */
.search-results:not(:has(.news-item)) {
    display: block;
    padding: 54px 24px;
    font-size: 15px;
    color: var(--muted);
    text-align: center;
    background: var(--c-card);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.search-results:not(:has(.news-item))::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A3BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3Cpath d='M8.7 11h4.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 中等屏幕：压缩缩略图，双栏文字不至于过窄 */
@media (max-width: 1280px) {
    .search-results .news-item {
        grid-template-columns: 156px minmax(0, 1fr);
        gap: 14px;
    }
}

/* 窄屏：结果改为单栏 */
@media (max-width: 1024px) {
    .search-results {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-results .news-item {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 18px;
        padding: 16px;
    }
}

@media (max-width: 640px) {
    .search-hero {
        padding: 20px 0 24px;
    }

    .search-hero-title {
        gap: 8px;
        font-size: 21px;
    }

    .search-hero-kw {
        padding: 2px 10px;
        font-size: 15px;
    }

    .search-results .news-item {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .search-results .news-title {
        font-size: 15px;
    }

    .search-results .news-meta {
        gap: 8px;
    }

    .search-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ---------- 14. 图文新闻列表（列表页 / 搜索页） ---------- */
.news-list {
    display: grid;
    gap: 18px;
}

/* 缩略图改「随卡片等高拉伸」（不再固定 3:2）：卡片高度由右侧文字区决定，
   图片自动填满，消除文字区与图片高度差在卡片内留下的空白带 */
.news-list .news-thumb {
    min-height: 120px;
}

.news-item {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
    background: var(--c-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.news-item:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 107, 255, 0.32);
    box-shadow: var(--shadow-card-hover);
}

.news-thumb {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg);
}

/* 绝对定位：图片不参与卡片高度计算，缩略图高度完全由右侧文字区决定。
   这样无论后台图上传来的是横图还是竖图，卡片高度都一致、且不留空白带 */
.news-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-thumb img {
    transform: scale(1.04);
}

.news-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 2px;
}

.news-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

.news-title a {
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.news-title a:hover {
    color: var(--c-electric);
}

.news-desc {
    font-size: 14px;
    line-height: 1.72;
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

.news-meta time {
    font-variant-numeric: tabular-nums;
}

.news-cat {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border-radius: 99px;
    transition: background 0.2s ease, color 0.2s ease;
}

.news-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.news-views svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.news-cat:hover {
    background: var(--grad-main);
    color: #fff;
}

/* ---------- 15. 侧栏组件 ---------- */
/* 列表页 / 详情页共用的两栏骨架：左内容 + 右侧栏（--sidebar-w 由令牌控制） */
.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: 28px;
    align-items: start;
}

/* 侧栏（列表页 / 详情页 / 搜索页共用）：
   随页面自然滚动，不做吸顶——与首页右栏同款行为（v26 用户要求）。 */
.page-aside {
    display: grid;
    gap: 24px;
}

.side-block {
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--c-card);
    box-shadow: var(--shadow-card);
}

.side-title {
    position: relative;
    padding-left: 15px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.side-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: var(--grad-brand);
}

/* 热门排行（侧栏）：紧凑行距（编号徽章样式全站统一，不在此覆写） */
.rank-list li a {
    font-size: 14px;
}

/* 侧栏排行条目：长列表自然排布 */
.side-block .rank-list {
    justify-content: flex-start;
}

.side-block .rank-list li {
    padding: 10px 0;
}

/* 最近更新列表 */
.side-list li + li {
    border-top: 1px dashed var(--line);
}

.side-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.side-item-text {
    font-size: 14px;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.side-item:hover .side-item-text {
    color: var(--c-electric);
}

.side-item-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
}

/* ---------- 15b. 详情页：正文与右侧栏并排 ---------- */
.article-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: 28px;
    align-items: start;
}

/* 正文列（含头部 / 正文 / 上下篇 / 相关推荐） */
.article-main {
    min-width: 0;
}

/* 详情页正文：填满左栏，右边缘与模块（侧栏左边界）对齐；
   行宽随容器与栅格自适应，不再单独收窄，避免正文右缘内缩留白 */
.article-content {
    width: 100%;
}

/* ---------- 16. 分页 ---------- */
.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pagination a,
.pagination span,
.pagination li {
    display: inline-block;
    min-width: 38px;
    height: 38px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 14px;
    text-align: center;
    color: var(--ink-2);
    background: var(--c-card);
    border: 1px solid var(--line);
    border-radius: 99px;
}

.pagination a:hover {
    color: var(--c-electric);
    border-color: var(--c-electric);
}

.pagination .active,
.pagination .current,
.pagination .on,
.pagination li.active span {
    color: #fff;
    background: var(--grad-main);
    border-color: transparent;
}

/* ---------- 17. 文章详情 ---------- */

.article-head {
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.article-title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--ink);
}

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

.article-cat {
    padding: 2px 12px;
    font-size: 12px;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border-radius: 99px;
}

.article-cat:hover {
    background: var(--grad-main);
    color: #fff;
}

/* 正文排版 */
.article-content {
    font-size: 17px;
    line-height: 1.95;
    color: var(--ink-2);
    /* 拉丁词不拦腰截断，超长串仍可换行防溢出 */
    word-break: normal;
    overflow-wrap: break-word;
    text-justify: inter-ideograph;
}

.article-content p {
    margin-bottom: 18px;
}

/* 右侧对齐：中文段落两端对齐，使每一行右缘与正文栏右缘齐平。
   原左对齐会因“行末最后一个字放不下”而参差，实测常见段落非末行右差
   0~33px（最多约 2 个字宽），视觉上右侧呈锯齿；两端对齐后非末行右差恒为 0。
   末行仍保持左对齐（不拉伸），符合中文排版习惯 */
.article-content p,
.article-content li {
    text-align: justify;
    text-justify: inter-ideograph;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 28px 0 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.article-content h2 {
    font-size: 20px;
}

.article-content h3 {
    font-size: 18px;
}

.article-content h4 {
    font-size: 16px;
}

.article-content img,
.article-content video,
.article-content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: var(--radius-md);
}

/* 对齐：正文内的配图 / 视频一律铺满整栏，左右缘与文字、标题、分隔线齐平。
   正文配图常见 750~1200px，栏宽约 1000px，铺满后右缘不再内缩留白；
   原图过小（< 500px）的由 main.js 打 .img-natural 复原原始尺寸，避免放大模糊 */
.article-content img,
.article-content video {
    width: 100%;
}

.article-content .img-natural {
    width: auto;
}

.article-content figure {
    max-width: 100%;
    margin: 20px 0;
}

.article-content figure img {
    width: 100%;
    margin: 0;
}

.article-content figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

.article-content pre {
    max-width: 100%;
    margin: 18px 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.article-content ul,
.article-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.article-content ul {
    list-style: disc;
}

.article-content ol {
    list-style: decimal;
}

.article-content li {
    margin-bottom: 6px;
}

.article-content a {
    color: var(--c-electric);
}

.article-content a:hover {
    text-decoration: underline;
}

.article-content blockquote {
    margin: 18px 0;
    padding: 14px 18px;
    background: var(--tag-blue-bg);
    border-left: 3px solid var(--c-electric);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--ink-3);
}

.article-content table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.article-content th,
.article-content td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
}

.article-content th {
    background: var(--c-bg);
    font-weight: 600;
}

.article-content hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* 上一篇 / 下一篇 */
.article-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 34px;
    font-size: 14px;
}

.page-prev,
.page-next {
    padding: 14px 16px;
    background: var(--c-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-prev:hover,
.page-next:hover {
    border-color: var(--c-electric);
    box-shadow: 0 8px 24px rgba(46, 107, 255, 0.12);
}

.page-next {
    text-align: right;
}

.article-pages a {
    display: block;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-pages a:hover {
    color: var(--c-electric);
}

/* 上下篇为空时的占位文案（上一篇/下一篇：暂无） */
.article-pages .page-none {
    display: block;
    color: var(--muted);
}

/* 相关推荐 */
.related {
    margin-top: 44px;
}

.related .sec-title {
    font-size: 22px;
    margin-bottom: 18px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.related-card {
    display: block;
    background: var(--c-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.related-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-bg);
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-thumb img {
    transform: scale(1.05);
}

.related-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 11px 13px 13px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink-2);
}

.related-card:hover .related-title {
    color: var(--c-electric);
}

/* ---------- 18. 单页栏目 ---------- */
.single-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.single-card {
    background: var(--c-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.single-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.single-card a {
    display: block;
    padding: 22px;
}

.single-card h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.single-card p {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-card:hover h2 {
    color: var(--c-electric);
}

/* 单页内容页：标题区 + 卡片增强（lists_single.htm） */
.single-hero {
    position: relative;
    padding: 40px 0 26px;
    margin-bottom: 10px;
}

.single-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-electric);
    text-transform: uppercase;
}

.single-title {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: break-word;
}

.single-lead {
    margin-top: 12px;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink-3);
}

.single-rule {
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-electric), var(--c-cyan));
}

.single-body {
    margin: 6px 0 4px;
}

/* 卡片顶边渐变 + 悬停箭头（在原 hover 上移基础上叠加） */
.single-card {
    position: relative;
    border: 1px solid var(--line);
}

.single-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-electric), var(--c-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.single-card:hover {
    border-color: transparent;
}

.single-card:hover::before {
    transform: scaleX(1);
}

.single-card-go {
    display: inline-block;
    margin-top: 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-electric);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.single-card:hover .single-card-go {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- 19. 联系我们 / 在线留言（深色横幅 + 联系信息 + 表单 + 图形验证码） ---------- */
.gb-hero {
    position: relative;
    padding: 26px 0 30px;
    color: #EAF1FF;
    background-color: var(--c-dark);
    background-image:
        radial-gradient(ellipse 60% 80% at 12% 0%, rgba(46, 107, 255, 0.42), rgba(46, 107, 255, 0) 100%),
        radial-gradient(ellipse 50% 70% at 88% 10%, rgba(0, 194, 255, 0.24), rgba(0, 194, 255, 0) 100%);
    overflow: hidden;
}

.gb-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(46, 107, 255, 0), rgba(0, 194, 255, 0.6), rgba(46, 107, 255, 0));
}

.gb-hero-inner {
    position: relative;
    z-index: 1;
}

.gb-eyebrow {
    display: inline-block;
    margin-top: 0;
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #fff;
    background: rgba(46, 107, 255, 0.28);
    border: 1px solid rgba(0, 194, 255, 0.45);
    border-radius: 99px;
}

.gb-hero-title {
    margin-top: 12px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.gb-hero-sub {
    max-width: 780px;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--hd-muted);
}

/* 联系信息条：三项数据取自后台自定义变量，全部未配置时整条自动隐藏 */
.gb-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 26px;
    list-style: none;
}

.gb-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--c-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 26px rgba(20, 40, 90, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gb-contact:hover {
    transform: translateY(-3px);
    border-color: rgba(46, 107, 255, 0.35);
    box-shadow: 0 16px 34px rgba(46, 107, 255, 0.12);
}

.gb-contact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--grad-brand);
    border-radius: 12px;
    box-shadow: 0 8px 20px -8px rgba(46, 107, 255, 0.75);
}

.gb-contact-ico svg {
    width: 20px;
    height: 20px;
}

.gb-contact-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gb-contact-txt em {
    font-size: 12.5px;
    font-style: normal;
    color: var(--muted);
}

.gb-contact-txt strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: break-word;
}

/* 主体两栏：左表单 + 右侧须知 / 相关栏目 */
.gb-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    align-items: start;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 56px;
}

.gb-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gb-card {
    padding: 26px;
    background: var(--c-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.gb-card-slim {
    padding: 20px 22px;
}

.gb-card-head {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.gb-card-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
}

.gb-card-desc {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

/* 必填图例：默认收起（display:none），由 main.js 判定后台确有必填字段后才展开，
   后台一个必填都没勾时文案会自动变成「全部选填」，不会出现空谈的说明 */
.gb-card-legend {
    display: none;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
}

.gb-card-legend:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gb-card-legend .gb-req {
    font-size: 14px;
}

/* 表单字段：字段 HTML 由后台留言模型自动生成（guestbookform type='auto'），
   此节只负责容器排布与控件外观，增删字段无需改模板 */
.gb-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 16px;
}

.gb-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 220px;
}

.gb-field:has(textarea),
.gb-field:has(.eyou_form_radio),
.gb-field:has(.eyou_form_checkbox),
.gb-field:has(.eyou_form_file),
.gb-field:has(.eyou_form_attr select ~ select) {
    flex-basis: 100%;
}

.gb-field > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
}

/* 必填 / 选填标识：* 是必填，「选填」是选填。
   两者都由 main.js 依据后台字段的「是否必填」自动加上，后台改开关前台自动跟着变 */
.gb-req {
    margin-left: 2px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    color: var(--c-danger);
}

.gb-opt {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--muted);
    background: #F1F4FA;
    border-radius: 999px;
    vertical-align: 1px;
}

/* 内核输出的字段容器 */
.gb-field .eyou_form_attr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gb-field .eyou_form_attr + .eyou_form_attr {
    margin-top: 10px;
}

.gb-field .eyou_form_attr > input:not([type="radio"]):not([type="checkbox"]),
.gb-field .eyou_form_attr > select,
.gb-field .eyou_form_attr > textarea {
    flex: 1 1 100%;
}

.gb-field .eyou_form_attr > select + select {
    flex: 1 1 28%;
}

.gb-field input[type="text"],
.gb-field input[type="tel"],
.gb-field input[type="email"],
.gb-field input[type="number"],
.gb-field input[type="search"],
.gb-field .eyou_form_text,
.gb-field .eyou_form_phone,
.gb-field select,
.gb-field textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--c-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.gb-field input::placeholder,
.gb-field textarea::placeholder {
    color: var(--muted);
}

.gb-field input:focus,
.gb-field select:focus,
.gb-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-electric);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.12);
}

/* 必填项漏填：等用户真的动过这个控件、且浏览器判定不合法时才标红，
   一进页面不会满屏报错（:user-invalid 不支持的浏览器整条忽略，属渐进增强） */
.gb-field input:required:user-invalid,
.gb-field select:required:user-invalid,
.gb-field textarea:required:user-invalid {
    background: #FFF7F6;
    border-color: var(--c-danger);
}

.gb-field textarea {
    min-height: 132px;
    line-height: 1.75;
    resize: vertical;
}

/* 单选 / 多选：内核输出的 label 包裹式选项 */
.gb-field .eyou_form_attr > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-2);
    background: var(--c-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gb-field .eyou_form_attr > label:hover {
    border-color: var(--c-electric);
    color: var(--c-electric);
}

.gb-field .eyou_form_attr input[type="radio"],
.gb-field .eyou_form_attr input[type="checkbox"] {
    width: auto;
    margin: 0;
    padding: 0;
    accent-color: var(--c-electric);
}

/* 文件 / 图片上传 */
.gb-field input[type="file"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink-3);
    background: var(--c-bg);
    border: 1px dashed var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.gb-field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

/* 图形验证码：输入框 + 图片 + 换一张 */
.gb-vcode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    align-items: center;
    gap: 12px;
}

.gb-vcode-img {
    width: 120px;
    height: 44px;
    object-fit: fill;
    cursor: pointer;
    background: var(--c-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.gb-vcode-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.gb-vcode-refresh svg {
    width: 15px;
    height: 15px;
}

.gb-vcode-refresh:hover {
    color: #fff;
    background: var(--grad-main);
}

/* 提交区 */
.gb-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.gb-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    height: 46px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: var(--grad-main);
    border: 0;
    border-radius: 99px;
    box-shadow: 0 12px 26px -10px rgba(46, 107, 255, 0.85);
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.gb-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.gb-submit[disabled] {
    opacity: 0.72;
    cursor: default;
    transform: none;
}

.gb-privacy {
    flex: 1 1 240px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* 右栏：留言须知 / 相关栏目 */
.gb-side-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
}

.gb-side-title::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 3px;
    background: var(--grad-brand);
}

.gb-tips {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    list-style: none;
}

.gb-tips li {
    display: flex;
    gap: 11px;
}

.gb-tip-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--c-electric);
    background: var(--tag-blue-bg);
    border-radius: 7px;
}

.gb-tip-txt {
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--ink-3);
}

.gb-tip-txt strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--ink-2);
}

.gb-links {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    list-style: none;
}

.gb-links li + li {
    border-top: 1px dashed var(--line);
}

.gb-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    font-size: 13.5px;
    color: var(--ink-2);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.gb-links a:hover {
    color: var(--c-electric);
    padding-left: 5px;
}

.gb-links a span {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--muted);
}

/* ---------- 20. 页脚：深色极光（流光顶线 + 双极光 + 网格底纹 + 巨型水印） ---------- */
.site-footer {
    position: relative;
    margin-top: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 45% 60% at 12% 0%, rgba(46, 107, 255, 0.22), rgba(46, 107, 255, 0) 100%),
        radial-gradient(ellipse 40% 55% at 88% 0%, rgba(0, 194, 255, 0.15), rgba(0, 194, 255, 0) 100%),
        radial-gradient(ellipse 55% 45% at 50% 115%, rgba(124, 92, 255, 0.16), rgba(124, 92, 255, 0) 100%),
        var(--c-dark);
    color: var(--hd-muted);
}

/* 顶部流光细线（电光蓝 → 青 → 紫 循环流动） */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, transparent 2%, var(--c-electric) 30%, var(--c-cyan) 55%, var(--c-violet) 80%, transparent 98%);
    background-size: 200% 100%;
    animation: footerBeam 7s linear infinite;
}

@keyframes footerBeam {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* 极淡网格底纹（向下淡出，不压内容） */
.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(143, 163, 196, 0.05) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(143, 163, 196, 0.04) 0 1px, transparent 1px 72px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 68%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 68%);
}

.footer-top {
    position: relative;
    z-index: 1;
    display: grid;
    /* auto-fit：空列（联系/友链未配置）隐藏后自动重排，不留空轨 */
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 48px;
    padding-block: 60px 48px;
}

/* 品牌行：LOGO 徽标 + 站名 + 英文副标 */
.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--grad-main);
    box-shadow: 0 8px 20px rgba(46, 107, 255, 0.35);
}

/* 上传了 LOGO：徽标转中性底、隐藏盾形占位；未上传：显示渐变盾形 */
.footer-logo:has(img) {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(143, 163, 196, 0.28);
    box-shadow: none;
}

.footer-logo:has(img) .footer-logo-shield {
    display: none;
}

.footer-logo img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.footer-logo-shield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 11px;
    box-sizing: border-box;
}

.footer-brand-txt {
    min-width: 0;
}

/* 品牌名：白 → 青 → 电光蓝 渐变流光字 */
.footer-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(100deg, #fff 25%, var(--c-cyan) 62%, var(--c-electric) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-en {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--hd-muted);
}

.footer-desc {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.9;
    max-width: 380px;
}

/* 联系信息：图标胶囊（后台未配置时整组自动隐藏） */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.footer-brand .footer-contact li {
    display: flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0;
    padding: 8px 16px 8px 9px;
    font-size: 13px;
    line-height: 1.4;
    color: #C7D4EA;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(143, 163, 196, 0.22);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-brand .footer-contact li:hover {
    border-color: rgba(0, 194, 255, 0.45);
    background: rgba(46, 107, 255, 0.1);
}

.fc-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--c-cyan);
    background: rgba(46, 107, 255, 0.18);
    border: 1px solid rgba(0, 194, 255, 0.35);
}

.fc-ico svg {
    width: 14px;
    height: 14px;
}

.fc-txt {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-txt em {
    margin-right: 10px;
    font-size: 12px;
    font-style: normal;
    color: var(--hd-muted);
}

.footer-col h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
}

/* 标题前的渐变光条 */
.footer-col h3::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 3px;
    border-radius: 99px;
    background: var(--grad-main);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.55);
}

.footer-col ul li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.7;
}

/* 快速导航：双列网格 */
.footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}

.footer-nav ul li {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* 导航链接：悬停滑出箭头 */
.footer-col ul a {
    position: relative;
    display: inline-block;
    color: var(--hd-muted);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-col ul a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateX(-6px);
    font-weight: 800;
    color: var(--c-cyan);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-nav ul a:hover {
    color: #fff;
    padding-left: 16px;
}

.footer-nav ul a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* 友情链接：胶囊徽章 */
.flink-list:empty {
    display: none;
}

.flink-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.flink-list a {
    display: inline-block;
    padding: 5px 13px;
    font-size: 13px;
    color: var(--hd-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(143, 163, 196, 0.22);
    border-radius: 99px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.flink-list a:hover {
    color: #fff;
    background: rgba(46, 107, 255, 0.18);
    border-color: rgba(46, 107, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(46, 107, 255, 0.28);
}

/* 底部信息条：整体居中，版权一行、备案一行 */
.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 22px 28px;
    font-size: 13px;
    color: var(--hd-faint);
    text-align: center;
}

/* 分隔线：中段发亮的渐变发丝线 */
.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%, rgba(46, 107, 255, 0.5) 35%, rgba(0, 194, 255, 0.5) 65%, transparent 96%);
}

/* 版权文字 */
.fb-copy {
    letter-spacing: 0.3px;
    color: var(--hd-muted);
}

/* 备案行：纯文字＋小图标，居中排列 */
.fb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
}

.fb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--hd-muted);
    transition: color 0.2s ease;
}

.fb-item:hover {
    color: #fff;
}

/* 备案项的小图标：无底无框，只保留青色描边 */
.fb-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--c-cyan);
}

.fb-ico svg {
    width: 100%;
    height: 100%;
}

/* 备案项内文字／链接跟随文字色 */
.footer-bottom .fb-item a,
.footer-bottom .fb-item span {
    color: inherit;
    transition: color 0.2s ease;
}

.footer-bottom .fb-item:hover a {
    color: #fff;
}

/* 返回顶部 */
.back-top {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 80;
    width: 46px;
    height: 46px;
    font-size: 13px;
    color: #fff;
    background: var(--grad-brand);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(46, 107, 255, 0.4);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.back-top:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

/* =============================================================
   响应式适配
   ============================================================= */

/* ≤1280：中宽屏收敛（右栏收窄，左图 16:9 高度随之自然变小） */
@media (max-width: 1280px) {
    .focus {
        grid-template-columns: minmax(0, 1fr) 400px;
        min-height: 400px;
    }

    .latest-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .sec-head h2,
    .sec-title {
        font-size: 25px;
    }

    /* 联系我们：右栏收窄 */
    .gb-body {
        grid-template-columns: minmax(0, 1fr) 310px;
    }
}

/* ≤1024：小桌面 / 横板平板 */
@media (max-width: 1024px) {
    /* 焦点模块转为上下堆叠：大图在上、热门列表在下。
       堆叠后图区不再与列表等比，按 16:9 定高最贴合缩略图比例 */
    .focus {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .focus-stage {
        aspect-ratio: 16 / 9;
        height: auto;
        align-self: start;
    }

    .focus-side {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* 头部导航：小桌面收窄项内边距与字号（导航靠右排布已是全尺寸基础行为，
       见第 6 节 .nav-list），保证与右侧工具图标同排时文字不挤压重叠 */
    .nav-list {
        gap: 2px;
    }

    .nav-link {
        padding: 0 12px;
        font-size: 15px;
    }

    /* 最新资讯：平板仍保留右栏（收窄），到 ≤920 单列时才整栏隐藏 */
    .latest-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    /* 主栏收窄后同步收一下缩略图，避免文字列被挤得太窄 */
    .latest-feed .news-item {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    /* 栏目速览：平板降为两列 */
    .channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 列表页 / 详情页：≤1024 侧栏收窄到 280，到 ≤920 才转单列
       （与首页「最新资讯」右栏的降级节奏一致） */
    .page-layout,
    .article-wrap {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    /* 联系我们：表单与右栏改为上下堆叠，右栏两张卡并排 */
    .gb-body {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 44px;
    }

    .gb-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ≤920：平板（汉堡导航） */
@media (max-width: 920px) {
    /* 单行头收窄：LOGO + 导航 + 搜索（仍保持一定高度，避免塌成细条） */
    .mainnav {
        --nav-h: 68px;
    }

    /* 副标隐藏后文字块只剩一行（22px），徽标由 stretch 跟随；
       再给徽标一个最小高度，避免小屏上 LOGO 缩得过小、显得单薄 */
    .brand-mark {
        min-width: 0;
        min-height: 38px;
    }

    .brand-mark:has(img) {
        max-width: 180px;
    }

    .brand-mark img {
        max-height: 40px;
    }

    .brand-name {
        font-size: 22px;
        letter-spacing: 1.5px;
    }

    .brand-word {
        padding-left: 14px;
    }

    .brand-word::before {
        height: 28px;
    }

    .brand {
        padding: 5px 16px 5px 2px;
    }

    .brand-sub {
        display: none;
    }

    .hd-icon-btn {
        width: 42px;
        height: 42px;
    }

    .hd-icon-btn svg {
        width: 20px;
        height: 20px;
    }

    /* 单行头换行：LOGO + 工具图标 + 汉堡一行，菜单折叠到下一行 */
    .mainnav-inner {
        flex-wrap: wrap;
        gap: 12px;
        min-height: var(--nav-h);
    }

    .brand {
        order: 1;
    }

    .hd-tools {
        order: 2;
        margin-left: auto;
    }

    /* 汉堡按钮：只留图标（无文字），做成 42×42 的方形点击区，指头友好 */
    .nav-toggle {
        order: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        color: var(--hd-text);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav-toggle-box {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
    }

    .nav-toggle-box i {
        height: 2px;
        border-radius: 1px;
        background: var(--hd-text);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-open .nav-toggle-box i:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-open .nav-toggle-box i:nth-child(2) {
        opacity: 0;
    }

    .nav-open .nav-toggle-box i:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-list {
        order: 4;
        display: block;
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;         /* 折叠后独占整行，取消靠右推力 */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .mainnav.nav-open .nav-list {
        max-height: 72vh;
        overflow-y: auto;
        padding-bottom: 10px;
    }

    .nav-item {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .nav-item:first-child {
        border-top: 0;
    }

    .nav-link {
        line-height: 48px;
        margin: 0;
        padding: 0 52px 0 14px;
        font-size: 15px;
        border-radius: 0;
    }

    .nav-link::after {
        display: none;
    }

    /* 子栏目改为手风琴展开 */
    .subnav {
        position: static;
        min-width: 0;
        max-height: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        overflow: hidden;
        transition: max-height 0.25s ease;
        background: rgba(255, 255, 255, 0.04);
    }

    .sub-open > .subnav {
        max-height: 480px;
    }

    /* 关键：中和桌面 hover 下拉的位移
       移动端点按栏目名/箭头会产生粘滞 hover，命中桌面规则
       `.nav-item:hover > .subnav{transform:translate(-50%,0)}`，
       会把整个手风琴内容左移半个宽度推出可视区 —— 表现为「箭头翻了、面板出来了，但一片空白」。
       折叠态必须显式把 transform 归零（同类选择器写在后面才能压过第 6 节那条） */
    .nav-item:hover > .subnav,
    .nav-item:focus-within > .subnav {
        transform: none;
    }

    .subnav a {
        padding-left: 32px;
    }

    .subnav li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sub-toggle {
        display: flex;
    }

    /* 折叠态不用 hover 胶囊（触屏粘滞 hover 会一直亮着，易误解为已选中）；
       当前页面的 .active 项保持原有渐变文字样式不动，避免 -webkit-text-fill-color:transparent 失去背景后文字消失 */
    .nav-item:not(.active):hover > .nav-link {
        background: none;
        text-shadow: none;
    }

    /* 「展开中」的分组给出底色标识（需写在上面那条之后，同权重时靠后者生效） */
    .nav-item.sub-open:not(.active) > .nav-link {
        background: linear-gradient(90deg, rgba(46, 107, 255, 0.3), rgba(0, 194, 255, 0.06));
        color: #fff;
    }

    .news-item {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    /* 最新资讯：窄屏转单列，右栏（广告+热门标签）整栏隐藏（只显示一个栏） */
    .latest-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .latest-aside {
        display: none;
    }

    /* 列表页 / 详情页：同样转单列，侧栏整栏隐藏（窄屏只显示一个栏） */
    .page-layout,
    .article-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .page-aside {
        display: none;
    }
}

/* ≤640：手机端 */
@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

    /* 单页子栏目卡片：窄屏单列；标题区降级 */
    .single-grid {
        grid-template-columns: 1fr;
    }

    .single-title {
        font-size: 25px;
    }

    .single-hero {
        padding: 30px 0 22px;
    }

    /* 单行头换行：LOGO + 工具图标 + 汉堡一行 */
    .mainnav-inner {
        flex-wrap: wrap;
        gap: 12px;
        min-height: 0;
        padding-block: 12px;
    }

    .brand-name {
        font-size: 21px;
    }

    /* 小屏：品牌竖线缩到 24px，与两行文字高度相称 */
    .brand-word::before {
        height: 24px;
    }

    /* 搜索弹窗改为视口级面板，避免小屏溢出 */
    .search-pop-panel {
        position: fixed;
        top: calc(var(--nav-h) + 10px);
        right: 12px;
        left: 12px;
        width: auto;
        transform-origin: top center;
    }

    .search-pop-panel::before {
        display: none;
    }

    .hero {
        padding-block: 24px 32px;
    }

    /* 焦点模块：小屏下列表收紧（图区仍由上一条的 16:9 控制） */
    .focus-head {
        padding: 14px 18px;
    }

    .focus-head h2 {
        font-size: 17px;
    }

    .focus-item a {
        gap: 12px;
        padding: 13px 16px 13px 18px;
    }

    .focus-num {
        width: 24px;
        height: 24px;
        font-size: 12.5px;
    }

    .focus-ttl {
        font-size: 14.5px;
    }

    .focus-pic-meta {
        left: 16px;
        bottom: 14px;
        gap: 10px;
        font-size: 11.5px;
    }

    .section {
        padding-top: 44px;
    }

    .site-main {
        padding-bottom: 44px;
    }

    .sec-head {
        margin-bottom: 18px;
    }

    .sec-head h2,
    .sec-title,
    .side-title {
        font-size: 21px;
    }

    .sec-head h2::before,
    .sec-title::before {
        height: 18px;
        width: 4px;
    }

    .sec-en {
        display: none;
    }

    /* 列表改为上图下文单列 */
    .news-item,
    /* 同权重覆盖：首页卡片流的 240px 缩略图列在手机端也须转上图下文 */
    .latest-feed .news-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    /* 单列后卡片不再左右等高，缩略图改回固定比例定高 */
    .news-list .news-thumb {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .news-title {
        font-size: 16px;
    }

    .rank-list li {
        padding-block: 13px;
    }

    /* 栏目速览：手机转单列 */
    .channel-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .latest-layout {
        gap: 16px;
    }

    .page-title {
        font-size: 21px;
    }

    .article-title {
        font-size: 22px;
    }

    .article-pages {
        grid-template-columns: 1fr;
    }

    .page-next {
        text-align: left;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .single-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-block: 40px 32px;
    }

    .footer-bottom {
        gap: 8px;
        padding-block: 20px 24px;
    }

    .fb-copy {
        font-size: 12.5px;
    }

    .fb-meta {
        flex-direction: column;
        gap: 8px;
    }

    .back-top {
        right: 16px;
        bottom: 20px;
        width: 42px;
        height: 42px;
    }

    /* 联系我们：紧凑版式，字段单列、验证码换行 */
    .gb-hero {
        padding: 20px 0 24px;
    }

    .gb-hero-title {
        font-size: 23px;
    }

    .gb-contacts {
        gap: 12px;
        margin-top: 18px;
    }

    .gb-contact {
        padding: 14px 16px;
    }

    .gb-card {
        padding: 18px;
    }

    .gb-card-slim {
        padding: 16px;
    }

    .gb-fields {
        gap: 14px;
    }

    .gb-field {
        flex-basis: 100%;
        min-width: 0;
    }

    .gb-vcode {
        grid-template-columns: minmax(0, 1fr) 110px;
        gap: 10px;
    }

    .gb-vcode-img {
        width: 110px;
    }

    .gb-vcode-refresh {
        grid-column: 1 / -1;
        height: 40px;
    }

    .gb-actions {
        gap: 12px;
    }

    .gb-submit {
        width: 100%;
    }

    .gb-privacy {
        flex: none;
    }
}

/* ≤420：小屏微调 */
@media (max-width: 420px) {
    .container {
        padding-inline: 16px;
    }

    .related-grid {
        gap: 10px;
    }

    .ticker-list a {
        font-size: 13px;
    }

}

/* ---------- 动效弱化偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .ticker-track {
        animation: none;
    }

    /* 头部流光扫描线停用 */
    .mainnav::after {
        animation: none;
    }

    /* 焦点模块：不动效，图片切换直接完成 */
    .focus-pic {
        transition: none;
    }

    .focus-en,
    .focus::before {
        animation: none;
    }
}