/* 引入阿里巴巴普惠体，阿里官方公共CDN，所有网站都能用 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('https://at.alicdn.com/t/c/font_4069348_9xq3x7v89y9.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
* {
  font-family: 'AlibabaPuHuiTi', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'AlibabaPuHuiTi', "Microsoft YaHei", sans-serif;
  background-color: #1a1a1a;
  color: #fff;
  line-height: 1.5;
  /* 【关键修复1】强制页面占满整个视口高度 */
  min-height: 100vh;
  /* 【关键修复2】用 flex 布局，自动把底部推到最下面 */
  display: flex;
  flex-direction: column;
  /* 【关键修复3】强制背景色延伸到底部 */
  height: 100%;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
/* 主体内容 */
.main-content {
  padding: 20px 0;
}
.content-row {
  display: flex;
  gap: 20px;
  margin-bottom: 0; /* 👈 改成0，内容的底部就直接碰到页脚了 */
}
/* 左侧栏 */
.sidebar-left {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-box {
  background: url('../images/pay_bg.jpg') no-repeat center center;
  background-size: cover;
  padding: 30px 20px;
  text-align: center;
}
.pay-box h3 {
  font-size: 28px;
  margin-bottom: 5px;
  color: #06b6d4;
}
.pay-box p {
  font-size: 14px;
  color: #ccc;
}
.download-list {
  list-style: none;
  background-color: #2b2218;
  padding: 0;
}
/* 第一行三个按钮的行，flex布局并排 */
.download-row {
  display: flex;
  gap: 1px; /* 中间的细分隔线，和截图2一样 */
  background-color: #333;
}
/* 每个小按钮，占1/3宽度 */
.download-col {
  flex: 1;
  border: none !important;
}
.download-col a {
  display: block;
  padding: 15px 5px;
  color: #ccc;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  background-color: #2b2218;
  transition: all 0.2s ease;
}
.download-col a:hover {
  color: #06b6d4;
  background-color: #333;
}
/* 通栏的大按钮 */
.download-full {
  border-bottom: 1px solid #333;
}
.download-full a {
  display: block;
  padding: 15px;
  color: #ccc;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}
.download-full a .cn {
  display: block;
  font-size: 18px;
  margin-bottom: 3px;
}
.download-full a .en {
  display: block;
  font-size: 12px;
  color: #666;
}
.download-full a:hover {
  color: #ff6600;
  background-color: #333;
}
.service-box {
  background-color: #222;
  padding: 20px;
  text-align: center;
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 👇 这是你新加的，专门管客服里的标题的 */
.service-box h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #06b6d4;
  position: relative;
  overflow: hidden; /* 隐藏溢出的光，保证只在文字上显示 */
}
/* 👇 新加的，专门管客服里的两个图标 */
.service-icons {
  display: flex;
  justify-content: center; /* 两个图标整体居中 */
  gap: 10px; /* 两个图标之间的空隙，你可以自己改大小，比如改成30px就更开 */
  margin-top: 10px; /* 图标和上面客服文字的间距 */
}
/* 每个图标项的样式，给激光做定位 */
.service-icon-item {
  text-align: center;
  position: relative;
  overflow: hidden; /* 隐藏溢出的激光，保证只在图片内显示 */
}
/* 圆角矩形的图片 */
.service-icon-item img {
  width: 100px; /* 图片大小，你可以自己改，比如改成100px就变大 */
  height: 100px;
  border-radius: 8px; /* 圆角大小，你可以自己调，比如12px就更圆 */
  object-fit: cover; /* 保证图片不变形 */
  display: block;
  margin: 0 auto 8px auto; /* 图片和下面文字的小间距 */
}
/* 下面的可点击文字 */
.service-icon-item a {
  font-size: 12px;
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease;
}
/* 鼠标放文字上的时候，文字变橙色，和你网站的主色统一 */
.service-icon-item a:hover {
  color: #06b6d4;
}
.service-box p {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
}
/* 左侧轮播容器，保持原来的3:1高度比例，和之前完全一样 */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
/* 轮播的每个图片 */
.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; 
  transition: opacity 0.5s ease; 
}
/* 当前显示的图片 */
.carousel-item.active {
  opacity: 1;
}
/* 轮播指示器容器，定位到右下角 */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 10;
}
/* 每个指示器，默认是小圆点 */
.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%; /* 👈 如果你想要方块，把这一行删掉就行！ */
  background-color: rgba(255,255,255,0.4); /* 默认半透明白色 */
  cursor: pointer;
  transition: all 0.2s ease;
}
/* 当前的指示器，高亮橙色，和你网站的主色完全统一 */
.indicator.active {
  background-color: #06b6d4;
}
/* 鼠标放上去的时候，指示器会变亮 */
.indicator:hover {
  background-color: rgba(6,182,212,0.7);
}
/* 中间内容 */
.main-middle {
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; /* 👈 就加这一行！给下面的拉宽做定位用 */
}
.cg-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 标准比例，高度自动适配宽度 */
  border-radius: 6px;
  overflow: hidden;
}
.cg-box img,
.cg-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证内容填满容器，不会变形 */
  display: block;
}
.news-box {
  background-color: #222;
  padding: 15px;
  position: relative;
  height: 420px; /* 新增：固定新闻板块的总高度，给绝对定位的内容留出空间，解决和装备板块的重叠 */
}
.news-tabs {
  display: flex;
  justify-content: space-between; /* 左右分开，标签左、更多+右，和截图一致 */
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}
.news-tabs-left {
  display: flex;
  width: 500px;
  position: relative; /* 新增：给滑动下划线做定位父容器 */
}
/* 滑动下划线动效，符合你的青色主题 */
.news-tabs-left .tab-slider {
  position: absolute;
  bottom: -11px;
  left: 0;
  height: 2px;
  background-color: #06b6d4; /* 你的主色青色 */
  border-radius: 1px;
  /* 平滑的滑动过渡，用高级的贝塞尔曲线 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 青色外发光，深色背景下非常醒目有质感 */
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.news-tabs-left a {
  color: #ccc;
  text-decoration: none;
  font-size: 16px;
  position: relative;
  padding-bottom: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  text-align: center;
}
/* 新增：标签hover动效，和顶部导航完全统一 */
.news-tabs-left a:hover {
  color: #06b6d4;
  transform: translateY(-2px) scale(1.03); /* 轻微上浮+缩放，细腻高级 */
}
/* 激活状态，改成青色，统一主题 */
.news-tabs-left a.active {
  color: #06b6d4;
}
/* 右侧的更多+，红色突出显示，可点击 */
.news-more {
  color: #06b6d4; /* 改成青色 */
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.news-more:hover {
  color: #5ce1f3; /* hover的时候变亮青色 */
}
.news-tab-content {
  position: absolute;
  top: 60px; /* 对齐标签栏的位置 */
  left: 15px;
  right: 15px;
  height: 340px;
  overflow: hidden;
  /* 默认隐藏，带位移动效 */
  opacity: 0;
  transform: translateY(10px);
  /* 平滑的过渡动效 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; /* 👈 加这行：非激活的内容，不拦截鼠标点击，让点击穿透到下面 */
}
/* 激活的内容，显示并归位 */
.news-tab-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 👈 加这行：激活的内容，恢复正常的点击能力 */
}
.news-list {
  list-style: none;
}
.news-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #333;
  /* 👇 新加的3行：初始状态，准备入场的动画 */
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-list li a {
  color: #ccc;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.news-list li .date {
  color: #666;
  font-size: 12px;
}
/* 👇 切换标签时，列表逐个滑入的动效 */
.news-tab-content.active .news-list li {
  opacity: 1;
  transform: translateX(0);
}
/* 给每个列表项加不同的延迟，实现错落有致的入场效果，一个接一个出来 */
.news-tab-content.active .news-list li:nth-child(1) { transition-delay: 0ms; }
.news-tab-content.active .news-list li:nth-child(2) { transition-delay: 50ms; }
.news-tab-content.active .news-list li:nth-child(3) { transition-delay: 100ms; }
.news-tab-content.active .news-list li:nth-child(4) { transition-delay: 150ms; }
.news-tab-content.active .news-list li:nth-child(5) { transition-delay: 200ms; }
.news-tab-content.active .news-list li:nth-child(6) { transition-delay: 250ms; }
.news-tab-content.active .news-list li:nth-child(7) { transition-delay: 300ms; }
.news-tab-content.active .news-list li:nth-child(8) { transition-delay: 350ms; }
.news-tab-content.active .news-list li:nth-child(9) { transition-delay: 400ms; }
.news-tab-content.active .news-list li:nth-child(10) { transition-delay: 450ms; }

/* 👇 鼠标悬浮的细腻交互动效 */
.news-list li:hover {
  transform: translateX(5px); /* 整个条目轻微右移，有指向性的反馈 */
  border-bottom-color: rgba(6, 182, 212, 0.5); /* 分割线也变成青色半透 */
}
.news-list li:hover a {
  color: #06b6d4; /* 标题文字变成你的主色青色 */
}
.news-list li:hover .date {
  color: #06b6d4; /* 日期也跟着变成青色，整个条目颜色统一 */
}
.equip-show {
  position: absolute; /* 绝对定位，突破原来的宽度限制 */
  left: 0; /* 左边不动，还是和公告的左边对齐 */
  right: -280px; /* 👈 往右拉280px！刚好是中间和右侧的20px间隙+右侧栏的260px宽度，直接拉到页面最右边 */
  bottom: 0; /* 底部不动，还是原来的位置，不会往上跑 */
  height: 334px; /* 高度完全不变！还是和左边客服栏对齐 */
  overflow: hidden;
}
.equip-show .single-equip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
/* 右侧栏 */
.sidebar-right {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ad-item {
  width: 100%;
}
.ad-item img {
  width: 100%;
}
/* 底部栏 - 禁止被压缩 */
.footer {
  background-color: #111;
  padding: 30px 0;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #222;
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
  /* 【关键】禁止底部栏被flex压缩 */
  flex-shrink: 0;
}
.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
/* 左边的logo区域，三个logo并排 */
.footer-left {
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer-logo, .coop-logo {
  width: auto;
  height: auto; /* 完全自适应图片的原始尺寸，和你导航的logo一模一样，不固定大小 */
  opacity: 0.9;
}
/* 右边的文字区域，改成右对齐，满足你的要求 */
.footer-right {
  flex: 1;
  text-align: right;
  line-height: 1.8;
}
/* 防沉迷提示文字，稍微亮一点 */
.anti-addict {
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}
/* 导航链接的样式 */
.footer-links {
  margin-bottom: 5px;
}
.footer-links a {
  color: #666;
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: #06b6d4; /* hover的时候变成橙色，和你网站的主色完全统一 */
}
/* 版权、备案这些文字的间距 */
.copyright, .icp, .site-info {
  margin-bottom: 3px;
}
.site-info a {
  color: #06b6d4; /* 站点链接用橙色突出，和主色统一 */
  text-decoration: none;
}
/* 通用表单样式 */
.form-item {
  margin-bottom: 15px;
}
.form-item label {
  display: block;
  color: #ccc;
  margin-bottom: 5px;
}
.form-item input, .form-item textarea {
  width: 100%;
  padding: 10px;
  background-color: #333;
  border: 1px solid transparent;
  color: #fff;
  font-size: 14px;
}
.btn {
  padding: 12px 30px;
  background-color: #06b6d4;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}
.btn:hover {
  background-color: #e6c147;
}
/* 新的顶部主导航样式 */
.top-nav {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #1a1a1a; 
  background-color: rgba(26, 26, 26, 0.5); 
  border-bottom: 1px solid #333;
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  /* 【新增修复】确保导航栏在最上层，不被其他元素影响 */
  z-index: 999;
  clear: both;
}
.top-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  height: 100%; 
  margin: 0 auto;
}
.nav-left, .nav-right {
  display: flex;
  justify-content: space-around; 
  width: 450px; 
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative; /* 给后面的小横线动效加定位用 */
  transition: all 0.3s ease; /* 把过渡改成所有属性，动效会更流畅自然 */
}
.nav-item a:hover {
  color: #06b6d4;
  transform: translateY(-2px) scale(1.03); /* hover的时候，文字轻微上浮2px，同时放大3%，非常细腻不夸张 */
}
/* 底部的小横线，默认是隐藏的 */
.nav-item a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #06b6d4;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
/* hover的时候，横线从中间慢慢展开到全宽，非常有质感 */
.nav-item a:hover::after {
  width: 100%;
}
.nav-item a .cn {
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px; 
}
.nav-item a .en {
  font-size: 12px; 
  color: #999;
}
.nav-item a:hover .en {
  color: #06b6d4;
}
.logo {
  position: absolute;
  left: 50%;
  top: 0; 
  transform: translateX(-50%);
  z-index: 10;
}
.logo img {
  width: auto;
  height: auto;
}
/* 下拉项的定位，给下拉菜单做准备 */
.nav-item.dropdown {
  position: relative;
}
/* 下拉菜单的默认样式，默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  /* 默认的时候，菜单在上移10px的位置，透明隐藏 */
  transform: translateX(-50%) translateY(-10px);
  min-width: 120px;
  background: rgba(26, 26, 26, 0.9); /* 和导航统一的半透明背景，更协调 */
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* 加阴影，做出悬浮的层次感，非常高大上 */
  list-style: none;
  padding: 8px 0;
  margin: 10px 0 0 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 用更流畅的贝塞尔曲线动效 */
}
/* hover的时候，下拉菜单滑下来显示 */
.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0); /* 回到正常位置，实现从上方滑入的动效 */
}
/* 下拉菜单的子项样式 */
.dropdown-menu li a {
  display: block;
  padding: 6px 16px;
  color: #ccc;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
}
/* 子项的hover动效，更细腻 */
.dropdown-menu li a:hover {
  color: #06b6d4;
  background: rgba(6,182,212,0.1);
  padding-left: 20px; /* hover的时候文字轻微右移，非常细腻的交互 */
}
/* 新的Banner头部样式 */
.header {
  width: 100%;
  height: 823px; /* 改成你banner图片的原始高度823px，固定高度 */
  background: url('../images/banner.jpg') no-repeat center center;
  background-size: auto; /* 保持图片的原始尺寸，不会放大缩小，固定成你要的1920*823 */
}
/* 弹窗样式，全部放这里，不会污染HTML */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}
.modal-content {
  position: relative;
  background: #222;
  border: 1px solid #333;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 10000;
  animation: modalFadeIn 0.3s ease;
}
.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
  color: #06b6d4;
  font-size: 18px;
}
.close-btn {
  color: #999;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}
.close-btn:hover {
  color: #06b6d4;
}
.modal-body {
  padding: 20px;
  color: #ccc;
  line-height: 1.8;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 客服标题的高级扫光动效，光从左到右扫过文字 */
.service-box h4::after {
  content: '客服中心'; /* 复制文字，保证光只在文字上 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 渐变的光：透明→亮白→透明，模拟扫光 */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  /* 3秒扫一次，无限循环 */
  animation: shine 3s infinite linear;
}

@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* 给QQ和群号行，加中间亮两端细的分割线，带同款扫光动效 */
.service-box p:nth-child(3),
.service-box p:nth-child(4) {
  position: relative;
  margin-bottom: 18px; /* 给分割线留出空间，不会挤 */
}
.service-box p:nth-child(3)::after,
.service-box p:nth-child(4)::after {
  content: '';
  position: absolute;
  bottom: -8px; /* 分割线在文字下面8px的位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* 分割线总宽度，占80%不会太满，你可以改成70%/90%自己调 */
  height: 2px;
  /* 👇 中间亮、两端暗的渐变，自动实现中间粗亮、两端细长的效果 */
  background: linear-gradient(90deg, 
    transparent, 
    rgba(6,182,212,0.3), 
    rgba(6,182,212,0.9), 
    rgba(6,182,212,0.3), 
    transparent
  );
  /* 👇 同款扫光动画，和标题的动效完全统一 */
  animation: lineShine 3s infinite linear;
}

/* 分割线的扫光动画，和标题的shine风格完全一致 */
@keyframes lineShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* 四个二维码的激光扫描特效，现在移到父元素上，所有图片都生效 */
.service-icon-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* 激光的渐变：中间最亮，两端暗，和你主题色完全统一 */
  background: linear-gradient(90deg, 
    transparent, 
    rgba(6,182,212,0.6), 
    rgba(6,182,212,1), 
    rgba(6,182,212,0.6), 
    transparent
  );
  /* 激光的发光阴影，模拟真实的激光效果 */
  box-shadow: 0 0 6px rgba(6,182,212,0.8), 0 0 12px rgba(6,182,212,0.4);
  /* 扫描动画，2秒扫一次，无限循环 */
  animation: laserScan 2s infinite ease-in-out;
  z-index: 2; /* 让激光在图片的上面，保证能看到 */
}

/* 激光扫描的动画：只扫图片，不会扫到下面的文字 */
@keyframes laserScan {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100px; /* 👈 只扫到图片的底部（图片高度是100px），不会跑到文字上 */
    opacity: 0;
  }
}
/* 右侧广告轮播容器，高度和中间CG视频区域完全对齐 */
.ad-carousel {
  position: relative;
  width: 100%;
  /* 高度和CG视频保持一致：中间CG宽度650px，16:9比例计算后高度是365.625px，取整366 */
  height: 366px;
  overflow: hidden;
}
.ad-grid {
  width: 100%;
  height: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 给包裹图片的a标签设置flex:1，让三个a标签自动平分公告右侧的整个区域高度 */
.ad-grid a {
  flex: 1;
  display: block;
  width: 100%;
}
/* 让图片填满整个a标签的空间，保证图片不变形，刚好填满区域 */
.ad-grid .grid-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 横向滚动的内部样式，和你网站主题完全统一 */
.equip-show .scroll-track {
  display: flex;
  gap: 15px; /* 图片之间的间隙，你可以改这个数字，比如20就是更大的间隙 */
  width: max-content; /* 自动适配你加的所有图片，不用管加多少 */
  height: 100%;
  align-items: center;
}
.equip-show .scroll-item {
  flex-shrink: 0; /* 保证图片不会被压缩变形 */
  width: 160px; /* 每个图片的宽度，你可以自己调 */
  text-align: center;
}
.equip-show .scroll-item img {
  width: 100%;
  height: 300px; /* 图片的高度，剩下的34px留给下面的文字，保证整个区域总高度不变！ */
  object-fit: cover;
  transition: all 0.2s ease;
}
.equip-show .scroll-item a {
  text-decoration: none;
  color: #ccc;
  font-size: 12px;
  display: block;
}
/* 鼠标放上去的hover效果，和你网站其他地方的交互一样 */
.equip-show .scroll-item a:hover {
  color: #06b6d4; /* 文字变成你网站的青色主色 */
}
.equip-show .scroll-item a:hover img {
  opacity: 0.8; /* 图片轻微变暗，给你反馈 */
}
.equip-show .scroll-item span {
  display: block;
  margin-top: 8px; /* 图片和文字的间距 */
}
/* 注册页面右侧区域的样式，和首页中间+右侧的大容器大小完全一致 */
.register-right {
  flex: 1; /* 自动占满左侧栏之外的所有剩余宽度，和首页中间+右侧的总宽度完全一致 */
  background-color: #1a1a1a; /* 和页面主体背景保持一致 */
}
/* 注册页面横排表单样式，仅作用于注册页 */
#registerForm .reg-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#registerForm .reg-label {
  width: 110px !important;  // 加宽到110px，足够放下长标签，不会换行了
  flex-shrink: 0 !important;
  text-align: right !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}
