/* ============================================================
   秦岭热线 · 移动端统一适配  v2  2026-11-06
   ------------------------------------------------------------
   v2：按线上真实 DOM 对齐选择器（实测 375/1024 渲染后取得）
       顶部导航：nav.primary-nav > div.page-w.nav-row > div.nav-tabs > a.nav-tab
       卡片横滑：div.fl-live-scroll > div.fp-card
       原 .uber-nav/.uber-link/.fp-grid 为历史类名，保留兼容其他模板。
   ------------------------------------------------------------
   加载位置：index.html 的 </body> 之前、所有手写 <script> 之后。
   原因：data-insight / aviation-vision / aviation-edu / ql-engage /
        admin-beautify / brand-matrix-carousel / footer-filing 都会执行
        document.head.appendChild(<style>) 动态注入样式（其中带
        !important 的有 121 处）。本表必须排在它们之后才能稳定生效。

   设计原则：
     ① 只在 ≤1024px 生效，桌面端零影响
     ② 统一断点 1024 / 768 / 480，取代原先 767/768/480/1200/1920/rem 混用
     ③ 用 aspect-ratio 取代写死的 px 图片高度
     ④ 正文 ≥14px、触摸目标 ≥44px、导航改横滑但不挤字
     ⑤ !important 只用于压过「内联样式 / 动态注入样式里已带 !important」
        的规则，集中在本文件，替换原先散落三处的 217 处
   ============================================================ */

