/* ========== 1. 基础变量与主题 ========== */
:root{
  --brand:#0b3d91;--brand-2:#1565c0;--ink:#0f172a;--muted:#64748b;
  --bg:#ffffff;--soft:#f6f8fc;--line:#e6ebf3;--radius:14px;
  --shadow:0 12px 32px -16px rgba(15,23,42,.18);
  --header-h:70px;
}
html[data-theme="dark"]{
  --brand:#7dd3fc;--brand-2:#38bdf8;--ink:#e6f0ff;--muted:#a5b8d4;
  --bg:#0a2d5c;--soft:#0f3a72;--line:#1c4a85;--shadow:0 12px 32px -16px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.65;font-size:16px;transition:background .25s,color .25s}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,video{max-width:100%;height:auto;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:760px}

/* ========== 2. 顶部导航 ========== */
.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h);position:relative}

/* 核心 Logo 逻辑：完全互斥 + 尺寸统一 */
.logo{display:flex!important;align-items:center;flex-shrink:0;text-decoration:none!important}
.logo .logo-img{display:none;height:52px!important;max-height:52px!important;width:auto!important;object-fit:contain!important}
html[data-theme="light"] .logo-img-light,html:not([data-theme="dark"]) .logo-img-light{display:block!important}
html[data-theme="dark"] .logo-img-dark{display:block!important}

.main-nav{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:20px!important;margin-left:20px!important;flex:auto!important}
.main-nav a{color:var(--muted);white-space:nowrap!important;font-size:14px}
.main-nav a.active,.main-nav a:hover{color:var(--brand);text-decoration:none}

.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.theme-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.theme-switch button{background:transparent;border:0;padding:6px 10px;cursor:pointer;color:var(--muted);font-size:15px;transition:.15s;font-family:inherit}
.theme-switch button:hover{color:var(--brand)}
.theme-switch button.active{background:var(--soft);color:var(--brand)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:36px;font-size:18px;cursor:pointer;color:var(--ink)}

/* ========== 3. 自定义语言选择器 ========== */
.lang-picker{position:relative;display:inline-block;line-height:1}
.lang-picker-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font-size:13px;font-family:inherit;line-height:1;max-width:220px;white-space:nowrap}
.lang-picker-btn:hover{border-color:var(--brand)}
.lang-picker-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;display:block;flex-shrink:0}
.lang-picker-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.lang-picker-caret{font-size:10px;color:var(--muted);margin-left:2px}
ul.lang-picker-menu{list-style:none!important;margin:0!important;padding:6px!important}
ul.lang-picker-menu>li{list-style:none!important;margin:0!important;padding:0!important;display:block!important}
.lang-picker-menu{position:absolute!important;right:0!important;top:calc(100% + 6px)!important;background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:0 12px 32px -16px rgba(15,23,42,.28)!important;min-width:240px!important;max-height:60vh!important;overflow-y:auto!important;z-index:9999!important;display:none!important}
.lang-picker.open .lang-picker-menu{display:block!important}
.lang-picker-item{display:flex!important;align-items:center!important;gap:10px!important;padding:8px 12px!important;border-radius:6px!important;color:var(--ink)!important;text-decoration:none!important;font-size:13px!important;white-space:nowrap!important;line-height:1.2!important}
.lang-picker-item:hover{background:var(--soft)!important;color:var(--brand)!important;text-decoration:none!important}
.lang-picker-item.active{background:var(--soft)!important;color:var(--brand)!important;font-weight:600!important}
.lang-picker-name{overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* ========== 4. 主视觉 ========== */
.hero{padding:90px 0 80px;background:linear-gradient(180deg,var(--soft),var(--bg))}
.hero-title{font-size:clamp(28px,4.6vw,52px);letter-spacing:-.035em;line-height:1.15;max-width:820px}
.hero-sub{color:var(--muted);margin-top:14px;max-width:640px;font-size:17px}
.btn-primary{display:inline-block;margin-top:28px;padding:11px 24px;background:var(--brand);color:#fff;border-radius:10px;font-weight:600;text-decoration:none!important}
html[data-theme="dark"] .btn-primary{color:#0a2d5c}
.btn-primary:hover{opacity:.9}

/* ========== 5. 通用区块与卡片 ========== */
.section{padding:64px 0;border-top:1px solid var(--line)}
.section-title{font-size:23px;letter-spacing:-.02em;margin-bottom:24px}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.article-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);color:var(--ink);transition:.2s;height:100%}
.article-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.article-img{width:100%;height:170px;overflow:hidden;background:var(--soft)}
.article-img img,.article-img video{width:100%;height:100%;object-fit:cover;display:block}
.article-body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.article-body h3{font-size:16px;margin-bottom:6px;font-weight:600}
.article-body p{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cat-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);transition:.2s;overflow:hidden;height:100%}
.cat-card:hover{border-color:var(--brand-2);box-shadow:var(--shadow);text-decoration:none;transform:translateY(-2px)}
.cat-img-wrap{width:100%;height:160px;overflow:hidden;background:var(--soft)}
.cat-img{width:100%;height:100%;object-fit:cover;display:block}
.cat-content{padding:20px;display:flex;flex-direction:column;flex:1}
.cat-content h3{font-size:17px;margin-bottom:8px;font-weight:600}
.cat-content p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ========== 6. 页面头与文章详情 ========== */
.page-head{padding:56px 0 28px;border-bottom:1px solid var(--line);background:var(--soft)}
.page-head h1{font-size:32px;letter-spacing:-.03em}
.page-head p{color:var(--muted);margin-top:10px}
.subcats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.subcats a{padding:6px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}
.subcats a:hover{color:var(--brand)}