#registerForm .reg-input {
  width: 220px !important;
  flex-shrink: 0 !important;
  padding: 7px !important;
  font-size: 13px !important;
}
#registerForm .reg-tip {
  font-size: 12px !important;
  color: #999 !important;
  flex: 1 !important;
}
/* 英雄排行标题强制改成青色，覆盖内联的橙色样式，不影响其他任何功能 */
.rank-box h2 {
  color: #06b6d4 !important;
}
/* ==================== 英雄排行页面专属美化样式 ==================== */
/* 区服下拉框美化 */
#rankSelect {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #222 0%, #2a2a2a 100%);
  border: 1px solid #333;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}
#rankSelect:hover {
  border-color: #06b6d4;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
  transform: translateY(-1px);
}

/* 排行顶部标签栏美化（和首页新闻标签统一风格） */
.rank-tabs {
  display: flex;
  position: relative;
  margin-bottom: 20px;
  background: #222;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}
.rank-tabs .tab-slider {
  position: absolute;
  bottom: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}
.rank-tabs a {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
  border-radius: 6px;
}
.rank-tabs a:hover {
  color: #fff;
  transform: translateY(-1px);
}
.rank-tabs a.active {
  color: #fff;
}

/* 排行表格美化 */
.rank-table {
  width: 100%;
  border-collapse: collapse;
  background: #222;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
/* 表头样式，渐变青色 */
.rank-table thead th {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #fff;
  padding: 16px;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  position: relative;
}
.rank-table thead th::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.2);
}
.rank-table thead th:last-child::after {
  display: none;
}

