/* page-animate.css 页面进入淡入动画 */
body {
  animation: pageFadeIn 0.6s ease;
}
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 抽屉位置控制，*/
.leftNav{ left:-85vw; }
.leftNav.open{ left:0; }
.rightNav{ right:-85vw; }
.rightNav.open{ right:0; }
.upNav{ top:-80%; }
.upNav.open{ top:0; }
.downNav{ bottom:-80%; }
.downNav.open{ bottom:0; }
/* 背景色直接写死，不依赖 Tailwind 的 bg-mask 类（CDN 未生成时遮罩仍可见） */
.bgDiv{ opacity:0; pointer-events:none; background-color: rgba(0,0,0,0.45); }
.bgDiv.show{ opacity:1; pointer-events:auto; }

/* 抽屉滚到底/顶后，不再把滚动"穿透"到底层（滚动链） */
.leftNav,
.rightNav,
.upNav,
.downNav {
    overscroll-behavior: contain;
	overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑弹性滚动，移动端必加 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 旧版Edge */
}

.leftNav::-webkit-scrollbar,
.rightNav::-webkit-scrollbar,
.upNav::-webkit-scrollbar,
.downNav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


/* 热搜标签样式，手机端优化 */

.tag-item {
    display:block;
    padding: 0.35rem 0.6rem;
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 6px; /*小圆角方格*/
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: background-color 0.2s;
}
.tag-item:active {
    background-color: #e5e7eb;
}
.tag-item:hover {
    background-color: #e5e7eb;
}




/* ===== 筛选标签样式 - 放入 default_m.css ===== */
.filter-row {
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  padding-bottom:20px;
  border-bottom:1px solid #eee
}
.filter-row b {
  font-size: 16px;
  font-weight: 500;
}
/* 新增内部标签容器，所有a标签放在这个div里面做3列网格 */
.filter-row a {
  display: block;
  text-align: center;
  padding: 8px 4px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.fieldandcss {
  background-color: #f1f5f9;
  color: #374151;
}
.changefieldandcss {
  background-color: #2563eb;
  color: #ffffff;
}


/* ===== 以下为 cp.html 集成的头部特效 / Tab / 滚动条等公共样式（自 cp.html 内联移入） ===== */
/* 隐藏页面整页滚动条（页面仍可正常滚动） */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* ===== 会员中心头部特效（集成自 cp_header.htm） ===== */
/* Header：固定透明，背景图与下方Banner无缝跟随 */
#pageHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    z-index: 950;
    background-image: url("/8dou_m/tp/0000.jpeg");
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: opacity 0.35s ease;
    opacity: 1;
}
/* Header中间小头像：滚动触发后才显示 */
.small-avatar, .small-avatar2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.small-avatar2 {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.small-avatar2.show {
  opacity: 1;
}

/* Tab栏：默认文档流，临界点后固定到header下方 */
#tabBar {
    background: #ffffff;
    transition: all 0.3s ease;
    position: relative;      /* 文档流也保持较高层叠，防止被下方 transform 内容(tab-track)覆盖 */
    z-index: 800;            /* 低于header(950)/抽屉(999)/遮罩(900)，高于页面内容 */
}
#tabBar.is-fixed {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 800;
}
/* Tab固定占位：防止页面跳动 */
#tabPlaceholder {
    display: none;
}
#tabPlaceholder.active {
    display: block;
}
/* Banner大图：文档流正常滚动 */
.top-banner {
    background-image: url("/8dou_m/tp/0000.jpeg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
}
/* 每屏最小高度：内容不足一屏时也保留滚动空间，吸顶切换Tab不被浏览器回拉回顶 */
.tab-page {
    min-height: calc(100vh - 120px);
}
/* ===== 文章页样式（自 article.html 内联合并，其他页面无对应元素时不影响） ===== */
/* 图片轮播容器 */
.img-slider-wrap{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#eee;
  z-index:100;
  touch-action:pan-y; /* 关键：仅允许纵向原生滚动，横向交给JS */
  overscroll-behavior:contain;
}
.img-slider-track{
  display:flex;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.img-slider-item{
  flex:0 0 100%;
  width:100%;
}
.img-slider-item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  max-height:80vh;
  pointer-events:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.img-index-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:20;
  background:rgba(0,0,0,0.4);
  color:#fff;
  font-size:13px;
  font-medium;
  padding:3px 10px;
  border-radius:999px;
  user-select:none;
  pointer-events:none;
}
.img-dots{
  position:absolute;
  bottom:0px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:10;
}
.img-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#94a3b8;
}
.img-dot.active{
  background:#3b82f6;
}
.custom-html-content{
  width:100%;
  box-sizing:border-box;
  height:100%;
  color:#000;
}
#slide-html-box{
  background:#fff;
}
#myStat2{width:100%;margin-top:10px;}
.circliful {position: relative;margin:auto}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {width: 100%;position: absolute;text-align: center;display: inline-block;}
.circle-info, .circle-info-half {color: #999;padding-top:10px;font-size:12px}
.circliful .fa {margin: -10px 3px 0 3px;position: relative;bottom: 4px;}

/* 文档信息列表 */
.wd_intro ul li{height:2.5rem;line-height:2.5rem;color:#333;font-size:0.9rem;border-bottom:1px solid #f5f5f5}
.wd_intro ul li span{float:right;color:#ff0000}
.wd_intro ul li strong{float:right;font-weight:normal;color:#888}
/* 图片轮换最后增加的一屏，如果是ppt图片轮换则logo不显示 */
.logo-box-PPT{display:none}

/* 星星评级样式 */
.xin-1 {display:block;width:100px;height:20px;margin-top:8px;margin-left:auto;background-image:url("/8dou_m/tp/1xin.gif");background-repeat: no-repeat;background-position: right}
.xin-2 {display:block;width:100px;height:20px;margin-top:8px;margin-left:auto;background-image:url("/8dou_m/tp/2xin.gif");background-repeat: no-repeat;background-position: right}
.xin-3 {display:block;width:100px;height:20px;margin-top:8px;margin-left:auto;background-image:url("/8dou_m/tp/3xin.gif");background-repeat: no-repeat;background-position: right}
.xin-4 {display:block;width:100px;height:20px;margin-top:8px;margin-left:auto;background-image:url("/8dou_m/tp/4xin.gif");background-repeat: no-repeat;background-position: right}
.xin-5 {display:block;width:100px;height:20px;margin-top:8px;margin-left:auto;background-image:url("/8dou_m/tp/5xin.gif");background-repeat: no-repeat;background-position: right}