.article-page{padding:56px 0 80px}
.article-page h1{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.02em;margin-bottom:10px;word-wrap:break-word}
.article-meta{color:var(--muted);font-size:13px;margin-bottom:18px}
.article-lead{font-size:17px;color:var(--muted);margin-bottom:24px}
.article-hero{width:100%;border-radius:var(--radius);margin:12px 0 24px}
.article-video{width:100%;border-radius:var(--radius);margin:12px 0 24px;background:#000}
.article-content p{margin:14px 0;text-indent:2em;line-height:1.8}
.article-content h2{font-size:22px;margin:26px 0 12px;text-indent:0}
.article-content h3{font-size:18px;margin:22px 0 10px;text-indent:0}
.article-content img{max-width:100%;height:auto;border-radius:10px;margin:12px 0}
.article-content ul,.article-content ol{padding-left:22px;margin:12px 0;text-indent:0}
.article-content table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse}
.notfound{padding:120px 0;text-align:center}
.nf-code{font-size:64px;letter-spacing:-.04em}
.nf-msg{color:var(--muted);margin-top:8px}
.nf-act{margin-top:20px}

/* ========== 7. 页脚 ========== */
.site-footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:13px;background:var(--soft)}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:0 16px}
.footer-inner nav a{color:var(--muted)}

/* ========== 8. 响应式调整 ========== */
@media (max-width:1199px){
  .main-nav{gap:16px!important;margin-left:16px!important}
  .hero{padding:72px 0 64px}
}
@media (max-width:991px){
  :root{--header-h:64px}
  .container{padding:0 18px}
  .section{padding:48px 0}
  .article-grid,.cat-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
  .hero{padding:56px 0 48px}
  .page-head{padding:40px 0 22px}.page-head h1{font-size:26px}
  .logo .logo-img{height:44px!important;max-height:44px!important}
}