/* 表格行样式 */
.rank-table tbody tr {
  border-bottom: 1px solid #333;
  /* 入场动效的初始状态 */
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rank-table tbody tr:last-child {
  border-bottom: none;
}
.rank-table tbody td {
  padding: 14px 16px;
  color: #ccc;
  font-size: 14px;
  position: relative;
  text-align: center;
}

/* 前三名金银铜高亮样式 */
.rank-table tbody tr.rank-1 {
  background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, transparent 100%);
}
.rank-table tbody tr.rank-1 td:first-child {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255,215,0,0.5);
  font-size: 16px;
}
.rank-table tbody tr.rank-2 {
  background: linear-gradient(90deg, rgba(192,192,192,0.1) 0%, transparent 100%);
}
.rank-table tbody tr.rank-2 td:first-child {
  color: #c0c0c0;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(192,192,192,0.5);
  font-size: 16px;
}
.rank-table tbody tr.rank-3 {
  background: linear-gradient(90deg, rgba(205,127,50,0.1) 0%, transparent 100%);
}
.rank-table tbody tr.rank-3 td:first-child {
  color: #cd7f32;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(205,127,50,0.5);
  font-size: 16px;
}

/* 行hover动效 */
.rank-table tbody tr:hover {
  background: #2a2a2a;
  transform: translateX(5px);
}
.rank-table tbody tr:hover td {
  color: #06b6d4;
}