/* ---------- 断点 1：平板 769–1024 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hp section:not(.hero):not(.ticker),
  .hp > div:not(.hero):not(.ticker) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .di-grid, .av-grid, .ae-grid { gap: 20px; }
  .di-cards { gap: 14px; }
}

/* ---------- 断点 2：手机 ≤768 ---------- */
@media (max-width: 768px) {
  :root {
    --ql-gutter: 16px;
    --ql-gap: 12px;
  }

  /* 1. 基础：防横向溢出、统一盒模型 */
  html, body { overflow-x: hidden; }
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 15px;
    line-height: 1.65;
  }
  #app, .hp, .hp section, .hp > div { max-width: 100%; }
  .hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
  .hp section:not(.hero):not(.ticker),
  .hp > div:not(.hero):not(.ticker) {
    padding-left: var(--ql-gutter) !important;
    padding-right: var(--ql-gutter) !important;
  }

  /* 2. 字号体系（替换原先正文 12px 的过度压缩） */
  h1 { font-size: 22px !important; line-height: 1.35; }
  h2 { font-size: 19px !important; line-height: 1.40; }
  h3 { font-size: 16px !important; line-height: 1.45; }
  p, .article-excerpt, .card-desc, .di-text, .ah-text { font-size: 14px !important; }

  /* 3. 图片：比例化，取代写死的 140/160/180px 高度 */
  img { max-width: 100%; height: auto; }
  .di-hero img, .di-mid-img img, .di-card-img,
  .av-img-scale img, .av-cp-item img, .av-big-img img,
  .av-mid-img img, .av-card-img,
  .ae-big img, .ae-card-img, .ae-mid-img img,
  .hero .carousel-wrapper img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .di-mini-img, .ae-mini-img, .av-mini-img,
  .te-card, .te-card-img-wrap {
    width: 96px;
    height: 68px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .hero .carousel-wrapper {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  .carousel-h { font-size: 19px !important; }

  /* 4. 栅格：多栏 → 单列 */
  .di-grid, .av-grid, .ae-grid, .ah-body, .te-top {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .hero { grid-template-columns: 1fr !important; }
  .di-col + .di-col, .av-col + .av-col, .ae-col + .ae-col {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid #e8eaed;
    padding-top: 14px;
  }
  .di-list, .av-grid .av-col,
  .te-top-left, .te-top-center, .te-top-right,
  .dm-feat-img-wrap, .ah-left, .ah-center, .ah-right {
    width: 100% !important;
    min-width: 0;
  }
  .di-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ql-gap);
  }
  .di-stats { flex-wrap: wrap; gap: 8px; }
  .di-stat { flex: 1 1 45%; padding: 10px 12px; }
  .di-stat-num { font-size: 22px; }
  .di-head, .ae-head, .av-head, .hot-tags { flex-wrap: wrap; }
  .ad-row {
    grid-template-columns: 1fr !important;
    gap: var(--ql-gap);
    margin-bottom: 20px !important;
  }

  /* 5. 卡片横滑：保留，但收敛为可预期的宽度
        真实容器是 .fl-live-scroll（.fp-grid 为历史类名） */
  .fp-grid,
  .fl-live-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fp-grid::-webkit-scrollbar, .fl-live-scroll::-webkit-scrollbar,
  .uber-nav::-webkit-scrollbar, .page-w.nav-row::-webkit-scrollbar { display: none; }
  .fp-card {
    width: 200px;
    min-width: 200px !important;
    flex-shrink: 0;
  }

  /* 6. 头部 */
  .site-header {
    height: auto !important;
    padding: 8px var(--ql-gutter);
  }
  .header-row { flex-wrap: wrap; gap: 10px; padding: 8px 0 !important; }
  .router-link-active img {
    max-width: 200px !important;
    height: auto !important;
  }
  .header-search {
    width: 100% !important;
    max-width: 100% !important;
    order: 3;
  }
  .header-search input {
    font-size: 15px !important;
    padding: 10px 12px;
    min-height: 44px;
  }
  .header-actions { flex-shrink: 0; gap: 6px; }
  .header-actions .action-chip {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .uber-rss, .uber-lang, .ad-banner-full, .aircraft-hub { display: none !important; }

  /* 7. 导航：横滑 + 触摸目标 ≥44px
        真实容器 .page-w.nav-row 本身已 overflow-x:auto，
        这里只补滚动条隐藏，不动 padding / 高度，避免破坏原有版式。 */
  .page-w.nav-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs { flex-wrap: nowrap !important; gap: 4px; }
  .uber-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 6px 0 !important;
  }
  .nav-tab,
  .uber-link {
    font-size: 15px !important;
    padding: 10px 12px !important;
    min-height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .uber-link { display: inline-flex; align-items: center; }
  .hot-tags { gap: 6px; padding: 6px 0; }
  .hot-tags-label { font-size: 12px; }
  .hot-tag {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* 8. 二级下拉（整条宽度 fixed 面板） */
  .nav-dropdown { max-width: 100vw; overflow-x: auto; }
  .dd-item {
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 44px;
  }

  /* 9. 广告位 */
  .ad-col--lg .ad-card-img-wrap, .ad-col--sm .ad-card-img-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .ad-col--lg img, .ad-col--sm img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* 10. 品牌矩阵（该脚本注入样式带 !important，需同级覆盖） */
  .bm-grid { gap: 10px; }
  .bm-grid .bm-card { width: 84px !important; }
  .bm-card .bm-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
  .bm-card .bm-name { font-size: 12px !important; }

  /* 11. 标题与长文本：允许换行，禁止撑破容器 */
  .ah-big-title, .di-hero-title, .ae-card-title, .av-card-title,
  .di-mid-title, .av-mid-title, .ae-mid-title,
  .di-mini-title, .ae-mini-title, .av-mini-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .di-hero-title { font-size: 18px !important; }
  .di-mid-title, .av-mid-title, .ae-mid-title { font-size: 16px !important; }
  .ae-card-title, .av-card-title,
  .di-mini-title, .ae-mini-title, .av-mini-title { font-size: 15px !important; }
  .di-rank-item a, .av-rank-item a, .ah-tab-text { font-size: 14px !important; }
}

/* ---------- 断点 3：小屏 ≤480 ---------- */
@media (max-width: 480px) {
  :root { --ql-gutter: 12px; }
  .di-cards { grid-template-columns: 1fr !important; }
  .di-stats { flex-direction: column; }
  .di-stat { flex: 1 1 100%; }
  .bm-grid .bm-card { width: 72px !important; }
  .bm-card .bm-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
  }
  .router-link-active img { max-width: 165px !important; }
  .fp-card { width: 168px; min-width: 168px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 视觉增强层 · 央视网手机版风格   2026-11-06
   --------------------------------------------------------------------
   实测参照 m.cctv.com（375 视口）：页面底 #f9f9f9、白卡 #fff、
   主色 rgb(191,6,20)；标题 #333、栏目 20px / 头条 17px / 列表 16px、
   字重 400；红色只用于激活态、标签、页码、logo；分隔靠 1px 细线 + 留白。
   本站落地：保留站点主红 #b3202b（logo 同色），把深蓝 #0d2b54、
   金 #c8962e、蓝 #003a70 全部收敛为「墨黑 + 主红 + 浅灰」。
   只在 ≤768px 生效，桌面端零影响；排在所有动态注入样式之后。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --ql-red: #b3202b;
    --ql-red-deep: #961a23;
    --ql-ink: #1a1a1a;
    --ql-text: #333333;
    --ql-sub: #9a9a9a;
    --ql-bg: #f7f8fa;
    --ql-card: #ffffff;
    --ql-line: #ebedf0;
  }

  /* 1. 全局色板 / 字体 / 白卡浅灰缝 */
  body, .portal-wrap {
    background: var(--ql-bg) !important;
    color: var(--ql-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .hp { background: transparent; }
  .hp > section:not(.hero):not(.ticker),
  .hp > div:not(.hero):not(.ticker) {
    background: var(--ql-card) !important;
    margin-bottom: 10px;
  }
  .hp > section.hero, .hp > div.ticker { margin-bottom: 0; }

  /* 2. 顶部：去深蓝条、去金色投稿块 */
  .top-uber-bar {
    background: #fff !important;
    border-bottom: 1px solid var(--ql-line);
    height: 32px;
  }
  .top-uber-bar .uber-inner { height: 32px; }
  .top-uber-bar .uber-date,
  .top-uber-bar .uber-link,
  .top-uber-bar .uber-left,
  .top-uber-bar .uber-right {
    color: #8b9099 !important;
    font-size: 12px !important;
  }
  .top-uber-bar .uber-link {
    min-height: 0 !important;
    padding: 3px 6px !important;
  }
  .top-uber-bar .uber-link.uber-submit {
    background: var(--ql-red) !important;
    color: #fff !important;
    border-radius: 3px;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
  .site-header { background: #fff !important; }
  .brand-logo { height: 40px !important; }
  .search-box {
    background: #f4f5f7 !important;
    border: 1px solid var(--ql-line);
    border-radius: 22px;
  }
  .search-input { min-height: 42px !important; }

  /* 3. 导航：白底 + 红色激活条 + 吸顶（央视式） */
  .primary-nav {
    background: #fff !important;
    border-bottom: 1px solid var(--ql-line);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .nav-tabs { gap: 0 !important; }
  .nav-tab {
    position: relative;
    background: transparent !important;
    color: var(--ql-ink) !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 0 15px !important;
    min-height: 48px;
  }
  .primary-nav .nav-tab-label {
    color: var(--ql-ink) !important;
    font-weight: 500 !important;
  }
  .nav-tab.active, .nav-tab.router-link-active {
    background: transparent !important;
    color: var(--ql-red) !important;
    font-weight: 600;
  }
  .nav-tab.active .nav-tab-label,
  .nav-tab.active .ql-ft-home-en { color: var(--ql-red) !important; }
  .nav-tab.active::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 0;
    height: 2px;
    background: var(--ql-red);
  }
  .ql-ft-home-en { font-style: normal; opacity: .55; letter-spacing: .5px; }

  /* 4. 标题体系：栏目 20 / 头条 19 / 列表 16 / 辅助 12 */
  .fl-big-title,
  .av-head-title, .di-head-title, .ae-head-title, .te-head-title,
  .av-sub-col > a,
  .section-title, .block-title {
    color: var(--ql-ink) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
  }
  .av-head-title, .di-head-title, .ae-head-title, .te-head-title,
  .av-sub-col > a {
    border-left: 3px solid var(--ql-red);
    padding-left: 10px;
    line-height: 1.25;
  }
  .av-head-sub, .te-sub, .di-head-sub, .ae-head-sub,
  .head-en, .section-en {
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--ql-sub) !important;
    letter-spacing: 1px;
  }
  .fl-cat-text { color: var(--ql-ink) !important; font-weight: 500 !important; }
  .fl-cat-link.active .fl-cat-text { color: var(--ql-red) !important; }
  .fl-notice-item { color: #5a6270 !important; font-size: 14px !important; }
  .fl-notice-tag {
    background: var(--ql-red) !important;
    color: #fff !important;
    border-radius: 3px;
    font-size: 12px !important;
    padding: 3px 8px;
  }
  .av-hot-count { color: var(--ql-sub) !important; font-size: 12px !important; }

  /* 5. Hero / 轮播：更细腻的渐变，标题不过重 */
  .carousel-caption {
    background: linear-gradient(to bottom,
                rgba(0,0,0,0) 0%, rgba(0,0,0,.24) 38%,
                rgba(0,0,0,.84) 100%) !important;
  }
  .carousel-h { font-size: 18px !important; font-weight: 600 !important; }
  .fp-title-text { font-size: 15px !important; font-weight: 600 !important; }
  .av-feat-cap { font-size: 15px !important; font-weight: 600 !important; }
  .carousel-btn--prev, .carousel-btn--next {
    background: rgba(0,0,0,.18) !important;
  }

  /* 6. 标签 / 快讯条：深蓝统一改主红 */
  .ticker {
    background: #fff !important;
    color: var(--ql-ink) !important;
    border-bottom: 1px solid var(--ql-line);
  }
  .tk-brand {
    background: var(--ql-red) !important;
    color: #fff !important;
    border-radius: 3px;
  }
  .tk-brand span { color: #fff !important; font-size: 11px !important; font-weight: 500 !important; }
  .fp-cat, .di-hero-tag, .te-big-tag, .st-ac-tag {
    background: var(--ql-red) !important;
    color: #fff !important;
    border-radius: 3px;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 7px;
  }
  .fp-cat { backdrop-filter: none; }

  /* 7. 卡片：白底细线、小圆角、去重阴影 */
  .fp-card, .di-card, .av-card, .ae-card, .te-card, .fl-live-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none !important;
    border: 1px solid var(--ql-line);
  }
  .di-hero img, .av-img-scale img, .ae-big img,
  .fp-card img, .te-card img, .story-hub img,
  .featured-photos img, .third-eye img { border-radius: 6px; }
  .fl-live-btn { border-color: var(--ql-line) !important; }

  /* 8. 页脚去深蓝 */
  .footer-section {
    background: #20242b !important;
    color: #c9ced6 !important;
  }
  .footer-section a { color: #c9ced6 !important; }
}

/* ---------- 小屏 ≤480 视觉微调 ---------- */
@media (max-width: 480px) {
  .fl-big-title,
  .av-head-title, .di-head-title, .ae-head-title, .te-head-title,
  .av-sub-col > a { font-size: 18px !important; }
  .nav-tab { font-size: 15px !important; padding: 0 12px !important; }
  .brand-logo { height: 36px !important; }
  .hp > section:not(.hero):not(.ticker),
  .hp > div:not(.hero):not(.ticker) { margin-bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.1 精修：清除编译产物残留装饰 / 收敛旧色 / 修好吸顶
   ───────────────────────────────────────────────────────────────────
   实测发现（375 视口）：
     · .nav-tab.active 编译产物自带 ::before(15×10) + ::after(200×10 红条)
       + 三道 box-shadow，导致白底导航里仍有一块「卡片感」红块
     · .av-head-title::after 是 36×3 红线，与我加的红竖条叠成双重装饰
     · .av-square-sm / .fl-cat-dot 是蓝色小方块 / 蓝圆点
     · html/body 的 overflow-x:hidden 会创建滚动容器，sticky 失效
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* sticky 需要祖先不创建滚动容器：hidden 破坏，clip 不会 */
  html, body { overflow-x: clip !important; }

  /* 导航：清掉编译产物的红块、装饰与阴影，只留 2px 红色激活条 */
  .nav-tab.active { box-shadow: none !important; }
  .primary-nav .nav-tab.active::before { display: none !important; }
  .primary-nav .nav-tab.active::after {
    top: auto !important; bottom: 0 !important;
    left: 15px !important; right: 15px !important;
    width: auto !important; height: 2px !important;
    background: var(--ql-red) !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  /* 栏目标题：去掉原有红线 / 蓝方块，只保留一根红竖条 */
  .av-head-title::after, .di-head-title::after,
  .ae-head-title::after, .te-head-title::after { display: none !important; }
  .av-square-sm { display: none !important; }

  /* 深蓝 / 金色残留统一收敛 */
  .top-uber-bar, .top-uber-bar .uber-inner { color: #8b9099 !important; }
  .uber-brand-tag { color: #8b9099 !important; }
  .hot-title, .te-title, .te-group-title { color: var(--ql-ink) !important; }
  .hot-cat, .fl-cat-arrow, .av-sub-col { color: #6b7280 !important; }
  .fl-cat-link { color: var(--ql-ink) !important; }
  .fl-cat-link.active { color: var(--ql-red) !important; }
  .fl-cat-dot { background: var(--ql-red) !important; }

  /* 头条标题：编译产物带更高特异性 !important，这里用 .hp 前缀压过 */
  .hp .fl-big-title { font-size: 20px !important; }
  .hp .fl-big-title::before, .hp .fl-big-title::after { display: none !important; }

  /* 快讯品牌块 → 小胶囊 */
  .tk-brand { padding: 2px 8px !important; border-radius: 3px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.2 收尾：快讯条白底黑字 / 去蓝竖条 / 清最后几处旧色
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 栏目副标题容器自带 4px 蓝边，与我加的红竖条叠成双条 */
  .av-sub-col { border-left: 0 !important; }

  /* 快讯条原为深蓝底白字，改白底后必须把文字改回墨黑 */
  .ticker .tk-brand {
    height: 24px !important;
    align-self: center;
    display: flex !important;
    align-items: center;
    padding: 0 8px !important;
    border-radius: 3px !important;
  }
  .ticker .tk-track,
  .ticker .tk-item,
  .ticker .tk-t { color: var(--ql-text) !important; }
  .ticker .tk-t { font-size: 13px !important; }
  .ticker .tk-dot { background: var(--ql-red) !important; }
  .ticker .tk-cat {
    background: rgba(179, 32, 43, .08) !important;
    color: var(--ql-red) !important;
    border-radius: 2px;
  }

  /* 页脚金色下划线、顶部金色描边、剩余深蓝小标题 */
  .foot-title { border-bottom-color: rgba(255, 255, 255, .18) !important; }
  .uber-link.uber-rss { border-color: rgba(255, 255, 255, .18) !important; }
  .te-safety-title, .bm-title, .tc-title { color: var(--ql-ink) !important; }

  /* 头条区装饰细线统一为浅灰，去掉蓝色短横线 */
  .focus-live hr,
  .focus-live [class*="divider"],
  .focus-live [class*="-line"] {
    background: var(--ql-line) !important;
    border-color: var(--ql-line) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.3 定稿：去掉金/红双线、快讯「快讯」红胶囊、去重阴影
   ───────────────────────────────────────────────────────────────────
   实测：.focus-live 自带 border-top:3px #cc2936（红线）+
         ::before 是 240×3px 金色渐变 linear-gradient(#c8962e→#e5b94e)（黄线），
         两者叠在快讯条下方，是首屏最后一处杂色；.ticker 另有 0 3px 12px 重阴影。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .focus-live { border-top: 0 !important; }
  .focus-live::before {
    background: var(--ql-line) !important;
    height: 1px !important;
    width: 100% !important;
  }
  .ticker { box-shadow: none !important; }

  /* 快讯红方块 → 央视式「快讯」红色小胶囊 */
  .ticker .tk-brand svg { display: none !important; }
  .ticker .tk-brand::before {
    content: "快讯";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
  }

  /* 头条区剩余蓝色装饰线：只统一描边颜色，不动边框宽度 */
  .focus-live h1, .focus-live h2, .focus-live h3, .focus-live h4,
  .focus-live [class^="fl-"] { border-bottom-color: var(--ql-line) !important; }

  /* 头条标题下 80×3 深蓝短线 → 主红点缀 */
  .fl-headline::after { background: var(--ql-red) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   秦岭热线 · 移动端  v4 全站美化与适配  ·  2026-11-07
   ---------------------------------------------------------------------
   目标：把 v3 首页定稿的「央视网手机版：白底 / 墨黑 / 主红 / 浅灰缝」
        推广到导航 + 全部内页，并修掉内页结构溢出。
   依据：verify_mobile/audit_before/report.json（18 页 375px 基线）
         verify_mobile/diag_v4.json / diag_hero_dom.json（真实 DOM 与色值）
         test_fix.js 注入试验（文章页 70→0、地图页 13→0、登录页 1→0）
   约束：只在 ≤768px 生效；不改 377KB 主编译 CSS、后端、接口、桌面布局；
         桌面端下拉仍保持用户确认过的中国网蓝色样式，本段只做移动适配。
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --ql-red: #b3202b;
    --ql-red-deep: #961a23;
    --ql-ink: #1a1a1a;
    --ql-text: #333333;
    --ql-sub: #9a9a9a;
    --ql-bg: #f7f8fa;
    --ql-card: #ffffff;
    --ql-line: #ebedf0;
  }

  /* ── A. 结构层：消除内页横向溢出 ─────────────────────────────
     根因：文章页 .ad-body / .ad-title 被编译产物写死 926px；
           网站地图 .page-content 富文本 li/h3/b 撑宽；
           登录页 .el-card__body 固定 400px。
     ────────────────────────────────────────────────────────────── */
  .ad-body, .ad-title, .ad-main, .ad-wrap, .ad-content,
  .article-detail, .article-body, .article-content,
  .related-list, .related-item, .related-body, .related-text, .related-date,
  .sb-card, .sb-card-body, .ad-summary, .ad-meta, .ad-breadcrumb {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .ad-body, .ad-content, .article-content { display: block !important; }
  .ad-body p, .ad-body img, .ad-body table, .ad-body div, .ad-body span,
  .ad-title, .ad-summary *, .related-body *,
  .page-content, .page-content *, .page-body * {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .page-content table, .page-content pre, .ad-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-card, .el-card__body {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .el-card__body { padding: 20px !important; }
  .page-content, .page-body, .ad-wrap, .article-detail,
  .sr-main, .cl-main, .hot-main, .tc-main, .archive-main, .user-main {
    max-width: 100% !important;
    overflow-x: clip;
  }

  /* ── B. 内页 hero：深蓝大 banner → 央视式白底栏目标头 ────────
     实测根容器：.sr-hero(511) .cl-hero(435) .hot-hero(638)
                 .tc-hero(437) .archive-hero(513) .page-hero(175)
     内部有白字、半透明白字、透明渐变数字、橙/金/蓝装饰点。
     因此顺序必须是：先统一所有后代文字 → 再单独覆写标题/徽章/按钮。
     ────────────────────────────────────────────────────────────── */
  .sr-hero, .cl-hero, .hot-hero, .tc-hero, .archive-hero, .page-hero {
    background: var(--ql-card) !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px 16px 18px !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: none !important;
  }
  /* 背景渐变层 / 网格 / 光斑 / 装饰线：纯装饰，全部隐藏 */
  .sr-hero-bg, .cl-hero-bg, .hot-hero-bg, .tc-hero-bg, .archive-hero-bg,
  .sr-deco-grid, .cl-deco-grid, .tc-deco-grid, .ar-deco-grid, .deco-grid,
  .sr-deco-circle, .cl-deco-circle, .tc-deco-circle, .ar-deco-circle,
  .deco-circle, .badge-line,
  .sr-hero .dot, .cl-hero .dot, .hot-hero .dot, .tc-hero .dot,
  .archive-hero .dot {
    display: none !important;
  }
  /* hero 内所有文字：墨黑实心、取消透明渐变字、去文字阴影与渐变底 */
  .sr-hero *, .cl-hero *, .hot-hero *, .tc-hero *, .archive-hero *, .page-hero * {
    color: var(--ql-text) !important;
    -webkit-text-fill-color: var(--ql-text) !important;
    -webkit-background-clip: border-box !important;
    background-image: none !important;
    text-shadow: none !important;
  }
  /* 标题：墨黑 20px + 左侧 3px 主红竖条（与首页栏目标题一致） */
  .sr-hero-h1, .cl-hero-h1, .hot-hero-h1, .tc-hero-h1,
  .archive-hero-h1, .page-hero-title {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    background: none !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    padding-left: 12px !important;
    border-left: 3px solid var(--ql-red) !important;
  }
  /* 40px 橙/金/蓝大圆点 → 20px 主红小点 */
  .h1-dot {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  /* 徽章：主红小胶囊 */
  .sr-hero-badge, .cl-hero-badge, .hot-hero-badge,
  .tc-hero-badge, .archive-hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
    padding: 4px 9px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    letter-spacing: .5px;
  }
  .sr-hero-badge *, .cl-hero-badge *, .hot-hero-badge *,
  .tc-hero-badge *, .archive-hero-badge * {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    font-size: 11px !important;
  }
  /* 描述 / 英文副题 / 标签说明 → 次级灰 */
  .sr-hero-desc, .cl-hero-desc, .hot-hero-desc, .tc-hero-desc,
  .archive-hero-desc, .page-hero-sub, .cl-extra, .archive-hero-extra,
  .badge-en, .hr-lbl, .hs-lbl, .hs-sub-lbl, .sr-hot-tags-label {
    color: var(--ql-sub) !important;
    -webkit-text-fill-color: var(--ql-sub) !important;
    font-size: 12px !important;
  }
  /* 统计数字：background-clip:text 透明字 → 实心墨黑 */
  .hr-num, .hs-num, .hs-sub-num, .hs-unit {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    background: none !important;
    font-size: 20px !important;
    font-weight: 600 !important;
  }
  /* 搜索输入框：白底浅灰边 + 可见 placeholder */
  .sr-hero input, .sr-search-wrap input, .sr-search-input,
  .search-page input[type="text"] {
    background: var(--ql-card) !important;
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 6px !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }
  .sr-hero input::placeholder, .sr-search-wrap input::placeholder,
  .sr-search-input::placeholder { color: var(--ql-sub) !important; opacity: 1; }
  /* 主操作按钮：主红底白字（必须写在通配规则之后） */
  .sr-hero button, .sr-search-btn, .sr-search-wrap button,
  .el-button--primary, .ql-eng-btn {
    background: var(--ql-red) !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    min-height: 44px !important;
    box-shadow: none !important;
  }
  /* 热门标签：浅灰胶囊，主红字 */
  .sr-hot-tag {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
    padding: 4px 9px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center;
  }

  /* ── C. 全站色板：深蓝 / 金 / 橙 / 亮蓝 → 墨黑 / 主红 / 浅灰 ── */
  /* C1 标题与正文 */
  .ad-title, .ad-bc-cur, .subnav-title, .sr-side-title, .cl-bread-cur,
  .month-name, .month-m, .years-title, .sb-card-title, .nearby-title,
  .related-text, .featured-title, .cl-side-title, .sr-card-summary,
  .rest-header-text, .qlcs-lead, .tl-summary, .tc-side-title {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
  }
  /* C2 元信息与次级文字 */
  .related-date, .sb-info-lbl, .sb-info-val, .tl-footer, .tl-views,
  .hc-date, .hc-stats, .hc-views-num, .top3-views-lbl, .cl-card-desc,
  .sr-card-meta, .sr-side-tips, .meta-pill, .share-label, .ad-meta,
  .month-badge, .month-chevron, .nearby-label, .nearby-arrow,
  .subnav-hint, .featured-date, .featured-views, .cl-side-text,
  .meta-item, .sr-search-clear, .step-label, .ql-eng-n {
    color: var(--ql-sub) !important;
  }
  /* C3 彩色小标签 → 主红文字 + 浅红底 */
  .card-cat, .cl-side-tag, .top3-cat, .hc-cat, .qlcs-chip,
  .tc-tag-count, .tb-keyword, .tc-tag-name {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    border-color: rgba(179, 32, 43, .16) !important;
  }
  /* C4 排行榜序号 / 计数徽章 */
  .hc-rank-num, .top3-rank-tag, .sb-hot-rank, .tb-num, .step-badge,
  .month-badge, .tc-tag-count {
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    border-radius: 3px !important;
  }
  /* C5 摘要框：金/蓝渐变 → 白卡浅灰边 + 红竖条 */
  .ad-summary, .page-summary {
    background: var(--ql-card) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-left: 3px solid var(--ql-red) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 14px !important;
    color: var(--ql-text) !important;
  }
  .sum-deco, .page-summary::before { display: none !important; }
  /* C6 月份分隔条 / 页面内浅蓝装饰块 */
  .month-sep {
    background: var(--ql-line) !important;
    background-image: none !important;
    height: 1px !important;
    border: 0 !important;
  }
  [class*="-hero"] + [class*="summary"],
  .page-content [style*="linear-gradient"] {
    background: var(--ql-bg) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
  }
  /* C7 svg 图标：金/蓝 currentColor → 灰 */
  .ad-body svg, .ad-body svg *, .sb-card svg, .sb-card svg *,
  .cl-card svg, .cl-card svg *, .sr-side svg, .sr-side svg *,
  .archive-main svg, .archive-main svg * {
    color: var(--ql-sub) !important;
  }
  /* C8 激活态统一为主红（原为深蓝/橙/金） */
  .hot-tab-btn.active, .tc-tab-btn.active, .sort-btn.active,
  .year-btn.active, .step-item.active, .sr-s.router-link-active,
  .router-link-active.sr-s, .fl-cat-link.active, .tc-tab-btn[class*="active"] {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    border-color: var(--ql-red) !important;
    box-shadow: none !important;
  }
  .subnav-dot, .fl-cat-dot { background: var(--ql-red) !important; }
  /* C9 卡片：白底、浅灰细缝、8px 圆角、去重重阴影 */
  .sb-card, .sr-card, .cl-card, .hc-item, .related-item,
  .qlcs-card, .el-card {
    background: var(--ql-card) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  /* ── D. 导航：全站吸顶 + 下拉 + 二级栏统一 ─────────────────
     注：下拉文字色保持用户确认过的中国网蓝 #0046ae，仅做移动适配。
     ────────────────────────────────────────────────────────────── */
  .primary-nav {
    background: var(--ql-card) !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02) !important;
  }
  .nav-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    background: var(--ql-card) !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .07) !important;
  }
  .dd-item { font-size: 14px !important; min-height: 44px; }
  .subnav, .subnav-inner, .sr-tabs, .cl-tabs, .hot-tabs,
  .tc-tabs, .year-tabs, .sort-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    max-width: 100% !important;
  }
  .subnav::-webkit-scrollbar, .sr-tabs::-webkit-scrollbar,
  .cl-tabs::-webkit-scrollbar, .hot-tabs::-webkit-scrollbar,
  .tc-tabs::-webkit-scrollbar, .year-tabs::-webkit-scrollbar,
  .sort-tabs::-webkit-scrollbar { display: none; }
  .subnav-title {
    color: var(--ql-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* ── E. 可读性：过小字号 ≥12px，主要点击项 ≥40px ─────────── */
  .ql-ft-home-en, .fl-sub-sep, .fp-cat, .badge-en, .hr-lbl,
  .hs-lbl, .hs-sub-lbl, .sr-hot-tags-label, .featured-date,
  .tl-views, .hc-date, .related-date, .month-m {
    font-size: 12px !important;
  }
  .sr-hot-tag, .qlcs-chip, .sort-btn, .hot-tab-btn,
  .tc-tab-btn, .year-btn, .tc-tag, .el-button {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.1 精修（注入试验第 2 轮）
   实测根因：
     · .sr-hero-inner 等是 display:flex，把 .hero-left 挤到 x=76，
       搜索框 301px 从 76 开始 → 右侧按钮被裁切。
     · .hero-right 统计块纵向堆 321px，是 hero 仍高达 436~533px 的主因。
     · .primary-nav::before 是 linear-gradient(...rgba(200,150,46...)) 金色遮罩。
     · .*-hero-badge 第二行 .badge-en 让徽章高 47~51px。
     · .hero-right::before 是横向渐变装饰线（tags 页数字上方的蓝线）。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 装饰层容器整体隐藏（内部圆点/网格已隐藏，容器本身 375×435 会挡点击） */
  .sr-hero-deco, .cl-hero-deco, .hot-hero-deco,
  .tc-hero-deco, .archive-hero-deco { display: none !important; }

  /* 内层改正常流式、占满宽度 */
  .sr-hero-inner, .cl-hero-inner, .hot-hero-inner,
  .tc-hero-inner, .archive-hero-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .hero-left, .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  .hero-left { margin-bottom: 0 !important; }

  /* 统计区：紧凑横排，去掉渐变线、白边、进度条 */
  .hero-right {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ql-line) !important;
  }
  .hero-right::before, .hero-right::after,
  .hs-bar, .hs-bar-fill { display: none !important; }
  .hero-right > * { margin: 0 !important; }
  .hr-num, .hs-num, .hs-sub-num, .hs-unit { font-size: 17px !important; }
  .hr-lbl, .hs-lbl, .hs-sub-lbl {
    font-size: 11px !important;
    white-space: nowrap;
  }
  /* 徽章只留一行主标题 */
  .badge-en { display: none !important; }

  /* 搜索框：整行铺满，输入框自适应，按钮固定 44px 不再被裁 */
  .sr-search-box, .sr-search-wrap, .sr-hero .search-box {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    background: var(--ql-card) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .sr-search-box input, .sr-search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 8px !important;
  }
  .sr-search-box button, .sr-search-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 4px !important;
  }

  /* 导航金色渐变遮罩：去掉，保留白底 */
  .primary-nav::before, .primary-nav::after {
    background: none !important;
    background-image: none !important;
  }

  /* 网站地图标题 / 标签云 / 搜索高亮 / 零散杂色 */
  .page-content h2, .page-content h3,
  .page-content h2 *, .page-content h3 *,
  .page-content b, .page-content strong { color: var(--ql-ink) !important; }
  .tc-tag, .tc-cloud {
    background: var(--ql-card) !important;
    background-image: none !important;
    border-color: var(--ql-line) !important;
  }
  .tc-tag-count { background: rgba(179, 32, 43, .06) !important; }
  .search-box svg, .search-box svg *,
  .sr-side svg, .sr-side svg *,
  .sr-hero svg, .sr-hero svg * {
    color: var(--ql-sub) !important;
    stroke: var(--ql-sub) !important;
  }
  .hl, strong.hl, .sr-card-summary strong,
  .sr-card-summary .hl, .sr-card-title strong {
    color: var(--ql-red) !important;
    background: none !important;
    font-weight: 600 !important;
  }
  .av-square, .cl-feat-badge, .top3-views {
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.2 收尾（注入试验第 3 轮）
   实测：
     · .hero-right 自带 1px 浅灰全边框 + 16px 圆角 + rgba(255,255,255,.04)
       半透明底，白底上形成一个多余灰框 → 只保留顶部 1px 分隔线。
     · hot 领奖台 .top3-card.podium-gold 是 1px rgb(255,215,0) 金边 +
       金/银/铜渐变底 + .top3-glow 金色径向光晕 → 统一白卡。
     · .tc-tag.level-* 自身 color 仍为 rgb(200,150,46) / rgb(0,58,112)。
     · .tc-tab-btn 文字被挤成两行（107×64），需 nowrap。
     · collections 红/绿卡片是 <img src="/uploads/covers/..."> 真实封面图，
       属站点素材，不用 CSS 处理。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* hero 统计区：去掉多余灰框 */
  .hero-right {
    border: 0 !important;
    border-top: 1px solid var(--ql-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 热门排行领奖台：金/银/铜 → 白卡 + 主红第一名称号 */
  .top3-card, .top3-card[class*="podium"] {
    background: var(--ql-card) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .top3-card:first-child { border-left: 3px solid var(--ql-red) !important; }
  .top3-glow { display: none !important; }
  .top3-rank-tag { border-color: rgba(179, 32, 43, .2) !important; }
  .top3-medal, .top3-medal svg, .top3-medal svg * { color: var(--ql-red) !important; }

  /* 标签云文字色归一（子 .tc-tag-name 仍为主红） */
  .tc-tag { color: var(--ql-text) !important; }
  .tc-tag-count { color: var(--ql-red) !important; }

  /* tab 按钮不折行，父容器可横滑 */
  .tc-tab-btn, .hot-tab-btn, .sort-btn, .year-btn {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-height: 38px !important;
  }
  .tc-tab-bar, .hot-tab-bar, .sort-bar, .year-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100% !important;
  }
  .tc-tab-bar::-webkit-scrollbar, .hot-tab-bar::-webkit-scrollbar,
  .sort-bar::-webkit-scrollbar, .year-bar::-webkit-scrollbar { display: none; }

  /* 搜索页 SVG 图标金/蓝 currentColor → 灰；按钮内图标保持白色 */
  [class*="sr-"] svg, [class*="sr-"] svg * { color: var(--ql-sub) !important; }
  .sr-hero button svg, .sr-hero button svg *,
  .sr-search-btn svg, .sr-search-btn svg * { color: #fff !important; }
  [class*="hl"], mark, em.hl {
    color: var(--ql-red) !important;
    background: none !important;
  }

  /* 导航横滑容器：保险起见去掉任何渐变底 / 遮罩（不影响红激活条） */
  .page-w.nav-row, .nav-tabs {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.3 定稿：清掉编译产物里藏在伪元素上的橙/金装饰
     · .hot-tab-btn::before = linear-gradient(135deg,#cc2936,#ff6b35)
       三个 tab 都有，激活时显示，是最后一处橙红实心块。
     · .podium-gold::after = content:"CHAMPION"; color:#daa520
       冠军卡片右上角的金色英文。
   两者都是纯装饰，隐藏后激活态仍由浅红底 + 主红字表达。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hot-tab-btn::before, .hot-tab-btn::after,
  .tc-tab-btn::before, .tc-tab-btn::after,
  .sort-btn::before, .year-btn::before { display: none !important; }
  .top3-card.podium-gold::after { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.5 · 分类 / 栏目专项美化（2026-11-07 定稿，7 轮注入试验）
   ---------------------------------------------------------------------
   覆盖：栏目页 hero、qlcs 资讯电报/观察透镜、subnav 栏目导航、
         首页 fp-cat 分类标签、fl-live 栏目标头、导航阴影、行业卡序号
   约束：仅 <=768px；桌面端零影响；首页轮播与交互 DOM 不变
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   秦岭热线 · 移动端  v4.5 分类专项美化  ·  2026-11-07
   ---------------------------------------------------------------------
   问题：分类（栏目）页仍保留一套「按栏目变主题色」的旧视觉
     · 内联 style 注入 --cs:#dc2626（秦岭资讯）/ --cs:#2563eb（秦岭视点）
       以及 .subnav-card / .featured-article 的 --accent / --accent-light
     · .hero-slide-overlay 深红 / 深蓝渐变 + 白字 + 220px 大横幅
     · .qlcs-* 资讯电报卡是粉红信纸纹理、.qlcs-quote / .qlcs-lens-c 浅蓝渐变
     · .subnav-card-arrow / .qlcs-cur / .qlcs-eno 全部跟随栏目主题色
   目标：统一到 v4 的白底 / 墨黑 / 主红 / 浅灰缝。
   安全边界：
     · .hero-slide-overlay 只在分类页出现（首页轮播用 .carousel-caption），
       所有 hero 规则加 .hero-slide 作用域，不影响已定稿的首页轮播。
     · 不隐藏轮播容器、不改 DOM，保留左右切换交互；只换视觉。
     · 只在 ≤768px 生效，桌面端零影响。
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── 1. 栏目主题色归一（内联 style 用 !important 压过）─────────── */
  .qlcs, .subnav-card, .featured-article, .industry-card,
  [class*="qlcs-"], [class*="subnav-"] {
    --cs: #b3202b !important;
    --accent: #b3202b !important;
    --accent-light: rgba(179, 32, 43, .08) !important;
  }

  /* ── 2. 分类页 hero：深红/深蓝渐变 → 白底栏目标头 ──────────────
     顺序：先统一所有后代文字 → 再单独覆写标题 / 面包屑 / 统计 / 箭头。
     ────────────────────────────────────────────────────────────── */
  .hero-slide {
    background: var(--ql-card) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: none !important;
  }
  .hero-slide-overlay, .hero-slide-gradient {
    background: transparent !important;
    background-image: none !important;
  }
  /* 栏目封面底图：白底上不再叠图，避免文字对比度失控 */
  .hero-slide img, .hero-slide [class*="-bg"], .hero-slide [class*="img-wrap"] {
    display: none !important;
  }
  .hero-slide * {
    color: var(--ql-text) !important;
    -webkit-text-fill-color: var(--ql-text) !important;
    background-image: none !important;
    text-shadow: none !important;
  }
  .hero-slide .hero-icon { display: none !important; }
  .hero-slide .hero-title {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    background: none !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    padding-left: 12px !important;
    border-left: 3px solid var(--ql-red) !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .hero-slide a, .hero-slide .hero-bc-cur, .hero-slide .hero-bc-sep {
    color: var(--ql-sub) !important;
    -webkit-text-fill-color: var(--ql-sub) !important;
    font-size: 12px !important;
  }
  .hero-slide .hero-desc {
    color: var(--ql-sub) !important;
    -webkit-text-fill-color: var(--ql-sub) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  .hero-slide .hero-stats {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--ql-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .hero-slide .hero-stat-num {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    background: none !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  .hero-slide .hero-stat-label {
    color: var(--ql-sub) !important;
    -webkit-text-fill-color: var(--ql-sub) !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  /* 左右切换箭头：半透明白圆在白底上不可见 → 浅灰圆 + 墨黑箭头 */
  .hero-slide [class*="arrow"], .hero-slide [class*="nav-btn"],
  .el-carousel__arrow {
    background: rgba(26, 26, 26, .05) !important;
    background-image: none !important;
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  /* ── 3. 资讯电报 / 观察透镜卡（.qlcs-*）──────────────────────── */
  .qlcs-wrap, .qlcs-inner, .qlcs-head, .qlcs-body {
    background: transparent !important;
    background-image: none !important;
  }
  .qlcs-eno {
    color: var(--ql-sub) !important;
    font-size: 11px !important;
    letter-spacing: 1px;
  }
  .qlcs-title {
    color: var(--ql-ink) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding-left: 12px !important;
    border-left: 3px solid var(--ql-red) !important;
  }
  .qlcs-lead {
    color: var(--ql-sub) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
  .qlcs-cur {
    color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
  }
  /* 信纸纹理 → 白卡浅灰缝 */
  .qlcs-wire {
    background: var(--ql-card) !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .qlcs-wire-badge {
    background: var(--ql-red) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 3px !important;
    font-size: 11px !important;
  }
  .qlcs-wire-i { border-left-color: var(--ql-red) !important; }
  /* 观察透镜：浅蓝底 / 浅蓝渐变 → 白卡 */
  .qlcs-quote, .qlcs-lens-c, .qlcs-lens-grid {
    background: var(--ql-card) !important;
    background-image: none !important;
    border-color: var(--ql-line) !important;
    color: var(--ql-text) !important;
  }
  .qlcs-quote { border-left: 3px solid var(--ql-red) !important; }
  .qlcs-chip {
    color: var(--ql-red) !important;
    background: rgba(179, 32, 43, .06) !important;
    border-color: rgba(179, 32, 43, .16) !important;
    border-radius: 4px !important;
    min-height: 40px !important;
  }
  .qlcs-nav { border-top: 1px solid var(--ql-line) !important; }

  /* ── 4. 栏目导航（.subnav-*）─────────────────────────────────── */
  .subnav-wrap {
    background: var(--ql-card) !important;
    background-image: none !important;
    border-top: 1px solid var(--ql-line) !important;
    border-bottom: 1px solid var(--ql-line) !important;
  }
  .subnav-title {
    color: var(--ql-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .subnav-card {
    background: var(--ql-card) !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .subnav-card-arrow {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
  }
  .featured-overlay { background-image: none !important; }

  /* ── 5. 首页分类标签：深红实心块 → 主红浅底 ──────────────────── */
  .fp-cat {
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.5 精修（注入试验第 2 轮）
     · 白色圆角空块 = .hero-icon-box（60×60、圆角 20px、白色 inset 阴影），
       之前只隐藏了内部 .hero-icon，盒子仍在。
     · hero 文字错位 = .hero-slide-body 是 flex，.hero-text-block 被限死
       233px；隐藏图标后仍未重排，导致描述/统计折行溢出。
     · 粉红大圆弧 = .qlcs::after（纯色 + 圆角），顶部红线 = .qlcs::before。
     · .tl-time / .tl-dot / .ind-card-* 仍残留栏目主题色。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* hero 改正常流式，文字占满整行 */
  .hero-slide .hero-icon-box { display: none !important; }
  .hero-slide .hero-slide-content {
    display: block !important;
    padding: 12px 16px !important;
    margin: 0 !important;
  }
  .hero-slide .hero-slide-body,
  .hero-slide .hero-slide-left,
  .hero-slide .hero-text-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .hero-slide .hero-text-block { padding-top: 10px !important; }
  .hero-slide .hero-title,
  .hero-slide .hero-desc,
  .hero-slide .hero-stats { width: 100% !important; max-width: 100% !important; }
  .hero-slide .hero-stat-divider { display: none !important; }
  .hero-slide .hero-stat-item {
    display: inline-flex !important;
    align-items: baseline;
    gap: 4px;
    margin-right: 12px !important;
  }
  .hero-slide-badge { background: var(--ql-red) !important; }

  /* qlcs 装饰收敛 */
  .qlcs::after { display: none !important; }
  .qlcs::before {
    background: var(--ql-line) !important;
    background-image: none !important;
    height: 1px !important;
  }
  .qlcs-wire-line {
    background: var(--ql-line) !important;
    background-image: none !important;
    height: 1px !important;
  }
  .qlcs-chip { border-color: var(--ql-line) !important; }
  .qlcs-chip::before { background: var(--ql-red) !important; }

  /* 时间轴 / 行业卡片残留主题色 */
  .tl-dot { background: var(--ql-red) !important; }
  .tl-time, .tl-source, .tl-views, .tl-footer { color: var(--ql-sub) !important; }
  .ind-card-num, .ind-tag, .ind-card-read, .ind-card-arrow {
    color: var(--ql-red) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.5 精修（注入试验第 3 轮 / 定稿）
     · 箭头压住标题：.el-carousel__arrow 挂在 .hero-carousel 下，
       并非 .hero-slide 后代，之前的作用域写错，颜色规则没解决遮挡。
       移动端隐藏箭头，改为触摸滑动切换；桌面端（>768px）不受影响。
     · 白底 hero 固定 220px，文字仅占约 150px，上下留白偏大 → 压到 172px。
     · .el-image / .hero-slide-img 是 div 而非 <img>，"img 选择器" 未命中，
       仍占满 375×219；连同 overlay / gradient 一起隐藏，白底更干净。
     · .ind-card-num 残留 = 硬编码圆底 rgba(37,99,235,.85)，
       不是 CSS 变量，需单独覆盖 background。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. 只在分类页轮播上隐藏箭头，桌面端保留左右切换 */
  .hero-carousel .el-carousel__arrow { display: none !important; }

  /* 2. 压缩白底栏目标头 */
  .hero-carousel,
  .hero-carousel .el-carousel__container {
    height: 172px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero-slide {
    height: 100% !important;
    min-height: 0 !important;
  }
  .hero-slide .el-image,
  .hero-slide .hero-slide-img,
  .hero-slide .hero-slide-overlay,
  .hero-slide .hero-slide-gradient { display: none !important; }
  .hero-slide .hero-slide-content {
    height: auto !important;
    padding: 14px 16px 12px !important;
  }
  .hero-slide .hero-breadcrumb {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }
  .hero-slide .hero-text-block { padding-top: 0 !important; }
  .hero-slide .hero-stats { margin-top: 8px !important; padding-top: 8px !important; }

  /* 3. 行业卡序号：蓝底 → 浅红底主红字（与 .qlcs-cur / .fp-cat 同色板） */
  .ind-card-num,
  .industry-card .ind-card-num {
    background: rgba(179, 32, 43, .08) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    box-shadow: none !important;
  }
}

/* ── 第 4 轮：压缩高度必须提特异性 ──────────────────────────────
   懒加载分块 CategoryLoader-*.css 内写死：
     .hero-carousel[data-v-xxx] .el-carousel__container{height:220px!important}
   特异性 (0,3,0)，压过上面 (0,2,0) 的写法。这里提到 (0,4,0)，
   与加载顺序无关，稳定生效；桌面端不在 @media 内，完全不受影响。
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-wrap .hero-carousel[class] .el-carousel__container,
  .hero-wrap .hero-carousel .el-carousel__container[class],
  .hero-carousel[class][class] .el-carousel__container {
    height: 172px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ── 第 5 轮：修「面包屑被吸顶导航压住上半截」─────────────────
   实测几何（375px）：.primary-nav bottom=217，.hero-wrap top=193，
   重叠 24px（.hero-wrap 自带 margin-top:-24px，是原深色大图让导航
   悬浮的设计）。v4 靠 .hero-breadcrumb margin-top:28px 躲开（bc top=237）；
   白底化压缩时把它归零，bc 上移到 207 被导航盖住。
   这里不改负 margin（避免改动首页/其他页共用布局），改用顶部
   padding 补偿 24px，并把容器从 172 提到 190，保证内容不被裁切。
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-carousel,
  .hero-wrap .hero-carousel[class] .el-carousel__container,
  .hero-wrap .hero-carousel .el-carousel__container[class],
  .hero-carousel[class][class] .el-carousel__container {
    height: 190px !important;
  }
  .hero-slide .hero-slide-content {
    padding: 38px 16px 12px !important;
    height: auto !important;
  }
}

/* ── 第 6 轮：首页分类标签 / 导航阴影 ───────────────────────────
   · .fp-cat 在 v4 定稿第 432 行已被改成主红实心块，且编译产物
     .fp-cat[data-v-xxx] 带作用域属性；同特异性 + !important 时
     我的浅底规则被压过（实测 border 生效、background/color 未生效）。
     这里把特异性提到 (0,3,0)，稳定改为浅红底主红字。
   · v3.1 只清了 .nav-tab.active 的三道 box-shadow，分类页非激活
     tab（.router-link-active.nav-tab）仍带
     rgba(0,0,0,.25) -16px 0 12px -2px / 16px 0 12px -2px，
     在横滑导航左右两端形成灰色脏块。统一清除。
   · .tk-cat 边框仍是旧金色 rgba(252,211,77,.2)，收敛为主红细边。
   全部只在 ≤768px 生效，桌面端零影响。
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fp-cat[class][class],
  .fp-card .fp-cat[class] {
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 7px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .primary-nav .nav-tab,
  .primary-nav .nav-tab[class] { box-shadow: none !important; }
  .primary-nav .nav-tab::after { background: var(--ql-red) !important; }
  .tk-cat { border-color: rgba(179, 32, 43, .16) !important; }
}

/* ── 第 7 轮：首页「焦点直播」栏目标头 ─────────────────────────
   截图里 y≈662 的深红渐变旗块是 .fl-live-label（不是 .fp-cat）：
     background: linear-gradient(135deg,#cc2936,#a91d27)
     ::after 是右端 8px 三角旗；子元素 .fl-live-pulse 是白圆点
   下面 .fl-notice-tag 在 v4 里已由金色渐变改成主红实心块，
   仍是「实心红」，与央视网风格不统一。
   统一为：3px 主红竖条 + 墨黑栏目标题 + 主红小圆点，
   标签改浅红底主红字（与 .qlcs-cur / .fp-cat / .ind-card-num 一致）。
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fl-live-label[class] {
    background: transparent !important;
    background-image: none !important;
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 0 0 0 12px !important;
    border-left: 3px solid var(--ql-red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .fl-live-label[class]::after { display: none !important; }
  .fl-live-label .fl-live-pulse {
    background: var(--ql-red) !important;
    box-shadow: none !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
  }
  .fl-notice-tag[class] {
    background: rgba(179, 32, 43, .06) !important;
    background-image: none !important;
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    border: 1px solid rgba(179, 32, 43, .16) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 2px 7px !important;
    box-shadow: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v4.6 手机版导航专项：更轻 / 更紧凑 / 更统一（仅 ≤768px）
   ───────────────────────────────────────────────────────────────────
   实测基线（375px）：
     · .top-uber-bar 32px + .site-header 134px = 导航从 y=166 才开始
     · .primary-nav 51px，.page-w.nav-row 左右 20px，10 个 tab 总宽 888px
     · 首页 .nav-tab 宽 200px，因为带「首页 + HOME」英文副标
     · 首页激活条 170×2，过长；内页 .router-link-active 残留 200×10 旧红块
     · 内页同时存在「首页HOME」与「秦岭资讯」两个红色项（父级 router-link-active）
     · .nav-dropdown 4 项 + 20px gap + 20px padding，在 375 宽下首项 x=-10 / 末项右=386
   本轮只改头部与导航的几何、层级、激活态；保留用户确认过的下拉文字蓝 #0046ae，
   不碰主编译 CSS、后端、接口与 ≥1024 桌面布局。
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── 1. 顶栏 / 品牌区：压缩 30px 左右，让导航更早进入视野 ─────── */
  .top-uber-bar,
  .top-uber-bar .page-w.uber-inner {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 11px !important;
  }
  .top-uber-bar .uber-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .top-uber-bar .uber-date { letter-spacing: .1px !important; }
  .top-uber-bar .uber-submit { padding: 3px 9px !important; border-radius: 4px !important; }

  .site-header {
    height: auto !important;
    padding: 6px 12px !important;
    background: var(--ql-card) !important;
  }
  .header-row {
    padding: 0 !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .brand-logo { height: 38px !important; }
  .header-search { width: 100% !important; margin: 0 !important; }
  .header-search .hot-tags,
  .header-actions { display: none !important; }
  /* 搜索框保持 44px 触摸目标，压缩只靠顶栏 / logo / 间距完成 */
  .search-box {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 22px !important;
    background: #f4f5f7 !important;
    border: 1px solid var(--ql-line) !important;
  }
  .search-input {
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 26px !important;
    box-sizing: border-box !important;
  }
  .search-box .search-ico { font-size: 15px !important; }

  /* ── 2. 主导航：46px 白底吸顶 + 右侧渐隐提示可横滑 ────────────── */
  .primary-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    height: 46px !important;
    min-height: 46px !important;
    background: var(--ql-card) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .04) !important;
    overflow: visible !important;
  }
  .primary-nav::before { display: none !important; }
  .primary-nav::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 30px !important;
    height: auto !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92) 55%, #fff 100%) !important;
    background-color: transparent !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  .page-w.nav-row {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-padding-left: 14px !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .page-w.nav-row::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tabs {
    height: 46px !important;
    min-height: 46px !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .nav-tab-wrapper { height: 46px !important; min-height: 46px !important; }
  .primary-nav .nav-tab,
  .primary-nav .nav-tab[class] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* 编译产物里 .nav-tab-more 用 width:0 隐藏；统一 width:auto 后需单独保持 0 */
  .primary-nav .nav-tab.nav-tab-more,
  .primary-nav .nav-tab.nav-tab-more[class] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .primary-nav .nav-tab-label {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
  }
  /* 去掉首页「HOME」英文副标：手机端只保留中文栏目，减少 140px 横滑宽度 */
  .primary-nav .ql-ft-home-en { display: none !important; }

  /* ── 3. 激活态：清除父级 router-link-active 的双红项 / 旧红块 ───── */
  .primary-nav .nav-tab.router-link-active:not(.active):not(.router-link-exact-active),
  .primary-nav .nav-tab.router-link-active:not(.active):not(.router-link-exact-active) .nav-tab-label {
    color: var(--ql-ink) !important;
    -webkit-text-fill-color: var(--ql-ink) !important;
    font-weight: 500 !important;
  }
  .primary-nav .nav-tab::before,
  .primary-nav .nav-tab.router-link-active:not(.active):not(.router-link-exact-active)::after,
  .primary-nav .nav-tab.router-link-active:not(.active):not(.router-link-exact-active)::before {
    display: none !important;
  }
  .primary-nav .nav-tab.active,
  .primary-nav .nav-tab.router-link-exact-active,
  .primary-nav .nav-tab.active .nav-tab-label,
  .primary-nav .nav-tab.router-link-exact-active .nav-tab-label {
    color: var(--ql-red) !important;
    -webkit-text-fill-color: var(--ql-red) !important;
    font-weight: 600 !important;
  }
  .primary-nav .nav-tab.active::after,
  .primary-nav .nav-tab.router-link-exact-active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: 24px !important;
    height: 3px !important;
    max-width: 60% !important;
    transform: translateX(-50%) !important;
    background: var(--ql-red) !important;
    background-image: none !important;
    border-radius: 2px 2px 0 0 !important;
    box-shadow: none !important;
    z-index: 3 !important;
  }

  /* ── 4. 二级下拉：保留中国网蓝文字，改成不越界的 2 列轻卡片 ────── */
  .nav-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px 14px !important;
    background: var(--ql-card) !important;
    background-image: none !important;
    border-top: 1px solid var(--ql-line) !important;
    border-bottom: 1px solid var(--ql-line) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08) !important;
    z-index: 200 !important;
    overflow: hidden !important;
  }
  .nav-dropdown::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 0 !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--ql-red) !important;
  }
  /* 头部压缩后，原 translateY(-24px) 入场会让面板初始位置盖住导航标签，
     触发 wrapper 的 mouseleave → 220ms 后面板自动关闭。
     移动端改为纯淡入，保留桌面端的整体下滑动画。 */
  .primary-nav .nav-dropdown.dd-fade-enter-from,
  .primary-nav .nav-dropdown.dd-fade-enter-active,
  .primary-nav .nav-dropdown.dd-fade-enter-to {
    transform: none !important;
  }
  .primary-nav .nav-dropdown.dd-fade-enter-active {
    transition: opacity .18s ease !important;
  }
  .nav-dropdown .dd-item,
  .nav-dropdown .dd-item[class] {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #0046ae !important;
    -webkit-text-fill-color: #0046ae !important;
    background: #f7f8fa !important;
    background-image: none !important;
    border: 1px solid var(--ql-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* ── 5. 栏目二级导航：跟随新的紧凑节奏 ─────────────────────────── */
  .subnav-wrap { padding-top: 2px !important; }
  .subnav, .subnav-inner {
    gap: 8px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .subnav-card { border-radius: 8px !important; }
}

@media (max-width: 480px) {
  .top-uber-bar .uber-brand-tag,
  .top-uber-bar .uber-divider,
  .top-uber-bar .uber-left > .uber-link { display: none !important; }
  .primary-nav .nav-tab,
  .primary-nav .nav-tab[class] { padding: 0 12px !important; font-size: 15px !important; }
}