/* ========== 9. 手机端 (完美适配) ========== */
@media (max-width:767px){
  :root{--header-h:64px}
  .container{padding:0 14px}
  .header-inner{flex-wrap:nowrap!important;height:64px!important;padding:0 10px!important}
  .main-nav{display:none!important}
  .nav-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;border:none!important;width:32px!important;height:32px!important;font-size:20px!important}
  
  /* 移动端下拉菜单 */
  body.nav-open .main-nav{
    display:flex!important;position:absolute;top:100%;left:0;right:0;width:100%!important;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column!important;align-items:flex-start!important;gap:0!important;
    margin:0!important;padding:10px 20px!important;
    max-height:calc(100vh - var(--header-h));overflow-y:auto!important;z-index:99;
    box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);
  }
  body.nav-open .main-nav a{width:100%!important;padding:12px 0!important;border-bottom:1px solid var(--line);font-size:15px!important;white-space:normal!important}
  body.nav-open .main-nav a:last-child{border-bottom:0}

  /* Logo 与右侧按钮 */
  .logo .logo-img{height:46px!important;max-height:46px!important} /* 手机端 Logo 高清放大 */
  .header-right{gap:4px!important;margin-left:auto!important}
  
  .theme-switch{border:none!important}
  .theme-switch button{padding:4px 6px!important;font-size:16px!important}
  
  .lang-picker-btn{padding:4px!important;border:none!important;background:transparent!important;gap:2px!important}
  .lang-picker-flag{width:24px!important;height:16px!important;border-radius:3px!important}
  .lang-picker-current{display:none!important}
  .lang-picker-caret{font-size:12px!important;margin-left:0!important}

  /* 其他内容 */
  .hero{padding:44px 0 36px}
  .hero-sub{font-size:15px}
  .section{padding:36px 0}
  .article-grid,.cat-grid{grid-template-columns:1fr;gap:14px}
  .article-img{height:180px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ========== 10. 极窄屏适配 ========== */
@media (max-width:375px){
  .logo .logo-img{height:40px!important;max-height:40px!important}
  .lang-picker-flag{width:20px!important;height:14px!important}
  .theme-switch button{font-size:14px!important;padding:4px!important}
}

/* ========== 修复深色模式下 Logo 视觉偏小问题 ========== */
html[data-theme="dark"] .logo-img-dark {
  display: block !important;
  /* 深色模式单独放大，比浅色大 6px */
  height: 58px !important;
  max-height: 58px !important;
}

@media (max-width: 991px) {
  html[data-theme="dark"] .logo-img-dark {
    height: 50px !important;
    max-height: 50px !important;
  }
}

@media (max-width: 767px) {
  html[data-theme="dark"] .logo-img-dark {
    height: 52px !important;
    max-height: 52px !important;
  }
}

@media (max-width: 375px) {
  html[data-theme="dark"] .logo-img-dark {
    height: 46px !important;
    max-height: 46px !important;
  }
}

/* ========== 卡片视频播放覆盖层 ========== */
.video-cover {
  position: relative;
  cursor: pointer;
}
.video-cover .card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* 让点击穿透到 a 标签触发拦截，或直接点覆盖层 */
}
/* 半透明播放按钮 */
.play-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15); /* 微微加深一点封面 */
  transition: background 0.2s;
  z-index: 2;
}
.play-overlay:hover {
  background: rgba(0, 0, 0, 0.3);
}
.play-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.play-overlay:hover .play-icon {
  transform: scale(1.1);
  background: #fff;
}
/* 三角形 */
.play-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--brand);
  margin-left: 5px;
}

/* ========== 详情页大视频兼容 ========== */
.article-video .play-overlay {
  border-radius: var(--radius);
}
.article-video video[controls] {
  pointer-events: auto !important;
}

/* ========== 强制播放层绝对最上层，防止被 Video 遮挡 ========== */
.play-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999 !important;
  cursor: pointer !important;
  background: rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.play-overlay:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}
.video-cover video {
  pointer-events: none !important; /* 视频本身不响应点击 */
}
.video-cover video[controls] {
  pointer-events: auto !important; /* 播放后恢复交互 */
}

/* ========== 终极视频沉浸播放样式 ========== */
.video-cover {
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden;
}
.video-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-overlay {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.15) !important;
  transition: opacity 0.3s, background 0.2s !important;
  z-index: 10 !important;
}
.play-overlay:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}
.play-overlay:hover .play-icon {
  transform: scale(1.1);
  background: #fff;
}
.play-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
}
.play-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--brand);
  margin-left: 5px;
}

/* 当处于播放状态时，覆盖层彻底透明且不响应鼠标，让点击直达 video */
.video-cover.playing .play-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========== 终极视频播放样式 ========== */
.video-cover {
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden;
  background: #000;
}
.video-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-video video {
  width: 100% !important;
  display: block;
}

.play-overlay {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.15) !important;
  transition: background 0.2s !important;
  z-index: 10 !important;
}
.play-overlay:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}
.play-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
}
.play-overlay:hover .play-icon {
  transform: scale(1.1);
  background: #fff;
}
.play-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--brand);
  margin-left: 5px;
}

/* 播放中隐藏覆盖层 */
.video-cover.playing .play-overlay {
  display: none !important;
}

/* ========== 视频右下角音量切换按钮 ========== */
.video-wrap {
  position: relative !important;
}
.volume-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 25;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.volume-btn:hover {
  background: rgba(0,0,0,0.85);
  transform: scale(1.05);
}