/* 种族头像hover动效 */
.rank-race-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}
.rank-race-img:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
}

/* 加载动画 */
.rank-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 15px;
}
.rank-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.rank-loading p {
  color: #999;
  font-size: 14px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 内容淡入动效 */
.rank-content-fade {
  animation: rankFadeIn 0.4s ease;
}
@keyframes rankFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 下载中心标题美化，统一网站青色主题，覆盖原来的橙色 */
.download-box h2 {
  color: #06b6d4 !important;
}

/* 👇 顺便加了hover动效，和排行页面统一，鼠标放上去会轻微上浮，更美观 */
.download-list li {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.download-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(6, 182, 214, 0.15);
  background: rgba(6, 182, 214, 0.05);
}
/* 综合资料标题美化，统一网站青色主题，覆盖原来的橙色 */
.info-box h2 {
  color: #06b6d4 !important;
}
/* 新闻页大区筛选标签样式 */
.news-filter-tabs {
  position: relative;
  background: #2a2a2a;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.news-filter-tabs .filter-tab {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
  border-radius: 6px;
}
.news-filter-tabs .filter-tab:hover {
  color: #fff;
  transform: translateY(-1px);
}
.news-filter-tabs .filter-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* ==================== 新增：新闻列表高级动效样式 ==================== */
/* 加载状态样式 */
.news-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 15px;
}
.news-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.news-loading p {
  color: #999;
  font-size: 14px;
}

