/* ============================================================
   home.css — 首页专属视觉层（仅 index.html 引用，不影响列表/详情页）
   合并自 v3.0 视觉跃迁层 + v3.1 顶栏冠部 + v1.1 首页细节优化
   2026-10-20  内页样式已回滚至 V2.0 基线
   ============================================================ */

/* ============================================================
   v3.0 视觉跃迁层（2026-10-20）
   目标：更深的层次、更克制的配色、更强的阅读节奏与质感
   追加式；删除本段即回到 v2.17（方角骨架不变，主色仍亮蓝）
   ============================================================ */

/* ---------- 0. 设计变量 / 页面底 ---------- */
:root{
  --navy-1:#0a2b50; --navy-2:#0f3a6b; --navy-3:#1b5fa8;
  --gold-1:#efd39a; --gold-2:#c9a25c;
  --hair-2:rgba(15,45,80,.075);
  --sh-1:0 1px 2px rgba(15,45,80,.04), 0 3px 10px -2px rgba(15,45,80,.06);
  --sh-2:0 2px 4px rgba(15,45,80,.05), 0 18px 40px -22px rgba(15,45,80,.38);
  --ease:cubic-bezier(.2,.7,.3,1);
}
body{
  background-color:#fff;
  background-image:none;
}
html{scroll-behavior:smooth}
::selection{background:rgba(27,121,216,.16); color:#0a2b50}

/* ---------- 1. 顶栏：更轻的线、链接滑线 ---------- */
.topbar{background:linear-gradient(180deg,#fff,#fbfcff); border-bottom:1px solid var(--hair-2); color:#79838f;}
.topbar-in{height:36px;}
.tb-links a{position:relative; padding:0 1px; color:#5b6674; transition:color .2s;}
.tb-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:linear-gradient(90deg,var(--navy-2),#3fa9f5);
  transform:scaleX(0); transform-origin:left; transition:transform .26s var(--ease);
}
.tb-links a:hover::after{transform:scaleX(1);}
.tb-links i{background:#dfe4ec;}

/* ---------- 2. 头部：留白节奏 + 搜索框聚焦态 ---------- */
.hd{padding:20px 0 18px; border-bottom:1px solid rgba(15,45,80,.05);}
.hd-logo img{filter:drop-shadow(0 6px 14px rgba(15,45,80,.10)); transition:transform .3s var(--ease);}
.hd-logo:hover img{transform:translateY(-1px);}
.hd-search input{border-color:#dfe6f0; background:#fbfcfe; transition:border-color .2s,background .2s,box-shadow .2s;}
.hd-search input:focus{background:#fff; border-color:#1b79d8; box-shadow:0 0 0 3px rgba(27,121,216,.12);}
.hd-search button{background:linear-gradient(135deg,#1b79d8,#0e4f9e); letter-spacing:2px; box-shadow:0 6px 16px -8px rgba(27,121,216,.85);}
.hd-search button:hover{background:linear-gradient(135deg,#1668c4,#0b3f80);}

/* ---------- 3. 主导航：吸顶 + 磨砂玻璃（滚动时始终可见） ---------- */
.nav{
  position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:0; border-bottom:1px solid rgba(15,45,80,.09);
  box-shadow:0 10px 26px -24px rgba(15,45,80,.85);
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,rgba(27,121,216,0),rgba(27,121,216,.42),rgba(27,121,216,0));
}
.nav li a{padding:14px 0 12px; font-size:16.5px; letter-spacing:.6px; color:#2c3644; transition:color .2s;}
.nav li a::after{height:2px; background:linear-gradient(90deg,#1b79d8,#3fa9f5);}
.nav li.on a{color:#1259a8;}

/* ---------- 4. 卡片：分层阴影 + 悬停浮起 ---------- */
.card{
  background:linear-gradient(180deg,#fff 0%,#fdfeff 100%);
  border:1px solid var(--hair-2); box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:rgba(27,121,216,.20);}
.card::before{height:3px; background:linear-gradient(90deg,#0f3a6b,#1b79d8 45%,#3fa9f5);}

/* ---------- 5. 栏目头：更硬的字重 + 细线分隔 + 幽灵“更多” ---------- */
.card-tit{padding:14px 16px 12px; border-bottom:1px solid #eef2f7;}
.card-tit > a:first-child{font-size:17.5px; font-weight:800; letter-spacing:.6px; color:#1a2430 !important;}
.card-tit > a:first-child::before{width:3px; height:15px; background:linear-gradient(180deg,#3fa9f5,#1b6fc4);}
.card-tit .more{
  font-size:12.5px; color:#8b95a3 !important; border-color:transparent; background:transparent;
  padding:2px 2px; letter-spacing:.5px; transition:color .2s,letter-spacing .2s;
}
.card-tit .more:hover{background:transparent; border-color:transparent; color:#1b79d8 !important; letter-spacing:1.2px;}

/* ---------- 6. 列表：悬停色与标点统一 ---------- */
.card .list li a{color:#39424e; transition:color .2s;}
.card .list li:first-child a{font-weight:700; color:#131c27;}
.card .list li::before{color:#c3cddb;}
.card .list li:hover::before{color:#1b79d8;}

/* ---------- 7. 头条区：焦点图压暗渐变 + 进度条式分页 + 主标题字重 ---------- */
.hl-focus{box-shadow:0 12px 34px -18px rgba(10,35,70,.55);}
.focus-tit{
  background:linear-gradient(180deg,rgba(6,18,34,0) 0%,rgba(6,18,34,.35) 38%,rgba(6,18,34,.88) 100%);
  padding:58px 20px 16px; font-size:18px; font-weight:700; letter-spacing:.3px;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.hl-focus .swiper-pagination{padding-right:18px; bottom:8px;}
.hl-focus .swiper-pagination-bullet{
  width:16px; height:3px; background:rgba(255,255,255,.5); opacity:1;
  margin:0 3px !important; transition:width .3s var(--ease),background .3s;
}
.hl-focus .swiper-pagination-bullet-active{width:30px; background:#fff; opacity:1;}
.hl-main{box-shadow:var(--sh-1);}
.hl-big a{font-weight:800; letter-spacing:.2px; color:#101a26;}
.hl-list li a{color:#3a4552;}
.hl-sub-tag{background:linear-gradient(135deg,#0f3a6b,#1b6fc4); letter-spacing:3px;}

/* ---------- 8. 头条横条：浅蓝渐变 + 左侧品牌条 ---------- */
.topstory{
  background:linear-gradient(90deg,#f3f9ff 0%,#fbfdff 46%,#fff 100%);
  border:1px solid rgba(27,121,216,.13);
  box-shadow:inset 3px 0 0 0 #1b79d8, var(--sh-1);
}
.ts-tag{background:linear-gradient(135deg,#0f3a6b,#1b6fc4 62%,#2f92e8); letter-spacing:3px;}
.ts-big{color:#0b2c53; font-weight:800;}
.ts-side li::before{color:var(--gold-2);}

/* ---------- 9. 快讯：深蓝标签 + 呼吸点 ---------- */
.flash{border:1px solid var(--hair-2); border-left:0; box-shadow:var(--sh-1);}
.flash em{background:linear-gradient(135deg,#0f3a6b,#1b6fc4); letter-spacing:3px;}

/* ---------- 10. 图集：与卡片同一套层次 ---------- */
.gallery{border:1px solid var(--hair-2); box-shadow:var(--sh-1);}
.gallery .swiper-slide{border-color:#eef2f7;}
.gallery .swiper-slide:hover{transform:translateY(-3px); box-shadow:var(--sh-2);}

/* ---------- 11. 一刻钟便民生活圈：深海军蓝面板（与白页形成节奏对比） ---------- */
.lifebox{border:1px solid rgba(15,45,80,.10); box-shadow:0 22px 46px -30px rgba(10,35,70,.55);}
.life-side{
  position:relative; overflow:hidden; border-right:0;
  background:radial-gradient(130% 110% at 0% 0%, #1b5fa8 0%, #0f3a6b 46%, #0a2b50 100%);
}
.life-side::after{
  content:""; position:absolute; right:-70px; bottom:-80px; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,rgba(63,169,245,.32),rgba(63,169,245,0) 70%); pointer-events:none;
}
.life-side > *{position:relative; z-index:1;}
.lb-tag{color:#dbeaff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.10); letter-spacing:3px;}
.lb-tit{color:#fff; font-weight:800; letter-spacing:2px;}
.lb-desc{color:rgba(255,255,255,.80);}
.lb-feats li{color:rgba(255,255,255,.92);}
.lb-feats li i{background:var(--gold-1);}
.lb-btn{
  background:#fff; color:#0f3a6b; font-weight:700; letter-spacing:2px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7); transition:background .22s,color .22s,transform .22s var(--ease);
}
.lb-btn:hover{background:var(--gold-1); color:#3a2a08; transform:translateY(-1px);}

/* ---------- 12. 分类信息：头部更挺、格子悬停有回应 ---------- */
.tc-head{border-color:var(--hair-2); background:linear-gradient(180deg,#fff,#fcfdff);}
.tc-tit{font-weight:800; letter-spacing:1.2px;}
.tc-tit::before{background:linear-gradient(180deg,#3fa9f5,#1b79d8);}
.tc-cates a{background:#f6f9fd; border-color:#e6eef8; color:#4b5a6d; transition:.2s;}
.tc-list{border-color:var(--hair-2);}
.tc-list > li{transition:background .22s;}
.tc-list > li:hover{background:#fbfdff;}

/* ---------- 13. 公益通栏：加深 + 顶部柔光 ---------- */
.pubbar{
  background-image:linear-gradient(100deg,#0b3560 0%,#13548f 46%,#1b79d8 100%);
  box-shadow:0 26px 54px -36px rgba(10,35,70,.85);
}
.pubbar.pb-b{background-image:linear-gradient(100deg,#0a2b50 0%,#0f4a80 55%,#1b6fc4 100%);}
.pubbar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 170px at 10% -10%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);
}

/* ---------- 14. 页脚：深海军蓝渐变（替代平涂亮蓝） ---------- */
.ft, .pft{
  background-color:#08294b;
  background-image:
    radial-gradient(900px 260px at 50% -50px, rgba(63,169,245,.30), rgba(63,169,245,0) 70%),
    linear-gradient(180deg,#0d3a6b 0%,#0a2f59 46%,#07223e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.ft .ftc-nav a{opacity:.95;}

/* ---------- 15. 回到顶部：品牌渐变按钮 ---------- */
.totop{
  background:linear-gradient(135deg,#1b79d8,#0f4a8a); color:#fff !important; border:0;
  box-shadow:0 14px 30px -14px rgba(15,58,107,.85);
}
.totop:hover{background:linear-gradient(135deg,#1668c4,#0b3560); color:#fff !important;}

/* ---------- 16. 可访问性：键盘聚焦可见 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid rgba(27,121,216,.55); outline-offset:2px;
}

/* ---------- 17. 移动端适配 ---------- */
@media screen and (max-width:768px){
  .nav li a{font-size:15px; letter-spacing:.3px; padding:12px 0 10px;}
  .card-tit > a:first-child{font-size:16px; letter-spacing:.3px;}
  .hl-big a{font-size:21px;}
  .focus-tit{font-size:15.5px; padding:44px 14px 12px;}
  .life-side{padding:20px 16px;}
  .lb-tit{font-size:20px;}
}

/* ---------- 18. 减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .card:hover, .gallery .swiper-slide:hover, .lb-btn:hover{transform:none;}
  .tb-links a::after{transition:none;}
}

/* ============================================================
   v3.1 冠部：顶栏深海军蓝（与页脚呼应，形成上下画框）
   追加式；删除本段即回到 v3.0
   ============================================================ */
.topbar{
  background:linear-gradient(90deg,#16629f 0%,#1d71b7 58%,#2a85cd 100%);
  border-bottom:0; color:rgba(255,255,255,.9);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
}
.tb-links a{color:rgba(255,255,255,.95);}
.tb-links a:hover{color:#fff;}
.tb-links a::after{background:linear-gradient(90deg,var(--gold-1),#fff);}
.tb-links i{background:rgba(255,255,255,.22);}
.tb-weather b, .tb-weather em{color:rgba(255,255,255,.9);}
.tb-date, .tb-weather{color:rgba(255,255,255,.72);}

/* 头部与顶部之间加一道极细金线，收住深色冠部 */
.topbar + .hd{box-shadow:inset 0 1px 0 rgba(201,162,92,.28);}

/* 卡片内图片统一冷调背景，避免白洞里跳色 */
.picnews img, .videolist img, .gallery img, .tc-pic{background:#eef2f7;}

/* ============================================================
   home.css — 首页专属优化层（仅 index.html 引用，不影响内页）
   v1.0 2026-10-20
   ============================================================ */

/* 1. 区域与生活频道：grid 两行各 8 个，消除孤行 */
.ft-zone-list{display:grid !important;grid-template-columns:repeat(8,1fr);gap:9px;max-width:1200px;}
.ft-zone-list li{list-style:none;}
.ft-zone-list li a{display:block;text-align:center;}
@media (max-width:900px){ .ft-zone-list{grid-template-columns:repeat(4,1fr);} }

/* 2. 公益条差异化：关爱未成年人改暖赭金色调（与反诈深蓝区分） */
.pubbar.pb-a{background-image:linear-gradient(100deg,#4a250e 0%,#653312 52%,#7d4517 100%);}

/* 3. 头条横条收紧，首屏露出更多内容 */
.topstory{padding-top:10px;padding-bottom:10px;min-height:0;}
.ts-big{line-height:1.4;}

/* 4. 城市横幅 230 → 192px，首屏更充实 */
.city-banner{height:192px;}
@media (max-width:900px){ .city-banner{height:130px;} }

/* 5. 生活圈 iframe 裁掉移动端底部 tabbar */
.life-map{overflow:hidden;}
.life-map iframe{height:calc(100% + 52px);}


/* 6. 白底适配：城市横幅底部渐隐由灰白改纯白 */
.city-banner::after{
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 62%, rgba(255,255,255,.96) 100%) !important;
}

/* ============================================================
   v6. 公益广告：AI 插画通栏（替代纯 CSS 渐变）
   图：/static/img/pub/pub_a.webp（关爱未成年人·亲子放风筝）
       /static/img/pub/pub_b.webp（全民反诈·手机安全）
   左侧叠深色渐变保证白字可读；删除本段即回到渐变版
   ============================================================ */
.pubbar{
  min-height:60px;
  display:flex; align-items:center;
  background-size:cover; background-position:center 42%;
  background-repeat:no-repeat;
}
.pubbar .pb-wrap{flex:1; padding:10px 22px;}
.pubbar.pb-a{
  background-image:
    linear-gradient(90deg,rgba(6,40,76,.60) 0%,rgba(6,40,76,.30) 38%,rgba(6,40,76,0) 62%),
    url(/static/img/pub/pub_a.webp);
}
.pubbar.pb-b{
  background-image:
    linear-gradient(90deg,rgba(5,25,48,.66) 0%,rgba(5,25,48,.34) 40%,rgba(5,25,48,0) 66%),
    url(/static/img/pub/pub_b.webp);
}
.pubbar::after{display:none;}
.pubbar .pb-ring{display:none;}
.pubbar .pb-ico{
  width:38px; height:38px;
  border-color:rgba(255,255,255,.55);
  background:rgba(10,40,74,.38);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pubbar h3{font-size:18px; font-weight:700; text-shadow:0 2px 10px rgba(5,25,48,.5);}
.pubbar p{font-size:12px; color:rgba(255,255,255,.94); text-shadow:0 1px 5px rgba(5,25,48,.55);}
.pubbar .pb-tag{background:rgba(10,40,74,.32); text-shadow:0 1px 3px rgba(5,25,48,.4);}
@media (max-width:900px){
  .pubbar{min-height:56px;}
  .pubbar .pb-txt p{display:none;}
  .pubbar h3{margin:0;}
  .pubbar.pb-a{
    background-position:0% center;
    background-image:linear-gradient(90deg,rgba(6,40,76,.68) 0%,rgba(6,40,76,.44) 55%,rgba(6,40,76,.14) 100%),url(/static/img/pub/pub_a.webp);
  }
  .pubbar.pb-b{
    background-position:0% center;
    background-image:linear-gradient(90deg,rgba(5,25,48,.74) 0%,rgba(5,25,48,.42) 60%,rgba(5,25,48,.10) 100%),url(/static/img/pub/pub_b.webp);
  }
  .pubbar h3{font-size:17px;}
  .pubbar .pb-wrap{padding:16px;}
  .pubbar .pb-ico{width:32px;height:32px;flex-basis:32px;}
  .pubbar .pb-ico svg{width:18px;height:18px;}
}

/* ============================================================
   v7. 城市横幅背景换 AI 滨海夜景（覆盖 v2.css 的 city_banner_yt.jpg）
   ============================================================ */
.city-banner .cb-photo{
  background:url("/static/img/pub/city_seaside.webp?v=1") no-repeat center 34% / cover;
}

/* ============================================================
   v8. 头部日期+天气位（参考胶东在线，取消烟台时报出品块）
   上行：今日：2026年10月20日 星期二
   下行：图标 多云 10 ~ 21°C   数据 /weather.php
   ============================================================ */
.hd-slogan .s1{display:block; font-size:17px; font-weight:700; color:#2b3138; letter-spacing:1px; line-height:1.3;}
.hd-slogan .s1 b{font-weight:700;}
.hd-slogan .hd-wx{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px; font-size:14px; font-weight:600;
  color:#3a6ea8; letter-spacing:0; line-height:1.2;
}
.hd-slogan .hd-wx .w-ic2{display:inline-flex;}
.hd-slogan .hd-wx .w-ic2 svg{
  width:20px; height:20px; fill:none;
  stroke:#1d71b7; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:1100px){
  .hd-slogan .s1{font-size:15px;}
  .hd-slogan .hd-wx{font-size:13px; margin-top:6px;}
  .hd-slogan .hd-wx .w-ic2 svg{width:18px;height:18px;}
}

/* ============================================================
   v9. 删除页头日期天气块，搜索栏居中（logo 左、搜索中）
   恢复：删除本段即回 v8
   ============================================================ */
.hd{position:relative;}
.hd-slogan{display:none;}
.hd-search{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); margin:0;
}
@media (max-width:768px){
  .hd-search{position:static; transform:none; margin:0;}
}

/* ============================================================
   v10. iOS 液态玻璃 + 立体化（首页专属纯视觉层）
   只加背景/边框/阴影/滤镜，不改盒模型尺寸、不动 DOM、不加隐藏文本
   → 对 SEO / GEO（结构化数据、标题层级、正文可读性）零影响
   删除本段即回到 v9
   ============================================================ */
:root{
  --gl-blur:saturate(180%) blur(18px);
  --lift-1:0 1px 2px rgba(15,45,80,.05), 0 10px 24px -18px rgba(15,45,80,.30), 0 28px 48px -40px rgba(15,45,80,.32);
  --lift-2:0 2px 4px rgba(15,45,80,.06), 0 18px 34px -16px rgba(15,45,80,.32), 0 46px 70px -50px rgba(15,45,80,.42);
}

/* 1. 导航条：iOS 玻璃吸顶 */
.nav{
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 30px -24px rgba(10,40,80,.7), inset 0 1px 0 rgba(255,255,255,.8);
}

/* 2. 搜索框：玻璃 + 聚焦光环 + 按钮立体 */
.hd-search input{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-color:rgba(15,76,129,.16);
  box-shadow:inset 0 1px 2px rgba(15,45,80,.05), 0 6px 18px -12px rgba(15,45,80,.38);
}
.hd-search input:focus{
  border-color:#1d71b7;
  box-shadow:0 0 0 3px rgba(29,113,183,.16), inset 0 1px 2px rgba(15,45,80,.06);
}
.hd-search button{
  box-shadow:0 8px 20px -10px rgba(198,40,40,.6);
  transition:background .2s, box-shadow .2s;
}
.hd-search button:hover{box-shadow:0 12px 26px -10px rgba(198,40,40,.7);}

/* 3. 卡片：立体分层 + 悬停上浮（尺寸不变，仅阴影/位移） */
.wrap .card{
  background:#fff;
  border:1px solid rgba(15,45,80,.07);
  box-shadow:var(--lift-1);
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1), transform .32s cubic-bezier(.2,.7,.3,1), border-color .32s;
}
.wrap .card:hover{
  transform:translateY(-4px);
  border-color:rgba(29,113,183,.26);
  box-shadow:var(--lift-2), inset 0 1px 0 rgba(255,255,255,.9);
}

/* 4. 栏目标题：底部渐变细线，增强层次 */
.wrap .card-tit{position:relative;}
.wrap .card-tit::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(29,113,183,.32),rgba(29,113,183,.08) 46%,rgba(29,113,183,0));
}

/* 5. 焦点图 / 图廊：玻璃箭头 + 立体外框 */
.flash, .gallery, .lifebox, .headline, .flinks{
  border:1px solid rgba(15,45,80,.07);
  box-shadow:var(--lift-1);
}
.flinks{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.g-prev, .g-next{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 8px 22px -12px rgba(10,40,80,.6) !important;
  color:#14508e !important;
}

/* 6. 城市横幅标语：不加玻璃底板（会撑高 52px 大字条并叠加错位，导致中文字幕被裁） */

/* 7. 公益广告 / 生活圈面板：立体加强 */
.pubbar{box-shadow:var(--lift-2), inset 0 1px 0 rgba(255,255,255,.16);}
.life-side{box-shadow:var(--lift-2), inset 0 1px 0 rgba(255,255,255,.14);}

/* 8. 回顶按钮：玻璃胶囊 */
.totop{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 28px -14px rgba(10,40,80,.6), inset 0 1px 0 rgba(255,255,255,.9);
  color:#14508e;
}

/* 9. 轻量特效：生活圈按钮光泽扫过 */
.lb-btn{position:relative; overflow:hidden;}
.lb-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-160%); transition:transform .9s ease; pointer-events:none;
}
.lb-btn:hover::after{transform:translateX(320%);}

/* 10. 尊重「减弱动效」偏好 */
@media (prefers-reduced-motion:reduce){
  .wrap .card:hover{transform:none;}
  .lb-btn::after{display:none;}
}


/* v12. 灯光秀背景较亮，增强原暗化层（保持底部透明，不影响白色渐变融合） */
.city-banner::before{
  background:linear-gradient(to bottom, rgba(10,40,90,.36), rgba(10,40,90,.44) 46%, rgba(246,247,249,0) 88%);
}

/* ============================================================
   v23. 公益通栏压到 60px（桌面）/56px（移动）
   覆盖 v6 段高度与内边距；删除本段即回到 v6
   ============================================================ */
.pubbar{height:60px; min-height:60px; overflow:hidden;}
.pubbar .pb-wrap{height:60px; padding:0 22px; gap:16px;}
.pubbar h3{font-size:16px; line-height:1.25; letter-spacing:1px; margin:0;}
.pubbar .pb-txt p{font-size:11px; line-height:1.3; margin-top:2px;}
.pubbar .pb-ico{width:34px; height:34px; flex-basis:34px;}
.pubbar .pb-ico svg{width:18px; height:18px;}
.pubbar .pb-tag{font-size:11px; padding:3px 9px; letter-spacing:1px;}
@media (max-width:900px){
  .pubbar{height:56px; min-height:56px;}
  .pubbar .pb-wrap{height:56px; padding:0 16px; gap:12px; flex-wrap:nowrap;}
  .pubbar .pb-txt p{display:none;}
  .pubbar h3{font-size:15px; letter-spacing:.5px;}
  .pubbar .pb-ico{width:30px; height:30px; flex-basis:30px;}
  .pubbar .pb-ico svg{width:16px; height:16px;}
}

/* ============================================================
   v26. 立体化续作 + 移动端专项优化（2026-10-20）
   仅首页；删除本段即回到 v25
   ============================================================ */

/* A. 可读性：低对比文字加深（审计 cr 3.0→4.6+） */
.card-tit .more{color:#16629f !important; border-color:rgba(27,121,216,.34);}
.ft-zone-list li a{color:#57636f;}

/* B. 栏目标题竖条：渐变 + 微光（原为纯色块） */
.wrap .card-tit > a:first-child::before{
  background:linear-gradient(180deg,#2a85cd,#0f4a80);
  box-shadow:0 2px 8px -2px rgba(29,113,183,.65);
}

/* C. 列表项悬停：左侧渐变指示条（不改盒模型） */
.wrap .card .list li:hover, .wrap .card .side-list li:hover{
  background-image:linear-gradient(90deg,rgba(29,113,183,.10),rgba(29,113,183,0) 72%);
}
.wrap .hl-list li:hover{background:#f6faff;}

/* D. 头条主区：内高光面板 */
.wrap .hl-main{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.9);
}
.wrap .hl-big a{letter-spacing:.4px;}

/* E. 快讯条：玻璃 + 品牌胶囊（移动端不加 blur，省开销） */
.wrap .flash{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,45,80,.08);
}
.wrap .flash em{
  background:linear-gradient(135deg,#1d71b7,#0f4a80);
  box-shadow:0 10px 20px -12px rgba(15,58,107,.9);
}

/* F. 焦点图标题：图片上的玻璃渐变条（非 .cb-t，不影响字幕轮播） */
.hl-focus .focus-tit{
  background:linear-gradient(to top, rgba(8,30,60,.74) 0%, rgba(8,30,60,.28) 60%, rgba(8,30,60,0) 100%);
  text-shadow:0 2px 8px rgba(6,24,52,.6);
}

/* G. 画廊卡片：悬停抬升（不改尺寸，仅位移/阴影） */
.wrap .gallery .swiper-slide{transition:transform .3s ease, box-shadow .3s ease;}
.wrap .gallery .swiper-slide:hover{transform:translateY(-4px); box-shadow:var(--lift-2);}

/* H. 往期精选 / 区县导航：轻卡片化 */
.wrap .pastpicks{
  background:#fff; border:1px solid rgba(15,45,80,.07);
  box-shadow:var(--lift-1); padding:16px 20px;
}
.wrap .ft-zone{
  background:rgba(255,255,255,.9); border:1px solid rgba(15,45,80,.07);
  box-shadow:var(--lift-1);
}
.wrap .pp-list li:hover{background:#f6faff;}

/* I. 导航当前项：加厚渐变指示条 */
.nav li.on a::after, .nav li a:hover::after{
  height:3px; background:linear-gradient(90deg,#0f4a80,#7cc0f5);
}

/* ---------- 移动端专项 ---------- */
@media screen and (max-width:768px){
  /* 1. 触感反馈与点击热区 */
  a, button, .list li a, .hl-list li a{-webkit-tap-highlight-color:rgba(29,113,183,.12);}
  .card .list li a, .card .side-list li a, .hl-list li a, .hl-sub li a{display:block;}
  .card .list li:active, .card .side-list li:active, .hl-list li:active{background:#eef6ff;}

  /* 2. 行高提到 40px，满足触控热区（原 34px 偏挤） */
  .list li{line-height:40px;}
  .hl-list li{line-height:38px;}
  .side-list li{line-height:38px;}
  .hl-sub li{line-height:34px;}

  /* 3. 卡片恢复层次（覆盖基线 box-shadow:none） */
  .wrap .card{
    box-shadow:0 6px 18px -14px rgba(15,45,80,.42), 0 1px 2px rgba(15,45,80,.05);
    border-color:rgba(15,45,80,.08);
    padding:13px 14px 8px;
  }
  .grid3, .grid4{gap:12px; margin-top:12px;}
  .wrap .lifebox, .wrap .tcbox{margin:14px 0;}
  .wrap .gallery{margin-top:12px;}

  /* 4. 导航横滑：隐藏滚动条 + 右侧渐隐提示 */
  .nav ul{scrollbar-width:none; -ms-overflow-style:none;}
  .nav ul::-webkit-scrollbar{display:none;}
  .nav{position:relative;}
  .nav::after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:24px; pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96) 72%);
  }

  /* 5. 头条区收紧：首屏露出更多 */
  .hl-main{padding:12px 14px 6px;}
  .hl-big a{font-size:19px; line-height:1.35;}
  .hl-big{margin:0 0 10px;}
  .hl-sub{margin-top:8px; padding-top:6px;}
  .hl-focus .swiper-container, .hl-focus img{height:192px;}

  /* 6. 图片统一裁切，避免小图被拉伸糊 */
  .picnews img, .videolist img, .gallery img, .tc-pic img{object-fit:cover;}

  /* 7. 快讯条 */
  .flash{height:38px;}
  .flash em{line-height:38px; padding:0 12px; letter-spacing:1px; font-size:12.5px;}
  .flash-bd li{line-height:38px;}

  /* 8. 底部组件收紧 + 回顶安全区 */
  .wrap .pastpicks{padding:12px 14px; margin-top:12px;}
  .pp-list li{padding:8px 0;}
  .wrap .ft-zone{margin:12px 14px; padding:12px 6px 14px;}
  .flinks{padding:12px 14px 14px;}
  .totop{bottom:calc(18px + env(safe-area-inset-bottom)); width:42px; height:42px;}
}

/* ============================================================
   v26b. 区市导航条对比度 + 移动端头条区收紧
   ============================================================ */
.focus-qu{
  background:linear-gradient(135deg,#16629f 0%,#0f4a80 100%);
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.18);
}
.focus-qu a, .fq-label{letter-spacing:.5px;}
.focus-qu a:hover{background:rgba(255,255,255,.14);}
@media screen and (max-width:768px){
  .topstory{padding:24px 16px 10px;}
  .ts-side ul{margin-top:10px;}
  .ts-side li{line-height:28px;}
  .focus-qu a, .fq-label{padding:10px 15px; font-size:14px;}
}

/* ============================================================
   v28. 细节续优：焦点图分页胶囊、图片玻璃遮罩、头条条立体、移动端收尾
   仅首页；删除本段回到 v27
   ============================================================ */

/* 1. 焦点图分页：圆点 → 玻璃胶囊条（激活条拉长） */
.hl-focus .swiper-pagination{bottom:12px !important;}
.hl-focus .swiper-pagination-bullet{
  width:18px !important; height:4px !important; border-radius:2px !important;
  background:rgba(255,255,255,.55) !important; opacity:1 !important;
  box-shadow:0 1px 4px rgba(6,24,52,.5);
  transition:width .3s ease, background .3s ease;
}
.hl-focus .swiper-pagination-bullet-active{width:30px !important; background:#fff !important;}

/* 2. 图片悬停：底部玻璃暗角（纯装饰，无文本，零 SEO 影响） */
.picnews a, .gallery .swiper-slide a:first-child{position:relative;}
.picnews a::after, .gallery .swiper-slide a:first-child::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,30,60,.36) 0%, rgba(8,30,60,.06) 42%, rgba(8,30,60,0) 62%);
  opacity:0; transition:opacity .32s ease;
}
.picnews a:hover::after, .gallery .swiper-slide a:hover:first-child::after{opacity:1;}

/* 3. 头条横条：角标发光 + 面板内高光 + 标题悬停微移 */
.wrap .topstory{box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.9);}
.ts-tag{box-shadow:0 8px 18px -10px rgba(27,121,216,.9);}
.ts-big{transition:color .2s ease, transform .2s ease;}
.ts-big:hover{transform:translateX(2px);}
.ts-more{transition:transform .2s ease;}
.ts-more:hover{transform:translateX(3px);}

/* 4. 卡片「更多」胶囊：悬停立体 */
.card-tit .more{transition:background .2s, color .2s, box-shadow .2s, transform .2s;}
.card-tit .more:hover{box-shadow:0 8px 16px -8px rgba(27,121,216,.9); transform:translateY(-1px);}

/* ---------- 移动端收尾 ---------- */
@media screen and (max-width:768px){
  /* 头部再收紧 8px，首屏多露内容 */
  .hd{padding:12px 0 10px;}
  .hd-logo img{height:38px;}
  .hd-search{margin-top:10px;}

  /* 卡片「更多」触控区放大 */
  .card-tit .more{padding:5px 11px; font-size:12.5px;}

  /* 生活圈地图过高：360 → 300 */
  .life-map{min-height:300px;}

  /* 往期精选 / 页脚声明收紧 */
  .wrap .pastpicks{padding:12px 14px 10px;}
  .pp-t{margin-bottom:6px;}
  .flinks ul{gap:6px 14px;}
}
@media (prefers-reduced-motion: reduce){
  .ts-big:hover, .ts-more:hover, .card-tit .more:hover{transform:none;}
}