/* ========== 视频右下角控制按钮组 (音量+全屏) ========== */
.video-wrap {
  position: relative !important;
}

/* 音量按钮位置微调 */
.volume-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 56px !important; /* 往左移，给全屏让位 */
  z-index: 25 !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}

/* 全屏按钮位置 */
.fullscreen-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 25 !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}

.volume-btn:hover, .fullscreen-btn:hover {
  background: rgba(0,0,0,0.85) !important;
  transform: scale(1.05) !important;
}

/* 全屏时视频撑满屏幕 */
.video-wrap:fullscreen video {
  object-fit: contain !important;
  max-height: 100vh !important;
  width: 100vw !important;
}

/* ========== 多语言导航栏自适应与横向滚动 ========== */
.nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 15px;
  max-width: 100%;
  overflow: hidden; /* 锁死宽度 */
}

.main-nav {
  display: flex !important;
  flex-wrap: nowrap !important; /* 禁止换行 */
  align-items: center !important;
  gap: 20px !important;
  overflow-x: auto !important;  /* 允许横向滚动 */
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;     /* IE 隐藏滚动条 */
  margin: 0 !important;
  padding: 10px 0 !important;
  flex: 1;
}

.main-nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari 隐藏滚动条 */
}

.main-nav a {
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* 右侧渐隐遮罩 */
.nav-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg) 80%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s;
}
.nav-wrapper.has-overflow::after {
  opacity: 1;
}

/* 向右三角箭头 */
.nav-arrow {
  position: absolute;
  right: -5px;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: none; /* 默认隐藏，有超出时显示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: var(--brand);
  transition: transform 0.2s, opacity 0.3s;
}
.nav-arrow:hover {
  transform: scale(1.1);
}
.nav-wrapper.has-overflow .nav-arrow {
  display: flex;
}

/* 手机端（下拉菜单）不需要滚动箭头 */
@media (max-width: 767px) {
  .nav-wrapper { margin: 0 !important; overflow: visible; }
  .nav-arrow { display: none !important; }
  .nav-wrapper::after { display: none; }
  .main-nav { overflow-x: visible !important; flex-direction: column !important; }
}

/* ========== 终极强制：导航栏滑动与箭头固定 ========== */
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.logo { flex-shrink: 0 !important; }
.header-right { flex-shrink: 0 !important; }

/* 中间导航容器分配剩余空间 */
.nav-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* 核心：允许 flex 子项收缩 */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 15px !important;
}

/* 允许滚动 */
.main-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  margin: 0 !important;
  padding: 10px 0 !important;
  width: 100% !important;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { white-space: nowrap !important; flex-shrink: 0; }

/* 遮罩 */
.nav-wrapper::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg) 80%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s;
}
.nav-wrapper.has-overflow::after { opacity: 1; }

/* 箭头 */
.nav-arrow {
  position: absolute !important;
  right: -15px !important;
  z-index: 99 !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  color: var(--brand) !important;
}
.nav-wrapper.has-overflow .nav-arrow { display: flex !important; }

/* ========== 终极强制：导航栏滑动与箭头固定 ========== */
.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

.logo { flex-shrink: 0 !important; }
.header-right { flex-shrink: 0 !important; }

/* 中间导航容器分配剩余空间 */
.site-header .nav-wrapper {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important; /* 关键：允许收缩，防止撑破 */
  position: relative !important;
  margin: 0 15px !important;
  overflow: hidden !important; /* 强制隐藏超出 */
}

.site-header .main-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important; /* 强制出现滚动条 */
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}
.site-header .main-nav::-webkit-scrollbar { display: none; }
.site-header .main-nav a { white-space: nowrap !important; flex-shrink: 0; }