/* 新闻卡片样式 - 卡片式布局 */
.news-card {
  background: linear-gradient(135deg, #222 0%, #2a2a2a 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #06b6d4, #0ea5e9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.news-card:hover::before {
  opacity: 1;
}
.news-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.5);
}
.news-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.news-card .category-tag {
  display: inline-block;
  padding: 3px 8px;
  background: #2a2a2a;
  border-radius: 4px;
  font-size: 12px;
  color: #06b6d4;
  border: 1px solid #333;
}
.news-card .status-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.news-card .status-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}
.news-card .status-tag.top {
  background: linear-gradient(45deg, #ff4444, #ff6666);
  color: white;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}
.news-card .status-tag.hot {
  background: linear-gradient(45deg, #44cc44, #66ee66);
  color: white;
  box-shadow: 0 0 8px rgba(68, 204, 68, 0.5);
}
.news-card .status-tag.hide {
  background: linear-gradient(45deg, #666666, #888888);
  color: white;
  box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
}
.news-card .status-tag.encrypt {
  background: linear-gradient(45deg, #4488ff, #66aaff);
  color: white;
  box-shadow: 0 0 8px rgba(68, 136, 255, 0.5);
}
.news-card .card-title {
  margin: 0;
  font-size: 20px;
  color: #fff;
  transition: color 0.3s ease;
}
.news-card:hover .card-title {
  color: #06b6d4;
}
.news-card .card-title.hot {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}
.news-card .card-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 13px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
}
.news-card .card-date {
  color: #06b6d4;
}
.news-card .card-author {
  color: #ccc;
}

/* 新闻内容详情页样式 */
.news-detail-box {
  background: linear-gradient(135deg, #222 0%, #2a2a2a 100%);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1; 
  overflow: hidden;
}
.news-detail-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #06b6d4, #0ea5e9, #3b82f6);
  opacity: 0.9;
}
.news-detail-header {
  text-align: center;
  margin-bottom: 25px;
}
.news-detail-title {
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}
.news-detail-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(to right, #06b6d4, #0ea5e9);
  border-radius: 3px;
}
.news-detail-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #999;
  font-size: 14px;
}
.news-detail-content {
  color: #ccc;
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: 30px;
}
.news-detail-content p {
  margin-bottom: 15px;
}
.news-detail-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* 返回按钮高级样式 */
.news-back-btn {
  /* 1. 关键定位设置 */
  position: absolute;
  bottom: 25px;   /* 距离底部25px（可微调） */
  right: 25px;    /* 距离右侧25px（可微调） */
  z-index: 10;    /* 确保在最上层 */

  /* 2. 保留原有视觉样式（以下保持不变） */
  display: inline-block;
  padding: 10px 25px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}
.news-back-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.news-back-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}
.news-back-btn:hover::before {
  transform: translateX(100%);
}
.news-back-btn i {
  margin-right: 5px;
}

/* 分页按钮美化 */
.news-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #333;
}
.news-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #2a2a2a;
  color: #ccc;
  text-decoration: none;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.news-pagination a:hover {
  background: #06b6d4;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
.news-pagination a.active {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: white;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}
.news-pagination a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.news-pagination a:hover::before {
  transform: translateX(100%);
}
.news-pagination a:first-child,
.news-pagination a:last-child {
  border-radius: 8px;
  width: 80px;
}
.news-pagination a:first-child::before,
.news-pagination a:last-child::before {
  display: none;
}

/* 空状态样式 */
.news-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 16px;
}
.news-empty i {
  font-size: 48px;
  color: #333;
  margin-bottom: 20px;
  display: block;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .container {
    width: 95%;
    padding: 0 15px;
  }
  .content-row {
    flex-direction: column;
  }
  .sidebar-left, .register-right {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .news-card {
    padding: 15px;
  }
  .news-card .card-title {
    font-size: 18px;
  }
  .news-pagination a {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
  .news-pagination a:first-child,
  .news-pagination a:last-child {
    width: 70px;
    font-size: 13px;
  }
}

/* ========================================
   装备改造页面新版样式 - 带大区选择 + 左侧分类
   ======================================== */

/* 主容器 - flex: 1 自动占满剩余空间 */
.gamble-main {
    background: #0a0a0f url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="%23ffffff" opacity="0.3"/><circle cx="50" cy="30" r="0.5" fill="%23ffffff" opacity="0.2"/><circle cx="80" cy="60" r="1" fill="%23ffffff" opacity="0.4"/></svg>');
    /* 【关键】flex: 1 自动撑开，把底部推到最下面 */
    flex: 1;
    height: auto;
    padding: 40px 0;
    clear: both;
    position: relative;
}

/* 通用标题 */
.gamble-title {
    text-align: center;
    margin-bottom: 40px;
}
.gamble-title h1 {
    font-size: 36px;
    color: #ffb700;
    text-shadow: 0 0 20px rgba(255, 183, 0, 0.6), 0 0 40px rgba(255, 183, 0, 0.3);
    margin-bottom: 10px;
}
.gamble-title p {
    color: #888;
    font-size: 14px;
}

/* ============== 第1层：大区选择页面 ============== */
.server-select {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.server-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
}
.server-btn {
    width: 220px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #1a1a24 0%, #252535 100%);
    border: 2px solid #333;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.server-btn:hover {
    border-color: #06b6d4;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
}
.server-icon {
    font-size: 48px;
}
.server-name {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.server-desc {
    font-size: 12px;
    color: #888;
}

/* ============== 第2层：大区详情页面 ============== */
.server-content {
    min-height: 600px;
}

/* 返回按钮和标题 */
.content-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}
.back-btn {
    padding: 8px 16px;
    background: #1a1a24;
    border: 1px solid #333;
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}
.back-btn:hover {
    border-color: #06b6d4;
    color: #06b6d4;
}
.content-header h2 {
    color: #fff;
    font-size: 22px;
    margin: 0;
}

/* 左右布局容器 */
.content-layout {
    display: flex;
    gap: 20px;
}

/* ========== 左侧：竖向分类栏 ========== */
.sidebar-left-cat {
    width: 180px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #12121a 0%, #1a1a24 100%);
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 15px;
}
.cat-title {
    color: #06b6d4;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #2a2a3a;
}
.cat-btn {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #aaa;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.cat-btn:hover {
    background: #252535;
    color: #fff;
}
.cat-btn.active {
    background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%);
    color: #fff;
    font-weight: bold;
}

/* ========== 右侧：内容区域 ========== */
.content-right {
    flex: 1;
    min-height: 600px;
}
.server-panel {
    display: none;
}
.server-panel.active {
    display: block;
}

/* 卡片网格布局 2列 */
.gamble-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 单个改造卡片 */
.gamble-card {
    background: linear-gradient(135deg, #12121a 0%, #1a1a24 100%);
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 18px;
    transition: all 0.3s;
}
.gamble-card:hover {
    border-color: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
    transform: translateY(-2px);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a3a;
}
.card-header h3 {
    color: #fff;
    font-size: 14px;
    margin: 0;
}
.card-tag {
    background: #2a2a3a;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: #888;
}
.card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 180px;
}

/* 装备图标 */
.equip-source, .equip-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}
.equip-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.equip-icon img {
    width: 40px;
    height: 40px;
}
.equip-icon.purple {
    border: 2px solid #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.equip-icon.yellow {
    border: 2px solid #eab308;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}
.equip-icon.blue {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
.equip-source span, .equip-target span {
    color: #ccc;
    font-size: 11px;
    text-align: center;
}
.arrow {
    color: #eab308;
    font-size: 20px;
    font-weight: bold;
}

/* 材料列表 */
.material-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.material-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1a1a24;
    border-radius: 5px;
}
.material-item img {
    width: 22px;
    height: 22px;
}
.material-item span {
    color: #aaa;
    font-size: 11px;
}

/* 卡片底部 */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #2a2a3a;
}
.card-footer span {
    color: #666;
    font-size: 11px;
}
.success-rate {
    background: #2a2a3a;
    padding: 3px 10px;
    border-radius: 10px;
    color: #eab308 !important;
    font-weight: bold;
}

