/* =====================================================================
   qing.css  -  青瓷皮肤（青绿主色：按钮 / 导航 / 点缀全部同步换色）
   只覆盖变量和少量硬编码颜色，不动 theme4.css 的结构
   ===================================================================== */

:root{
  --paper:#eef6f4;
  --card:#ffffff;

  --ink:#0f2e2b;
  --ink2:#3a5f5a;
  --muted:#6c8a86;
  --muted2:#96b0ac;

  /* 主色：原天蓝 -> 青 */
  --sky:#2f8f83;
  --sky-l:#7fc0b8;
  --sky-d:#164a45;

  /* 点缀：原描金 -> 青绿（按钮/线条/悬停全跟着变） */
  --gold:#2f8f83;
  --gold-l:#7fcabf;
  --gold-d:#1b5e56;

  --line:#d5e8e3;
  --line2:#bcd8d2;

  --red:#b3452f;
}

body{background-image:radial-gradient(circle at 50% -6%,#fbfffe 0%,rgba(238,246,244,0) 55%)}

/* ---------- 站名 ---------- */
.brand .name{
  background:linear-gradient(180deg,#123f3a,#2f8f83 55%,#7fcabf) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}

/* ---------- 大标题第二行 ---------- */
.hero h1 em{
  background:linear-gradient(180deg,#8ad3c8,#2f8f83 55%,#0f3f39) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}

/* ---------- 主按钮 ---------- */
.btn-gold{
  background:linear-gradient(135deg,#d5efe9,#8fcfc4 55%,#2f8f83) !important;
  color:#0a2f2b !important;
  border:1px solid rgba(200,240,232,.9) !important;
  box-shadow:0 12px 26px rgba(47,143,131,.28),inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.btn-gold:hover{color:#0a2f2b !important;filter:brightness(1.04)}

/* ---------- 次按钮 ---------- */
.btn-line{
  color:#1b5e56 !important;
  border-color:rgba(47,143,131,.45) !important;
  background:rgba(255,255,255,.72) !important;
}
.btn-line:hover{color:#164a45 !important;border-color:#2f8f83 !important}

/* ---------- 导航 ---------- */
.nav a.on{color:#2f8f83 !important}
.nav a.on::after{background:linear-gradient(90deg,transparent,#2f8f83,transparent) !important}
.nav a:hover{color:#2f8f83 !important}

/* ---------- 面板标题 / 更多 ---------- */
.panel-hd{border-bottom:1px solid #d5e8e3 !important}
.panel-hd .t{color:#0f2e2b !important}
.panel-hd .t::before{background:linear-gradient(135deg,#7fcabf,#2f8f83) !important;box-shadow:0 0 8px rgba(47,143,131,.45) !important}
.panel-hd .more,.panel-hd .more:hover{color:#2f8f83 !important}

/* ---------- 侧栏下载块 / 快捷入口 ---------- */
.dl-big{
  background:linear-gradient(135deg,#d5efe9,#8fcfc4 55%,#2f8f83) !important;
  color:#0a2f2b !important;
  border:1px solid rgba(200,240,232,.9) !important;
  box-shadow:0 16px 32px rgba(47,143,131,.22) !important;
}
.svc a:hover,.side a:hover{color:#2f8f83 !important}
.qcta-reg{background:linear-gradient(135deg,#3f9d90,#22766c) !important}
.qcta-rank{background:linear-gradient(135deg,#1d5c55,#123f3a) !important}
.kf-btn{border-color:rgba(47,143,131,.45) !important}
.kf-btn b{color:#2f8f83 !important}

/* ---------- 公告条 / 分页 / 页签 / 角标 ---------- */
.ribbon .tag{background:linear-gradient(135deg,#2f8f83,#164a45) !important;color:#eafffb !important}
.ribbon .go{color:#2f8f83 !important}
.pager span.on{background:linear-gradient(135deg,#8fcfc4,#2f8f83) !important;color:#04302b !important}
.tabstrip a.on{color:#2f8f83 !important;border-bottom-color:#2f8f83 !important}
.ann-list .hot,.nl-item .hot{background:#2f8f83 !important;border-color:#2f8f83 !important;color:#fff !important}
.ann-list .hot.gold{background:#b3452f !important;border-color:#b3452f !important}

/* ---------- 页脚 ---------- */
.foot{border-top:2px solid #2f8f83 !important}
.foot a:hover{color:#2f8f83 !important}

/* ---------- 数字 / 状态 ---------- */
.stats-in b{color:#164a45}
.open-stat b{color:#2f8f83}

/* ---------- 卡片阴影带一点青 ---------- */
.panel,.box{box-shadow:0 14px 34px rgba(20,74,69,.08) !important}

/* ---------- 补充：小徽标 / 副标题点缀 ---------- */
.hero .sub .soon{
  background:rgba(47,143,131,.10) !important;
  color:#1b5e56 !important;
  border-color:rgba(47,143,131,.35) !important;
}
.hero .sub .dot{color:#7fcabf}
.kicker{color:#1b5e56 !important}
.kicker::before{background:linear-gradient(90deg,transparent,#2f8f83) !important}
.seal{background:linear-gradient(160deg,#b3452f,#7a2415) !important;border-color:rgba(255,220,180,.55) !important}


/* =====================================================================
   细节打磨（2026-11-08）
   ===================================================================== */

/* ---- 1. 统一圆角 / 描边 / 阴影（青灰调，比原来的蓝灰更柔和） ---- */
.panel,.box{
  border-radius:10px !important;
  border-color:#dcece8 !important;
  box-shadow:0 10px 28px rgba(20,74,69,.06),0 1px 0 rgba(255,255,255,.9) inset !important;
}
.panel:hover,.box:hover{box-shadow:0 14px 34px rgba(20,74,69,.09),0 1px 0 rgba(255,255,255,.9) inset !important}
.panel-hd{
  border-radius:10px 10px 0 0 !important;
  height:50px !important;
  background:linear-gradient(180deg,#f6fdfb,#ecf7f5) !important;
}
.panel-hd .t{font-size:16.5px !important;letter-spacing:2px !important;font-weight:600}
.panel-hd .more{letter-spacing:.5px}

/* ---- 2. 按钮统一尺寸与字距 ---- */
.btn-gold,.btn-line{
  height:46px !important;line-height:44px !important;
  padding:0 30px !important;
  border-radius:8px !important;
  font-size:15px !important;letter-spacing:3px !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}
.btn-gold:hover,.btn-line:hover{transform:translateY(-2px) !important}
.btn-line{background:rgba(255,255,255,.86) !important}

/* ---- 3. 公告列表：行高、悬停、日期、角标 ---- */
.ann-list li{
  height:42px !important;
  padding:0 12px !important;
  border-radius:6px !important;
  transition:background .18s ease !important;
}
.ann-list li:hover{background:#f2fbf9 !important}
.ann-list li .tt{font-size:13.5px !important;letter-spacing:.2px}
.ann-list li .time{color:#9ab5b0 !important;font-variant-numeric:tabular-nums}
.ann-list li .cat{
  color:#2f8f83 !important;
  background:rgba(47,143,131,.08) !important;
  border:1px solid rgba(47,143,131,.18) !important;
  border-radius:4px !important;
  padding:1px 6px !important;
  font-size:11px !important;
}
.ann-list .hot{
  height:16px !important;line-height:16px !important;padding:0 6px !important;
  border-radius:3px !important;font-size:10.5px !important;letter-spacing:.5px;
  box-shadow:none !important;
}
.ann-list .hot.gold{background:#b3452f !important}

/* ---- 4. 侧栏：下载块 / 两格入口 / 快捷入口 / 客服 ---- */
.dl-big{border-radius:10px !important;transition:transform .2s ease,box-shadow .2s ease !important}
.dl-big:hover{transform:translateY(-2px) !important;box-shadow:0 20px 38px rgba(47,143,131,.26) !important}
.dl-big b{letter-spacing:7px !important;font-size:25px !important}
.dl-big small{letter-spacing:4px !important;opacity:.72 !important}
.qcta{border-radius:10px !important;transition:transform .2s ease,box-shadow .2s ease !important}
.qcta:hover{transform:translateY(-2px) !important;box-shadow:0 16px 30px rgba(20,74,69,.16) !important}
.svc a{
  display:block !important;
  padding:7px 10px !important;
  border-radius:6px !important;
  color:#3a5f5a !important;
  transition:background .18s ease,color .18s ease !important;
}
.svc a:hover{background:rgba(47,143,131,.08) !important;color:#164a45 !important}
.kf-btn{border-radius:10px !important;transition:transform .2s ease !important}
.kf-btn:hover{transform:translateY(-2px) !important}

/* ---- 5. 顶部公告条 ---- */
.ribbon{
  border-radius:10px !important;
  border-color:#dcece8 !important;
  box-shadow:0 8px 22px rgba(20,74,69,.06) !important;
}
.ribbon .tag{
  border-radius:4px !important;
  padding:2px 9px !important;
  font-size:12px !important;letter-spacing:1px;
}
.ribbon .txt a{color:#123f3a !important}
.ribbon .txt a:hover{color:#2f8f83 !important}

/* ---- 6. 分页 ---- */
.pager a,.pager span{
  border-radius:6px !important;
  min-width:28px !important;height:28px !important;line-height:26px !important;
  transition:all .16s ease !important;
}
.pager a:hover{color:#2f8f83 !important;border-color:#2f8f83 !important}

/* ---- 7. 页脚 ---- */
.foot{
  background:linear-gradient(180deg,#eaf6f4,#dcefeb) !important;
  color:#4d6a66 !important;
}
.foot .fl a{color:#3a5f5a !important;transition:color .16s ease}
.foot .fl a::after{background:rgba(20,74,69,.14) !important}

/* ---- 8. 统计条 ---- */
.stats-in{
  border-radius:12px !important;
  border-color:#dcece8 !important;
  box-shadow:0 10px 26px rgba(20,74,69,.06) !important;
}
.stats-in>div{border-right-color:#e4f2ef !important}
.stats-in b{font-variant-numeric:tabular-nums}

/* ---- 9. 全局细节 ---- */
a{transition:color .16s ease}
::selection{background:#bfe6df;color:#0a2f2b}
:focus-visible{outline:2px solid rgba(47,143,131,.5);outline-offset:2px}
img{max-width:100%}

/* ---- 10. 标题字重统一（原来偏细） ---- */
.hero h1{letter-spacing:12px !important}
.hero .sub{letter-spacing:1.5px !important}
.box-t b{letter-spacing:2px}


/* =====================================================================
   布局微调（2026-11-08 下午）
   ===================================================================== */

/* ---- 在线客服按钮：蓝色 -> 青绿 ---- */
.kf-btn{
  background:linear-gradient(135deg,#3f9d90,#22766c) !important;
  border-color:transparent !important;
  box-shadow:0 12px 24px rgba(47,143,131,.28) !important;
}
.kf-btn span,.kf-btn b,.kf-btn i{color:#ffffff !important}
.kf-btn:hover{filter:brightness(1.05) !important}


/* =====================================================================
   侧栏换到左边（原来在右边）
   ===================================================================== */
.layout{
  display:flex !important;
  align-items:flex-start !important;
  gap:22px !important;
}
.layout .side{
  order:-1 !important;          /* 侧栏排到内容前面 = 左边 */
  flex:0 0 308px !important;
  width:308px !important;
  position:sticky !important;
  top:96px;
}
.layout .content{
  flex:1 1 auto !important;
  min-width:0 !important;
}
/* 窄屏时恢复上下排列 */
@media (max-width:1080px){
  .layout{flex-direction:column !important}
  .layout .side{width:100% !important;flex:1 1 auto !important;position:static !important;order:0 !important}
}


/* =====================================================================
   细节打磨 v2（2026-11-08 傍晚）
   ===================================================================== */

/* ---- 1. 侧栏排版节奏 ---- */
.layout{gap:24px !important}
.side{gap:14px !important}

/* ---- 2. 极速下载块：去掉顶部那个小三角，改成整齐的箭头图标位 ---- */
.dl-big::before{display:none !important}
.dl-big{
  height:100px !important;
  border-radius:12px !important;
  justify-content:center !important;
}
.dl-big b{margin-top:0 !important;font-size:24px !important;letter-spacing:8px !important;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.dl-big small{margin-top:8px !important;letter-spacing:5px !important;opacity:.75 !important}

/* ---- 3. 账号注册 / 英雄排行榜 两格 ---- */
.quick-cta{gap:12px !important}
.qcta{height:88px !important;border-radius:12px !important}
.qcta span{font-size:15px !important;letter-spacing:1.5px !important}
.q-ico{width:26px !important;height:26px !important;margin-bottom:2px}
.qcta-reg{background:linear-gradient(160deg,#47a99b,#2a7f75) !important}
.qcta-rank{background:linear-gradient(160deg,#1f6a62,#123f3a) !important}

/* ---- 4. 快捷入口：小圆点对齐 + 悬停 ---- */
.svc{padding:12px 14px 10px !important;gap:2px 6px !important}
.svc a{padding:9px 8px 9px 16px !important;border-radius:6px !important}
.svc a::before{left:6px !important;width:4px !important;height:4px !important;margin-top:-2px !important;opacity:.45 !important}
.svc a:hover{background:rgba(47,143,131,.09) !important;color:#164a45 !important;padding-left:19px !important}
.svc a:hover::before{opacity:1 !important;transform:scale(1.3) !important;background:#2f8f83 !important}

/* ---- 5. 客服卡：号码、复制、时间 ---- */
.kf-btn{
  height:46px !important;border-radius:10px !important;
  padding:0 14px !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
}
.kf-btn span{font-size:13.5px !important;letter-spacing:1px}
.kf-btn b{font-size:15px !important;letter-spacing:.5px}
.kf-line{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  margin-top:10px !important;font-size:12.5px !important;color:#3a5f5a !important;
}
.kf-line span{letter-spacing:1px}
.kf-line a#kfCopy,.kf-line a{
  color:#2f8f83 !important;text-decoration:none !important;
  padding:2px 9px !important;border:1px solid rgba(47,143,131,.35) !important;
  border-radius:20px !important;font-size:11.5px !important;
  transition:all .16s ease !important;
}
.kf-line a:hover{background:rgba(47,143,131,.1) !important;border-color:#2f8f83 !important}
.kf-time{margin-top:8px !important;font-size:11.5px !important;color:#8aa8a3 !important;letter-spacing:.5px}

/* ---- 6. 健康公告 ---- */
.health{
  font-size:12.5px !important;line-height:2.05 !important;color:#6c8a86 !important;
  padding:14px 16px 16px !important;
}

/* ---- 7. 公告区：顶部大标题 + 四个快捷按钮 ---- */
.ann-feat h2{
  font-size:23px !important;letter-spacing:1.5px !important;
  color:#123f3a !important;
}
.ann-btns{gap:10px !important;padding:4px 0 16px !important}
.ann-btns a{
  display:inline-block !important;
  padding:7px 16px !important;
  border:1px solid #dcece8 !important;
  border-radius:20px !important;
  background:#f7fdfc !important;
  color:#2a5a54 !important;
  font-size:12.5px !important;
  transition:all .16s ease !important;
}
.ann-btns a:hover{
  background:#2f8f83 !important;color:#fff !important;border-color:#2f8f83 !important;
  transform:translateY(-1px) !important;
}

/* ---- 8. 列表最后一行去掉多余下边框 ---- */
.ann-list li:last-child{border-bottom:0 !important}

/* ---- 9. 侧栏卡片悬停轻微上浮 ---- */
.side .panel{transition:transform .2s ease,box-shadow .2s ease !important}
.side .panel:hover{transform:translateY(-1px) !important}

/* ---- 10. 统计条：数字与标签间距 ---- */
.stats-in>div{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important}
.stats-in b{font-size:26px !important;letter-spacing:.5px !important}
.stats-in span{font-size:12px !important;color:#6c8a86 !important;letter-spacing:.5px !important}


/* =====================================================================
   右栏（本周开服 / 联系客服 / 充值活动）
   ===================================================================== */

/* 页面稍微加宽，三栏不挤 */
.wrap{width:1300px !important}

.layout{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) 280px !important;
  gap:20px !important;
  align-items:start !important;
}
.layout .content{min-width:0 !important}
.layout .side{order:0 !important;width:auto !important;flex:none !important}
.layout .rail{min-width:0}

/* 右栏卡片 */
.rail{display:flex;flex-direction:column;gap:16px}
.rail-card{
  background:#fff;border:1px solid #dcece8;border-radius:10px;
  box-shadow:0 10px 28px rgba(20,74,69,.06);
  overflow:hidden;
}
.rail-hd{
  display:flex;align-items:center;justify-content:space-between;
  height:46px;padding:0 14px;
  background:linear-gradient(180deg,#f6fdfb,#ecf7f5);
  border-bottom:1px solid #e2f2ee;
}
.rail-hd b{font-size:15px;color:#0f2e2b;letter-spacing:1.5px;font-weight:600}
.rail-hd span{font:9px/1 Arial;letter-spacing:1.5px;color:#9ab5b0}

/* 开服表 */
.rail-open{padding:8px 12px 12px;margin:0;list-style:none}
.rail-open li{
  display:flex;align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px dashed #eaf5f2;
  font-size:12.5px;color:#3a5f5a;
}
.rail-open li:last-child{border-bottom:0}
.rail-open em{
  font-style:normal;color:#2f8f83;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:48px;
}
.rail-open span{color:#6c8a86;font-variant-numeric:tabular-nums}
.rail-open b{font-weight:400;color:#123f3a;flex:1 1 auto;text-align:right;padding-right:6px}
.rail-open a{
  flex:0 0 auto;color:#fff;background:#2f8f83;
  border-radius:14px;padding:2px 10px;font-size:11.5px;
  text-decoration:none;transition:background .16s;
}
.rail-open a:hover{background:#164a45}

/* 客服卡 */
.rail-kf{padding:14px}
.rail-kf-btn{
  display:flex;align-items:center;gap:8px;
  height:44px;padding:0 14px;border-radius:9px;
  background:linear-gradient(135deg,#3f9d90,#22766c);
  color:#fff;text-decoration:none;
  box-shadow:0 10px 22px rgba(47,143,131,.24);
  transition:transform .18s,filter .18s;
}
.rail-kf-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.rail-kf-btn span{font-size:13px;letter-spacing:1px}
.rail-kf-btn b{margin-left:auto;font-size:14px;letter-spacing:.5px}
.rail-q{
  width:16px;height:16px;border:2px solid #fff;border-radius:50% 50% 50% 3px;position:relative;flex:0 0 auto;
}
.rail-q::after{content:"";position:absolute;left:3px;top:5px;width:6px;height:2px;background:#fff;border-radius:2px;box-shadow:0 -3px 0 #fff}
.rail-kf-line{
  display:flex;align-items:center;gap:6px;
  margin-top:12px;font-size:12.5px;color:#3a5f5a;
}
.rail-kf-line b{color:#2f8f83;letter-spacing:.5px}
.rail-kf-line a{
  margin-left:auto;color:#2f8f83;text-decoration:none;
  border:1px solid rgba(47,143,131,.35);border-radius:14px;
  padding:1px 9px;font-size:11.5px;transition:all .16s;
}
.rail-kf-line a:hover{background:rgba(47,143,131,.1);border-color:#2f8f83}
.rail-kf-time{margin-top:8px;font-size:11.5px;color:#8aa8a3}

/* 活动卡 */
.rail-gg .rail-bd{padding:12px 14px 14px}
.rail-gg .rail-bd p{
  margin:0 0 8px;font-size:12.5px;color:#3a5f5a;
  padding-left:14px;position:relative;
}
.rail-gg .rail-bd p::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:1px;background:#2f8f83;opacity:.7;
}
.rail-more{
  display:block;margin-top:10px;text-align:center;
  height:34px;line-height:32px;border-radius:8px;
  border:1px solid rgba(47,143,131,.35);
  color:#2f8f83;text-decoration:none;font-size:12.5px;
  transition:all .16s;
}
.rail-more:hover{background:#2f8f83;border-color:#2f8f83;color:#fff}

/* 响应式：窄屏隐藏右栏 */
@media (max-width:1240px){
  .layout{grid-template-columns:300px minmax(0,1fr) !important}
  .rail{display:none !important}
}
@media (max-width:1080px){
  .layout{grid-template-columns:1fr !important}
  .layout .side{width:auto !important}
}


/* ---- 三栏顺序修正：侧栏(左) / 内容(中) / 右栏(右) ---- */
.layout>.side{grid-column:1 !important;grid-row:1 !important}
.layout>.content{grid-column:2 !important;grid-row:1 !important}
.layout>.rail{grid-column:3 !important;grid-row:1 !important}

/* ---- 图集页签（玩家风采）改青绿 ---- */
.tabstrip a.on{
  background:linear-gradient(135deg,#d5efe9,#8fcfc4 60%,#2f8f83) !important;
  color:#0a2f2b !important;
  border-color:transparent !important;
}
.tabstrip a{color:#3a5f5a !important;border-radius:6px !important;transition:all .16s}
.tabstrip a:hover{color:#2f8f83 !important}

/* ---- 微信关注卡（右栏） ---- */
.rail-wx .rail-wx-bd{padding:14px 14px 18px;text-align:center}
.rail-wx-id{font-size:13px;color:#3a5f5a;letter-spacing:.5px}
.rail-wx-id b{color:#2f8f83;font-size:14px;letter-spacing:1px}
.rail-wx-tip{
  margin-top:6px;font-size:12px;color:#b3452f;letter-spacing:.5px;
}
.rail-wx-qr{
  margin:12px auto 0;width:200px;height:200px;
  border:1px solid #e2f2ee;border-radius:8px;padding:6px;background:#fff;
  box-shadow:0 8px 20px rgba(20,74,69,.06);
}
.rail-wx-qr img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
.rail-wx-sub{margin-top:10px;font-size:11.5px;color:#8aa8a3;letter-spacing:.5px}
/* =====================================================================
   改回两栏：左 308 侧栏 + 右内容（内容区最大化）
   微信卡并入左侧栏
   ===================================================================== */
.wrap{width:1240px !important}

.layout{
  display:grid !important;
  grid-template-columns:308px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:start !important;
}
.layout>.side{grid-column:1 !important;grid-row:1 !important}
.layout>.content{grid-column:2 !important;grid-row:1 !important}

/* 侧栏里的微信卡 */
.side-card{
  background:#fff;border:1px solid #dcece8;border-radius:10px;
  box-shadow:0 10px 28px rgba(20,74,69,.06);overflow:hidden;
}
.side-hd{
  display:flex;align-items:center;justify-content:space-between;
  height:46px;padding:0 14px;
  background:linear-gradient(180deg,#f6fdfb,#ecf7f5);
  border-bottom:1px solid #e2f2ee;
}
.side-hd b{font-size:15px;color:#0f2e2b;letter-spacing:1.5px;font-weight:600}
.side-hd span{font:9px/1 Arial;letter-spacing:1.5px;color:#9ab5b0}
.side-wx .rail-wx-bd,.side-wx .wx-bd{padding:12px 12px 14px;text-align:center}
.side-wx .rail-wx-id{font-size:12.5px;color:#3a5f5a}
.side-wx .rail-wx-id b{color:#2f8f83;font-size:13.5px;letter-spacing:1px}
.side-wx .rail-wx-tip{margin-top:5px;font-size:11.5px;color:#b3452f}
.side-wx .rail-wx-qr{
  margin:10px auto 0;width:170px;height:170px;
  border:1px solid #e2f2ee;border-radius:8px;padding:5px;background:#fff;
  box-shadow:0 8px 20px rgba(20,74,69,.06);
}
.side-wx .rail-wx-qr img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
.side-wx .rail-wx-sub{margin-top:8px;font-size:11px;color:#8aa8a3}

/* 窄屏 */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr !important}
  .layout>.side{grid-column:1 !important;grid-row:auto !important}
  .layout>.content{grid-column:1 !important;grid-row:auto !important}
}
/* ---- 侧栏微信卡：按实际类名修正（side-wx-*） ---- */
.side-wx-bd{padding:12px 12px 14px;text-align:center}
.side-wx-id{font-size:12.5px;color:#3a5f5a;letter-spacing:.3px}
.side-wx-id b{color:#2f8f83;font-size:13.5px;letter-spacing:1px}
.side-wx-tip{margin-top:5px;font-size:11.5px;color:#b3452f;letter-spacing:.3px}
.side-wx-qr{
  margin:10px auto 0;width:170px;height:170px;
  border:1px solid #e2f2ee;border-radius:8px;padding:5px;background:#fff;
  box-shadow:0 8px 20px rgba(20,74,69,.06);
  box-sizing:content-box;
}
.side-wx-qr img{display:block;width:170px;height:170px;object-fit:contain;border-radius:4px}
.side-wx-sub{margin-top:8px;font-size:11px;color:#8aa8a3}
/* =====================================================================
   三栏：左 290 侧栏 + 中 内容 + 右 250（微信 + 健康公告）
   ===================================================================== */
.wrap{width:1340px !important}

.layout{
  display:grid !important;
  grid-template-columns:290px minmax(0,1fr) 250px !important;
  gap:20px !important;
  align-items:start !important;
}
.layout>.side{grid-column:1 !important;grid-row:1 !important}
.layout>.content{grid-column:2 !important;grid-row:1 !important}
.layout>.rail{grid-column:3 !important;grid-row:1 !important}

.rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.rail .panel,.rail .side-card{width:100%}
.rail .panel-hd{height:46px !important;padding:0 14px !important}
.rail .panel-hd .t{font-size:15px !important}
.rail .health{padding:12px 14px 16px !important;font-size:12px !important;line-height:1.95 !important}

/* 右栏微信卡（沿用 side-wx 结构） */
.rail .side-wx-qr{width:150px !important;height:150px !important;margin-top:8px !important}
.rail .side-wx-qr img{width:150px !important;height:150px !important}
.rail .side-wx-bd{padding:12px 12px 14px !important}

@media (max-width:1240px){
  .layout{grid-template-columns:290px minmax(0,1fr) !important}
  .rail{display:none !important}
}
@media (max-width:1080px){
  .layout{grid-template-columns:1fr !important}
  .layout>.side,.layout>.content{grid-column:1 !important;grid-row:auto !important}
}
/* ---- 用 grid-template-areas 强制三栏位置（最可靠） ---- */
.layout{
  display:grid !important;
  grid-template-columns:290px minmax(0,1fr) 250px !important;
  grid-template-areas:"side main rail" !important;
  gap:20px !important;
  align-items:start !important;
}
.layout>.side{grid-area:side !important;grid-column:auto !important;grid-row:auto !important}
.layout>.content{grid-area:main !important;grid-column:auto !important;grid-row:auto !important}
.layout>.rail{grid-area:rail !important;grid-column:auto !important;grid-row:auto !important;display:flex !important;flex-direction:column;gap:14px}
@media (max-width:1240px){
  .layout{grid-template-columns:290px minmax(0,1fr) !important;grid-template-areas:"side main" !important}
  .layout>.rail{display:none !important}
}
@media (max-width:1080px){
  .layout{grid-template-columns:1fr !important;grid-template-areas:"side" "main" !important}
}
/* =====================================================================
   最终布局：flex + order（兼容 IE / Chrome，三栏顺序稳定）
   左 290 侧栏 | 中 内容 | 右 250（微信 + 健康公告）
   ===================================================================== */
.wrap{width:1340px !important}

.layout{
  display:flex !important;
  align-items:flex-start !important;
  gap:20px !important;
}
.layout>.side{
  order:1 !important;
  flex:0 0 290px !important;
  width:290px !important;
  min-width:0 !important;
  position:sticky !important;
  top:96px !important;
}
.layout>.content{
  order:2 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.layout>.rail{
  order:3 !important;
  flex:0 0 250px !important;
  width:250px !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

@media (max-width:1240px){
  .layout>.rail{display:none !important}
  .layout>.side{flex:0 0 280px !important;width:280px !important}
}
@media (max-width:1080px){
  .layout{flex-direction:column !important}
  .layout>.side{flex:1 1 auto !important;width:100% !important;position:static !important}
  .layout>.content,.layout>.rail{flex:1 1 auto !important;width:100% !important}
  .layout>.rail{display:flex !important}
}
/* =====================================================================
   首页大图换成新合成图（桌面 图片合成与美化.png）
   ===================================================================== */
.hero .pic{
  background-image:url(../images/hero-2026.jpg) !important;
  background-position:center top !important;
  background-size:cover !important;
}
/* 左侧柔光减淡，让宫殿露出来，同时保证标题可读 */
.hero .veil{
  background:
    linear-gradient(96deg,rgba(246,251,255,.78) 0%,rgba(246,251,255,.62) 22%,rgba(246,251,255,.34) 38%,rgba(246,251,255,.10) 52%,rgba(246,251,255,0) 66%),
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 40%,rgba(238,245,252,.80) 86%,#eef5fc 100%) !important;
}
/* 标题加一点字重感和投影，压在图上也清楚 */
.hero h1{text-shadow:0 2px 0 rgba(255,255,255,.9),0 10px 26px rgba(28,63,102,.22) !important}
.hero .kicker{color:#8a5f1e !important}
.hero .sub{color:#2c4a63 !important;text-shadow:0 1px 0 rgba(255,255,255,.85)}
/* =====================================================================
   回到两栏：左 308 侧栏（含微信卡 + 健康公告）+ 右 内容
   ===================================================================== */
.wrap{width:1240px !important}

.layout{
  display:flex !important;
  align-items:flex-start !important;
  gap:22px !important;
}
.layout>.side{
  order:1 !important;
  flex:0 0 308px !important;
  width:308px !important;
  min-width:0 !important;
  position:sticky !important;
  top:96px !important;
}
.layout>.content{
  order:2 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.layout>.rail{display:none !important}

@media (max-width:1080px){
  .layout{flex-direction:column !important}
  .layout>.side{flex:1 1 auto !important;width:100% !important;position:static !important}
  .layout>.content{flex:1 1 auto !important;width:100% !important}
}

/* 大图左右边缘淡出，避免出现硬边 */
.hero .veil{
  background:
    linear-gradient(90deg,#eef5fc 0%,rgba(238,245,252,0) 7%,rgba(238,245,252,0) 93%,#eef5fc 100%),
    linear-gradient(96deg,rgba(246,251,255,.78) 0%,rgba(246,251,255,.62) 22%,rgba(246,251,255,.34) 38%,rgba(246,251,255,.10) 52%,rgba(246,251,255,0) 66%),
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 40%,rgba(238,245,252,.80) 86%,#eef5fc 100%) !important;
}
/* 大图区域底色与页面一致，缩放时不会露白 */
.hero{background:#eef5fc !important}
.hero .pic{background-position:center top !important}


/* ---- 首屏大图：画面自带安全区，cover 裁切不会切到人物 ---- */
.hero{
  height:clamp(440px, 28vw, 580px) !important;
  background:#eef5fc !important;
}
.hero .pic{
  background-image:url(../images/hero-2026.jpg) !important;
  background-size:cover !important;
  background-position:center 22% !important;
  background-repeat:no-repeat !important;
  inset:0 !important;
}
.hero .picbox{inset:0 !important}


/* ---- 内容整体上提（统计条压进大图底部） ---- */
.stats{margin-top:-72px !important}
.ribbon{margin-top:18px !important}


/* =====================================================================
   内页横幅（page-band）：用新图 + 加强左侧柔光，保证标题可读
   ===================================================================== */
.page-band{
  background:#cfe3f6 url(../images/band.jpg) 58% 32%/cover no-repeat !important;
}
.page-band::before{
  background:
    linear-gradient(96deg,rgba(247,252,255,.96) 0%,rgba(247,252,255,.90) 24%,rgba(247,252,255,.62) 44%,rgba(247,252,255,.22) 68%,rgba(247,252,255,.02) 100%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 45%,rgba(238,245,252,.9) 100%) !important;
}
.pb-txt h1{color:#12293f !important;text-shadow:0 2px 0 rgba(255,255,255,.75)}
.pb-txt p{color:#2c4a63 !important}
.pb-en{color:#8a5f1e !important}
.pb-crumb{color:#3d5a75 !important}
.pb-crumb a{color:#2f8f83 !important}


/* 兼容旧浏览器：inset 不支持时用四边定位补上 */
.page-band::before,.page-band::after{top:0;right:0;bottom:0;left:0}

/* 注册/登录页横幅图层也补上四边定位（旧浏览器 inset 不支持） */
.pb-img{top:-3%;right:-3%;bottom:-3%;left:-3%}