/* 箭头显示逻辑 */
.site-header .nav-arrow {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 99 !important;
  background: #ff0000 !important; /* 红色测试，确认渲染 */
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* 只有存在溢出时 JS 才会把这个类加上去 */
.site-header .nav-wrapper.has-overflow .nav-arrow {
  display: flex !important;
}

/* ========== 导航栏终极约束 ========== */
.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.site-header .logo { flex-shrink: 0 !important; }
.site-header .header-right { flex-shrink: 0 !important; }

/* 覆盖之前的 nav 限制，避免互相打架 */
@media (min-width: 768px) {
  .site-header .nav-wrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .site-header .main-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}

/* ========== 导航栏终极强制水平滚动 ========== */
.site-header .header-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.site-header .logo {
  flex: 0 0 auto !important;
}

.site-header .header-right {
  flex: 0 0 auto !important;
}

/* 中间导航容器：强制占据剩余空间并允许内部滚动 */
.site-header .nav-wrapper {
  flex: 1 1 0% !important; /* 必须写 0%，防止被内容撑大 */
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 15px !important;
}

/* 强制滚动 */
.site-header #mainNav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
}
.site-header #mainNav::-webkit-scrollbar {
  display: none !important;
}

/* 箭头的绝对定位与红色背景测试 */
.site-header #navArrowRight {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 999 !important;
  background: #ff0000 !important; /* 测试：改成显眼的红色 */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: none; /* 默认隐藏，由 JS 控制显示 */
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ========== 导航栏终极约束 (不可更改) ========== */
.header-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Logo 与右侧按钮的尺寸固定 */
.header-inner .logo { flex: 0 0 auto !important; }
.header-inner .header-right { flex: 0 0 auto !important; }

/* 核心：让 nav-wrapper 占据剩余空间，但绝不被内容撑大 */
.header-inner .nav-wrapper {
  flex: 1 1 0% !important; 
  min-width: 0 !important;  /* 破解 flex 被撑大的关键 */
  position: relative !important;
  overflow: hidden !important;
  margin: 0 15px !important;
  display: flex !important;
  align-items: center !important;
}

/* 强制出现滚动条 */
.header-inner #mainNav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header-inner #mainNav::-webkit-scrollbar {
  display: none !important;
}
.header-inner #mainNav a {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ========== 强制隐藏原生滚动条 ========== */
#mainNav::-webkit-scrollbar {
  display: none !important;
}

/* ========== 修复手机端 Header 挤压重叠问题 ========== */
@media (max-width: 767px) {
  /* 1. 手机端隐藏中间的 nav-wrapper，它只用于 PC 端 */
  .header-inner .nav-wrapper {
    display: none !important; 
  }
  
  /* 2. 强制隐藏手机端不需要的滑动箭头 */
  #navArrowRight {
    display: none !important;
  }

  /* 3. 重新分配左右空间，确保右侧按钮不重叠 */
  .header-inner {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    height: 64px !important;
  }

  /* 4. 右侧按钮组，强制靠右且不收缩，加入合理间距 */
  .header-inner .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important; /* 按钮之间的间距 */
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* 5. 修复主题按钮（太阳/月亮）挤在一起的问题 */
  .theme-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .theme-switch button {
    padding: 4px 8px !important;
    font-size: 16px !important;
  }

  /* 6. 修复汉堡菜单按钮被挤掉的问题 */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
  }
}

/* ========== 手机端导航栏防溢出终极方案 ========== */
@media (max-width: 767px) {
  /* 彻底防止横向滚动条导致页面整体偏移 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .site-header, .header-inner {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 8px !important; /* 缩小左右内边距，给按钮腾空间 */
    box-sizing: border-box !important;
  }

  /* Logo 稍微缩小一点，给右侧让位 */
  .header-inner .logo-img {
    height: 36px !important; 
  }

  /* 右侧按钮组：间距极限压缩 */
  .header-inner .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  /* 语言选择器：手机上只显示国旗，隐藏文字和下拉小箭头，去掉边框背景 */
  .lang-picker-btn {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
  }
  .lang-picker-current, .lang-picker-caret {
    display: none !important; 
  }
  .lang-picker-flag {
    width: 22px !important;
    height: 15px !important;
  }

  /* 太阳/月亮按钮：缩小内边距 */
  .theme-switch {
    border: none !important;
  }
  .theme-switch button {
    padding: 3px 5px !important;
    font-size: 15px !important;
  }

  /* 汉堡菜单：强制固定尺寸，不准超出去 */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }
}