/* 响应式 */
@media (max-width: 1200px) {
    .gamble-grid {
        grid-template-columns: 1fr;
    }
    .server-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   空状态提示样式 - 修复高度对齐问题
   ======================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ✅ 只保留最小高度，保证和左侧分类对齐 */
    min-height: 650px;
    /* ❌ 删除 height: 650px，空状态时自动适配 */
    text-align: center;
    background: linear-gradient(135deg, #12121a 0%, #1a1a24 100%);
    border: 1px dashed #333;
    border-radius: 12px;
    width: 100%;
}

/* 【修复】右侧容器 - 移除固定高度，让内容自动撑开 */
.content-right {
    min-height: 650px;  /* ✅ 只保留最小高度，保证空状态时对齐 */
    /* ❌ 删除 height: 650px，让高度随内容自动变化 */
    display: flex;
    flex-direction: column;
}
.content-right > * {
    width: 100%;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}
.empty-state h3 {
    color: #888;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: normal;
}
.empty-state p {
    color: #555;
    font-size: 14px;
}

/* 默认隐藏所有大区面板 */
.server-panel {
    display: none;
}
.server-panel.active {
    display: block;
}

/* 默认隐藏所有卡片，选择分类后显示 */
.gamble-card {
    display: none;
}
.gamble-card.show {
    display: block;
}