/* ========== 手机端导航栏防溢出终极方案 ========== */
@media (max-width: 767px) {
  /* 彻底防止横向滚动条导致页面整体偏移 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .site-header, .header-inner {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 8px !important; /* 缩小左右内边距，给按钮腾空间 */
    box-sizing: border-box !important;
  }

  /* Logo 稍微缩小一点，给右侧让位 */
  .header-inner .logo-img {
    height: 36px !important; 
  }

  /* 右侧按钮组：间距极限压缩 */
  .header-inner .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  /* 语言选择器：手机上只显示国旗，隐藏文字和下拉小箭头，去掉边框背景 */
  .lang-picker-btn {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
  }
  .lang-picker-current, .lang-picker-caret {
    display: none !important; 
  }
  .lang-picker-flag {
    width: 22px !important;
    height: 15px !important;
  }

  /* 太阳/月亮按钮：缩小内边距 */
  .theme-switch {
    border: none !important;
  }
  .theme-switch button {
    padding: 3px 5px !important;
    font-size: 15px !important;
  }

  /* 汉堡菜单：强制固定尺寸，不准超出去 */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }
}

/* ========== 手机端真正 100% 锁定、无滚动、超干净布局 ========== */
@media (max-width: 767px) {
  /* 1. 锁死屏幕，绝不允许横向滑动 */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .site-header {
    width: 100% !important;
    max-width: 100vw !important;
    border-bottom: 1px solid var(--line);
  }

  .header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 12px !important;
    height: 60px !important;
    box-sizing: border-box !important;
  }

  /* 2. 左侧 Logo */
  .header-inner .logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .header-inner .logo-img {
    height: 38px !important;
    width: auto !important;
  }

  /* 3. 彻底隐藏横滑导航和滑动箭头！ */
  .header-inner .nav-wrapper {
    display: none !important; 
  }
  #navArrowRight {
    display: none !important;
  }

  /* 4. 右侧按钮组：靠右、等距、不换行 */
  .header-inner .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* 5. 国旗：只保留图标，极度精简 */
  .lang-picker-btn {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
  }
  .lang-picker-current, .lang-picker-caret {
    display: none !important;
  }
  .lang-picker-flag {
    width: 24px !important;
    height: 16px !important;
    border-radius: 2px !important;
  }

  /* 6. 主题切换：去掉外边框，只留两个小图标 */
  .theme-switch {
    display: flex !important;
    border: none !important;
  }
  .theme-switch button {
    padding: 0 4px !important;
    font-size: 18px !important;
    color: var(--muted) !important;
  }

  /* 7. 汉堡菜单：标准大小，绝对不超出屏幕 */
  .nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ink) !important;
    flex-shrink: 0 !important;
  }

  /* 8. 手机端下拉菜单（点汉堡出来的列表） */
  body.nav-open .main-nav {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    z-index: 99 !important;
  }
  
  body.nav-open .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    text-align: center !important;
  }
}

/* ========== 绝对暴力锁死移动端横向滚动 ========== */
@media (max-width: 767px) {
  /* 1. 全局锁死：任何情况都不允许出现横向滚动条 */
  html, body {
    overflow-x: clip !important; /* 比 hidden 更彻底，彻底切断滑动 */
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. 所有大区块强制 100% 宽度，并包含内边距 */
  .site-header,
  .site-footer,
  .container,
  .main-nav,
  .nav-wrapper,
  .article-grid,
  .cat-grid,
  .video-wrap,
  .article-page {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 3. 修正卡片网格的最小宽度，防止网格把屏幕撑大 */
  .article-grid,
  .cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }

  /* 4. 防止长单词、URL、或者代码段撑破布局 */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 5. 锁定下拉语言菜单的宽度，防止它飘出屏幕外 */
  .lang-picker-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* 6. 手机端展开的导航栏菜单严格限制宽度 */
  body.nav-open .main-nav {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* ========== 完美修复手机端布局变形与右侧空隙 ========== */
@media (max-width: 767px) {
  /* 1. 彻底解决右侧空隙 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 2. 废弃 Grid，手机端强制使用 Flex 纵向单列，绝对不会变形 */
  .article-grid, .cat-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  /* 3. 强制卡片占满宽度，防止被挤压成细条 */
  .article-card, .cat-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. 图片比例恢复正常 */
  .article-img, .cat-img-wrap {
    width: 100% !important;
    height: 200px !important; /* 固定高度，防止被内容拉扯 */
    overflow: hidden !important;
  }
  .article-img img, .article-img video, .cat-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 5. 清除所有可能导致撑破屏幕的伪元素和绝对定位 */
  .nav-wrapper::after,
  .nav-wrapper::before,
  .nav-arrow {
    display: none !important;
  }

  /* 6. 修复卡片内部文字防溢出 */
  .article-body, .cat-content {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 7. 强制底部安全区适配（防止苹果底部横条遮挡） */
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
}

/* ========== 修复手机端汉堡菜单点击无法展开 ========== */
@media (max-width: 767px) {
  /* 1. 默认状态下，隐藏整个菜单容器 */
  .header-inner .nav-wrapper {
    display: none !important;
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    width: 100vw !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    z-index: 100 !important;
    margin: 0 !important;
  }

  /* 2. 点击汉堡菜单后，让外层容器显示，并变成绝对定位 */
  body.nav-open .header-inner .nav-wrapper {
    display: block !important;
  }

  /* 3. 里面的菜单项纵向排列 */
  body.nav-open .main-nav {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    background: var(--bg) !important;
  }

  /* 4. 菜单项样式，居中，带分割线 */
  body.nav-open .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center !important;
    font-size: 16px !important;
    color: var(--ink) !important;
  }
  body.nav-open .main-nav a:last-child {
    border-bottom: none !important;
  }

  /* 5. 确保三条杠按钮在最上层，不被遮挡 */
  .nav-toggle {
    position: relative !important;
    z-index: 101 !important;
  }
}

/* ========== 绝对强制的手机端下拉菜单 ========== */
@media (max-width: 767px) {
  /* 1. 强制隐藏原来的滑动容器 */
  .header-inner .nav-wrapper {
    display: none !important;
    position: absolute !important;
    top: 100% !important; /* 贴在 header 底部 */
    left: 0 !important;
    width: 100vw !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    z-index: 999 !important;
    margin: 0 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
  }

  /* 2. 强制里面的导航菜单变成垂直排列 */
  .header-inner .main-nav {
    display: none !important; /* 由 JS 来控制它的显示 */
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 3. 菜单项样式 */
  .header-inner .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 16px !important;
    text-align: center !important;
    color: var(--ink) !important;
    white-space: normal !important;
  }
  
  .header-inner .main-nav a:last-child {
    border-bottom: none !important;
  }

  /* 4. 防止箭头干扰 */
  #navArrowRight {
    display: none !important;
  }
}

/* ========== 终极手机端汉堡菜单修复 ========== */
@media (max-width: 767px) {
  /* 默认状态下，手机端完全隐藏这个导航容器 */
  .header-inner .nav-wrapper {
    display: none !important; 
  }
  
  /* 当点击汉堡菜单后，变成 100% 宽度的下拉面板 */
  body.nav-open .header-inner .nav-wrapper {
    display: block !important;
    position: absolute !important;
    top: var(--header-h, 60px) !important;
    left: 0 !important;
    width: 100vw !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
    margin: 0 !important;
  }

  /* 强制里面的菜单变成垂直排列 */
  body.nav-open .header-inner .main-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important; /* 干掉电脑端的滑动条 */
  }

  /* 菜单项居中对齐并加底边框 */
  body.nav-open .header-inner .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center !important;
    font-size: 16px !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  body.nav-open .header-inner .main-nav a:last-child {
    border-bottom: none !important;
  }
}

/* ========== 终极清理：手机端强制隐藏菜单和按钮样式 ========== */
@media (max-width: 767px) {
  /* 隐藏菜单容器，由 JS 控制显示 */
  .header-inner .nav-wrapper {
    display: none !important;
  }
  
  /* 菜单里面的项：居中、带底线 */
  .header-inner .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .header-inner .main-nav a:last-child {
    border-bottom: none !important;
  }

  /* 移动端彻底隐藏那个 PC 端的滑行箭头 */
  #navArrowRight {
    display: none !important;
  }
}

/* ========== 确保按钮布局绝对不挤在一起 ========== */
.site-header .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.nav-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-size: 20px !important;
}

/* ========== 绝对干净版 移动端头部布局 ========== */
@media (max-width: 767px) {
  .header-inner {
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px !important;
  }

  /* 手机端默认隐藏导航容器 */
  .nav-wrapper {
    display: none; 
  }

  /* 菜单展开后的列表项样式 */
  .nav-wrapper .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center !important;
    font-size: 16px !important;
    color: var(--ink) !important;
  }

  /* 确保三个按钮不拥挤 */
  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* 三条杠按钮加上边框和间距，显得正规 */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    font-size: 22px !important;
    background: transparent !important;
    color: var(--ink) !important;
  }
}

/* ========== 彻底修复菜单飞走问题 ========== */
@media (max-width: 767px) {
  /* 强制加上相对定位 */
  .header-inner {
    position: relative !important;
  }

  /* 默认隐藏菜单 */
  .header-inner .nav-wrapper {
    display: none !important;
  }

  /* 当 body 有 nav-open 时，展开菜单，并绝对定位于 header 正下方 */
  body.nav-open .header-inner .nav-wrapper {
    display: block !important;
    position: absolute !important;
    top: 100% !important; /* 刚好贴在头部正下方 */
    left: -15px !important; /* 抵消容器的 padding */
    width: calc(100% + 30px) !important; /* 铺满 100vw */
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    z-index: 99999 !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
  }

  /* 里面的菜单项强制单列排布 */
  body.nav-open .header-inner .main-nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 0 !important;
    overflow: visible !important;
  }

  /* 每个链接的样式 */
  body.nav-open .header-inner .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center !important;
    font-size: 16px !important;
    color: var(--ink) !important;
    background: var(--bg) !important;
  }
  
  body.nav-open .header-inner .main-nav a:last-child {
    border-bottom: none !important;
  }
}

/* 隐藏 PC 端导航，显示手机端菜单 */
@media (max-width: 767px) {
  .nav-wrapper { display: none !important; }
  .mobile-details { display: block; }
}
@media (min-width: 768px) {
  .mobile-details { display: none; }
}

/* 手机端下拉面板绝对定位 */
.mobile-details { position: relative; }
.mobile-details summary::-webkit-details-marker { display: none; }
.mobile-dropdown {
  position: absolute;
  top: 100%;
  right: -10px;
  width: 100vw;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  z-index: 999999;
  padding: 10px 0;
}
.mobile-dropdown a {
  padding: 15px 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
}
.mobile-dropdown a:last-child { border-bottom: none; }

/* ========== 语言选择器纯原生 Details 支持 ========== */
.lang-picker-details {
  position: relative;
  display: inline-block;
}
.lang-picker-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.lang-picker-details summary::-webkit-details-marker {
  display: none;
}
.lang-picker-details[open] .lang-picker-menu {
  display: block !important;
}

/* 确保语言菜单层级最高，不被其它元素遮挡 */
.lang-picker-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px -16px rgba(15,23,42,.28) !important;
  min-width: 240px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  z-index: 999999 !important;
  display: none; /* 默认隐藏，由 details 控制 */
  padding: 6px !important;
}

/* 手机端菜单展开时，语言选择器依然能点 */
@media (max-width: 767px) {
  .header-right {
    position: relative;
    z-index: 100000; /* 确保在汉堡菜单之上 */
  }
  .lang-picker-menu {
    min-width: 200px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ========== 图片 100% 宽度强制输出 ========== */
/* 1. 整体图片基础强制 */
.article-hero,
.article-content img,
.article-img img,
.article-img video,
.cat-img,
.cat-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* 正文里的图片保持圆角，不贴边 */
.article-content img {
    margin: 16px 0 !important;
    border-radius: var(--radius) !important;
}

/* ========== 手机端图片突破边距全屏显示 ========== */
@media (max-width: 767px) {
    /* 手机端取消文章页外层容器的左右内边距 */
    .article-page .container.narrow,
    .article-page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 给文章标题、时间、描述、正文重新加上文字内边距，防止文字贴边 */
    .article-page h1,
    .article-page .article-meta,
    .article-page .article-lead,
    .article-page .article-content,
    .article-page .article-video {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 针对正文图片，既然 outer 已经去掉了边距，这里把内边距也去掉，直接贴满屏幕 */
    .article-page .article-content img {
        margin: 16px 0 !important;
        border-radius: 0 !important; /* 全屏通常不需要圆角 */
    }

    /* 文章顶部大图也强行全屏 */
    .article-page .article-hero {
        border-radius: 0 !important;
        margin: 0 0 20px 0 !important;
    }
    
    /* 卡片图片高度自适应比例，不强制固定高度以防变形 */
    .article-img {
        height: auto !important;
        max-height: 250px !important;
    }
}