/* 夜间模式下，让全站所有图片变暗 */
body.io-black-mode img {
    /* 核心：降低亮度（0.7表示70%亮度，数值越小越暗） */
    filter: brightness(0.7);
    /* 可选：轻微降低对比度，避免图片过暗后显得生硬 */
    filter: brightness(0.7) contrast(0.9);
    /* 切换时的平滑过渡效果（0.3秒渐变） */
    transition: filter 0.3s ease;
}

/* 确保白天模式下图片恢复正常（防止夜间模式样式残留） */
body:not(.io-black-mode) img {
    filter: none !important;
    transition: filter 0.3s ease;
}


.auth-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            /* 调整为清新蓝色渐变背景 */
            background: linear-gradient(120deg, #e3f2fd, #bbdefb); 
            border: 2px solid #42a5f5; /* 加深边框蓝色，增强轮廓感 */
            border-radius: 20px; /* 圆润弧度适配卡通感 */
            color: #0d47a1; /* 深蓝色文字，提升辨识度 */
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 3px 8px rgba(66, 165, 245, 0.25); /* 更柔和的阴影，增强立体感 */
            cursor: default;
            transition: all 0.2s ease; /* 增加 hover 过渡动画 */
        }
        .auth-badge::before {
            content: "✔";
            display: inline-block;
            width: 20px; 
            height: 20px;
            margin-right: 6px;
            background: #42a5f5; /* 统一蓝色系 */
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 20px; 
            font-size: 12px;
            font-weight: normal;
            box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3); /* 给对勾背景加阴影，更立体 */
        }
        /* 鼠标悬浮交互优化 */
        .auth-badge:hover {
            background: linear-gradient(120deg, #bbdefb, #e3f2fd); /* 渐变反向，增加互动感 */
            box-shadow: 0 4px 12px rgba(66, 165, 245, 0.35); 
            transform: translateY(-1px); /* 轻微上移，模拟微动效 */
        }




/*新增卡片*/
.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* 禁止内容换行 */
    border: 1px solid #eee; /* 可选：加个边框方便查看 */
  }
  .scroll-content {
    display: inline-block;
    animation: scroll-left 15s linear infinite; /* 滚动速度可调整 */
  }
  /* 复制一份内容用于衔接 */
  .scroll-content-copy {
    display: inline-block;
    margin-left: 20px; /* 与原内容的间距 */
  }
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 滚动到自身一半时复位 */
  }
  /* 图片样式（可选，根据需要调整） */
  .scroll-img {
    width: 100px;
    height: auto;
    margin: 0 10px; /* 图片之间的间距 */
    vertical-align: middle; /* 与文字对齐 */
  }

/* 二级分类标签容器 */
.io-slider-tab {
    position: relative;
    white-space: nowrap;
}

.slider-tab {
    position: relative;
    white-space: nowrap;
    background: var(--muted-bg-color);
    padding: 4px;
    margin: 0;
    border-radius: var(--theme-border-radius-md);
    list-style: none;
    transition: background-color 0.3s;
}

/* 二级分类标签项 */
.slider-tab .tab-item {
    position: relative;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    font-size: 14px;
    color: var(--muted-color);
    cursor: pointer;
    border-radius: var(--theme-border-radius-sm);
    list-style-type: none;
    transition: 0.3s;
}

/* 未激活标签 hover 效果 */
.slider-tab .tab-item:not(.active):hover {
    background: var(--main-bg-color);
}

/* 激活标签样式 */
.slider-tab .tab-item.active {
    color: #fff;
}

/* 标签激活状态指示器 */
.slider-tab .anchor {
    opacity: 0;
    color: #fff;
    background: var(--focus-color);
    transition: 0.35s;
    border-radius: var(--theme-border-radius-sm);
}
/* 内容卡片容器 */
.content-card {
    padding: 0;
}

/* 内容卡片 hover 效果 */
.content-card:hover .tab-to-more::before {
    width: calc(100% - 5px);
}

/* 标签页内容容器 */
.tab-content {
    margin-top: 0.5rem;
}

/* 标签页内容项（默认隐藏） */
.tab-pane {
    display: none;
}

/* 激活的标签页内容（显示） */
.tab-pane.active {
    display: block;
}
/* 小屏幕下的滚动条控制 */
@media (max-width: 767.98px) {
    .tab-auto-scrollbar::-webkit-scrollbar {
        display: none;
    }
}


/* 网站提示内容样式代码 */
#warningBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 77, 77, 0.8);
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* 初始状态：完全隐藏且不占空间 */
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 9999;
    box-sizing: border-box; /* 避免padding导致宽度溢出 */
}

#warningBox.show {
    /* 显示时的动画状态 */
    opacity: 1;
    transform: translateY(0);
}

#warningBox::before {
    content: "!";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    color: #ff4d4d;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    margin-right: 8px;
    font-size: 14px;
}






.loader {
                width: 250px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: helvetica, arial, sans-serif;
                text-transform: uppercase;
                font-weight: 900;
                color: #f1404b;
                letter-spacing: 0.2em
            }

            .loader::before,
            .loader::after {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                background: #f1404b;
                position: absolute;
                animation: load .7s infinite alternate ease-in-out
            }

            .loader::before {
                top: 0
            }

            .loader::after {
                bottom: 0
            }

            @keyframes load {
                0% {
                    left: 0;
                    height: 30px;
                    width: 15px
                }

                50% {
                    height: 8px;
                    width: 40px
                }

                100% {
                    left: 235px;
                    height: 30px;
                    width: 15px
                }
            }
/*弹窗*/
h1 {
    font-size: 24px; /* 可根据需求调整大小 */
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
}
.h2r {
    font-size: 10px; /* 可根据需求调整大小 */
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
}

    


        
/*网站推荐*/        
        
/* 网站推荐 - 文字放大+紧凑尺寸+精简优化版 */
/* 标签组位置样式（统一保留，无修改） */
.tag-group-left-top,
.tag-group-right-top,
.tag-group-right-bottom {
    position: absolute;
    display: flex;
    gap: 4px; /* 紧凑间距，适配缩小后的标签 */
    z-index: 1;
}
.tag-group-left-top { top: 3px; left: 3px; }
.tag-group-right-top { top: 3px; right: 3px; }
.tag-group-right-bottom { bottom: 3px; right: 3px; }

/* 底部滚动标签组 */
.tag-bottom-scroll {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 4px;
    padding: 2px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 1;
}
.tag-bottom-scroll::-webkit-scrollbar { display: none; }

/* 核心：合并所有标签公共样式（精简代码，减少冗余） */
.recommend-tag,
.recommend-tag1,
.recommend-tag2,
.recommend-tag3,
.recommend-tag4,
.recommend-tag5,
.recommend-tag6,
.recommend-tag7,
.recommend-tag8,
.recommend-tag9,
.recommend-tag10 {
    padding: 0.1rem 0.18rem; /* 缩小标签整体尺寸（紧凑） */
    border-radius: 0.16rem; /* 保持圆润，比例协调 */
    font-size: 0.27rem; /* 放大文字，提升可读性 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 0.5px 1px rgba(255,255,255,0.2);
    white-space: nowrap;
    opacity: 0.88;
    transition: all 0.2s ease;
    letter-spacing: 0.01rem;
    border: 0.5px solid rgba(255,255,255,0.15);
}

/* 单独设置图标大小（与文字同步） */
.recommend-tag10 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.recommend-tag10 i {
    font-size: 0.27rem;
    margin-right: 0.07rem;
}

/* 各标签独立颜色（仅保留差异化样式，精简重复代码） */
.recommend-tag { background: #E63946; color: white; }
.recommend-tag1 { background: #FBBF24; color: #1D2939; border-color: rgba(255,255,255,0.2); }
.recommend-tag2 { background: linear-gradient(90deg, #3B82F6, #2563EB); color: white; }
.recommend-tag3 { background: #6B7280; color: white; }
.recommend-tag4 { background: linear-gradient(90deg, #FF9500, #FF6A00); color: white; }
.recommend-tag5 { background: #DC2626; color: white; }
.recommend-tag6 { background: #8B5CF6; color: white; }
.recommend-tag7 { background: #10B981; color: white; }
.recommend-tag8 { background: #93C5FD; color: #1D2939; border-color: rgba(255,255,255,0.2); }
.recommend-tag9 { background: #FB923C; color: white; }
.recommend-tag10 { background: #6366F1; color: white; }

/* 统一hover交互（精简代码，避免重复） */
.recommend-tag:hover,
.recommend-tag1:hover,
.recommend-tag2:hover,
.recommend-tag3:hover,
.recommend-tag4:hover,
.recommend-tag5:hover,
.recommend-tag6:hover,
.recommend-tag7:hover,
.recommend-tag8:hover,
.recommend-tag9:hover,
.recommend-tag10:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 0.5px 1px rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.3);
}

/* 广告位整体容器 */
.unique-ad-outer-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 8px;
  background-color: var(--outer-bg, rgba(245, 245, 245, 0.8));
}

/* 单个广告位 - 定义颜色变量 */
.distinct-ad-unit {
  width: 23%;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
  background-color: var(--ad-bg, rgba(255, 255, 255, 0.3));
  border: 1px solid var(--border-color, #eaeaea);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: border-color 0.3s ease;
}

.distinct-ad-unit:hover {
  border-color: var(--hover-border, #ccc);
}

/* 广告位内的链接 */
.ad-content-link {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: var(--text-color, #444);
  font-size: 12px;
  line-height: 1.3;
  transition: all 0.3s ease;
}

.ad-content-link:hover {
  background-color: var(--hover-bg, #f9f9f9);
  transform: translateY(-1px);
}

/* 广告标识 */
.ad-identifier {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--identifier-bg, #e0e0e0);
  color: var(--identifier-color, #777);
  font-size: 8px;
  padding: 1px 3px;
  border-top-left-radius: 3px;
  opacity: 0.6;
  font-style: italic;
}

/* 媒体查询 - 手机版适配 */
@media (max-width: 768px) {
  .distinct-ad-unit {
    width: 23%;
    margin-bottom: 10px;
  }
}

/* 夜间模式类名适配（匹配原JS的io-black-mode和io-grey-mode） */
.io-black-mode .unique-ad-outer-wrap,
.io-black-mode .distinct-ad-unit,
.io-black-mode .ad-content-link,
.io-black-mode .ad-identifier {
  --outer-bg: rgba(30, 30, 30, 0.8);
  --ad-bg: rgba(50, 50, 50, 0.3);
  --border-color: #4a4a4a;
  --hover-border: #666;
  --text-color: #ddd;
  --hover-bg: rgba(80, 80, 80, 0.5);
  --identifier-bg: #4a4a4a;
  --identifier-color: #aaa;
}

.io-grey-mode .unique-ad-outer-wrap,
.io-grey-mode .distinct-ad-unit,
.io-grey-mode .ad-content-link,
.io-grey-mode .ad-identifier {
  --outer-bg: rgba(245, 245, 245, 0.8);
  --ad-bg: rgba(255, 255, 255, 0.3);
  --border-color: #eaeaea;
  --hover-border: #ccc;
  --text-color: #444;
  --hover-bg: #f9f9f9;
  --identifier-bg: #e0e0e0;
  --identifier-color: #777;
}

	
	
	
	

/*轮番图代码开始*/


   .slider-container {
      width: 100%;
      position: relative;
      overflow: hidden;
    }

   .slider {
      display: flex;
      width: 100%;
    }

   .slider img {
      width: 100%;
      height: auto;
      display: none;
      cursor: pointer;
      flex-shrink: 0;
    }

   .slider img.active {
      display: block;
    }

   .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      cursor: pointer;
      color: #007BFF;
      background-color: rgba(255, 255, 255, 0.3);
      padding: 5px 10px;
      border-radius: 5px;
      transition: opacity 0.3s ease;
      opacity: 0.7;
    }

   .arrow:hover {
      opacity: 1;
    }

   .prev {
      left: 10px;
    }

   .next {
      right: 10px;
    }
    /*轮番图代码结束*/
    /* 给最外层容器设置宽度和水平滚动属性 */
        #search-list-menu {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
        }

       .hide-type-list {
            /* 可以根据需要设置其他样式，这里先不添加以免影响原样式 */
        }

       .s-type {
            text-align: center;
        }

       .s-type-list.big {
            /* 可以根据需要设置其他样式，这里先不添加以免影响原样式 */
        }

       .anchor {
            position: absolute;
            left: 50%;
            opacity: 0;
        }

       .s-type-list label {
            display: inline-block;
            /* 原样式中的其他属性 */
        }
  
  
  
  


    
    
    .colorful-text {

      background: linear-gradient(45deg, #ff00a9, #fffb00, #00ff7f, #0088ff);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      animation: rainbow 5s linear infinite;

    }
    
    
        #footer-tools [data-v-db6ccf64][data-v-41ba7e2c] {
            top: unset !important;
            bottom: 0 !important;
            right: 44px !important
        }

        .io.icon-fw,
        .iconfont.icon-fw {
            width: 1.15em;
        }

        .io.icon-lg,
        .iconfont.icon-lg {
            font-size: 1.5em;
            line-height: .75em;
            vertical-align: -.125em;
        }

        .screenshot-carousel .img_wrapper a {
            display: contents
        }

        .fancybox-slide--iframe .fancybox-content {
            max-width: 1280px;
            margin: 0
        }

        .fancybox-slide--iframe.fancybox-slide {
            padding: 44px 0
        }

        .navbar-nav .menu-item-286 a {
            background: #ff8116;
            border-radius: 50px !important;
            padding: 5px 10px !important;
            margin: 5px 0 !important;
            color: #fff !important;
        }

        .navbar-nav .menu-item-286 a i {
            position: absolute;
            top: 0;
            right: -10px;
            color: #f13522;
        }

        .io-black-mode .navbar-nav .menu-item-286 a {
            background: #ce9412;
        }

        .io-black-mode .navbar-nav .menu-item-286 a i {
            color: #fff;
        }
        /*悬浮按钮*/
        #jumpButton {
      position: fixed;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background-color: #007BFF;
      color: white;
      font-size: 12px;
      border: none;
      border-radius: 5px;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #jumpButton:hover {
      background-color: #0056b3;
    }
    
    
    
/* 日历时间每日一言 */
/* 名言卡片组件 - 自适应优化版本 */
.quote-container {
    width: 100%; /* 改为100%占满父容器 */
    max-width: 1200px; /* 放大最大宽度，适配电脑端 */
    margin: 10px auto 0;
    background: var(--component-bg, transparent);
    padding: 0 15px; /* 保留小间距，避免贴边太挤 */
    box-sizing: border-box; /* 确保padding不影响总宽度 */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -2px;
    background: var(--header-bg, transparent);
}
.header-title, .time-display {
    font-weight: 500;
    background-color: var(--content-bg, #fff);
    display: inline-block;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.06);
    border-radius: 8px 8px 0 0;
}
.header-title {
    font-size: 0.9rem;
    color: var(--title-color, #555);
    padding: 4px 10px;
}
.time-display {
    font-size: 0.7rem;
    color: var(--time-color, #888);
    padding: 4px 8px;
    border-radius: 0 8px 0 0;
}

.quote-box {
    padding: 12px 15px; 
    background: var(--content-bg, #fff);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    text-align: center;
}

/* 响应式适配（优化断点） */
@media (min-width: 768px) {
    .header-title { font-size: 1.1rem; padding: 6px 14px; }
    .time-display { font-size: 0.8rem; padding: 6px 10px; }
}

@media (max-width: 320px) {
    .header-title { font-size: 0.8rem; padding: 3px 8px; }
    .time-display { font-size: 0.6rem; padding: 3px 6px; }
    .quote-box { padding: 10px 12px; }
}

/* 夜间模式适配 */
.io-black-mode .quote-container { --component-bg: transparent; }
.io-black-mode .header { --header-bg: transparent; }
.io-black-mode .header-title, .io-black-mode .time-display, .io-black-mode .quote-box {
    --content-bg: #2d2d2d;
    --title-color: #e0e0e0;
    --time-color: #a0a0a0;
}

.io-grey-mode .header-title, .io-grey-mode .time-display, .io-grey-mode .quote-box {
    --content-bg: #fff;
    --title-color: #555;
    --time-color: #888;
}

    
        
        
        /*新弹窗代码*/
/* 命名空间样式前缀，避免类名冲突 */
.yct-popover {
  --yct-primary: #4a6cf7;
  --yct-highlight-red: #ff4d4f; /* 红色变量 */
   --yct-highlight-yellow: #faad14; /* 黄色变量 */
   --yct-highlight-green: #52c41a; /* 绿色变量 */
  --yct-accent: #ff4d4f;
  --yct-bg-gray: #f5f7fa;
  --yct-text-gray: #666;
  --yct-border: #e5e7eb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  touch-action: manipulation; /* 优化移动端触摸体验 */
}
.yct-popover.active {
  opacity: 1;
  visibility: visible;
}

.yct-popup {
  width: 90%;
  max-width: 520px;
  background: var(--popup-bg, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  animation: yctPopupShow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.4s;
  will-change: transform; /* 提升动画性能 */
}
.yct-popover.active .yct-popup {
  transform: scale(1);
}
@keyframes yctPopupShow {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.yct-header {
  padding: 20px 24px;
  background: var(--header-bg, var(--yct-bg-gray));
  border-bottom: 1px solid var(--yct-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.yct-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--header-text, #333);
  display: flex;
  align-items: center;
  gap: 8px;
}

.yct-header-tip {
  background: var(--yct-primary);
  color: white;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: yctPulse 2s infinite;
  white-space: nowrap; /* 防止提示文字换行 */
}
@keyframes yctPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
.yct-header-tip::before {
  content: "";
  width: 7px;
  height: 7px;
  background: white;
  border-radius: 50%;
  animation: yctBounce 1.5s infinite;
}
@keyframes yctBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.yct-close-btn {
  cursor: pointer;
  font-size: 24px;
  color: var(--close-color, #999);
  border: none;
  background: transparent;
  transition: color 0.2s;
  outline: none; /* 修复聚焦时边框bug */
}
.yct-close-btn:hover { color: var(--close-hover, #666); }
.yct-close-btn:focus { color: var(--close-focus, #333); }

.yct-content-wrap {
  max-height: 70vh;
  overflow-y: auto;
  flex: 1;
  padding: 24px;
  -ms-overflow-style: none; /* 隐藏IE滚动条 */
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
}
.yct-content-wrap::-webkit-scrollbar {
  width: 6px; /* 优化webkit滚动条 */
}
.yct-content-wrap::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #ddd);
  border-radius: 3px;
}

.yct-content {
  line-height: 1.8;
  color: var(--content-text, #444);
}

.yct-highlight-tip {
  color: var(--yct-accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.yct-highlight-tip::before {
  content: "💡";
  font-size: 18px;
}

.yct-highlight {
  color: var(--yct-primary);
  font-weight: 600;
}

/* 红色高亮（新增） */
 .yct-highlight-red {
   color: var(--yct-highlight-red);
   font-weight: 600;
 }
 /* 黄色高亮（新增） */
 .yct-highlight-yellow {
   color: var(--yct-highlight-yellow);
   font-weight: 600;
 }
 /* 绿色高亮（新增） */
 .yct-highlight-green {
   color: var(--yct-highlight-green);
   font-weight: 600;
 }

.yct-quick-access {
  margin-top: 20px;
}
.yct-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--yct-border);
  border-radius: 8px;
  background: var(--btn-bg, #fff);
  color: var(--yct-primary);
  font-size: 15px;
  text-align: left;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box; /* 修复按钮尺寸计算bug */
}
.yct-btn:hover {
  background: var(--btn-hover-bg, var(--yct-bg-gray));
  border-color: var(--btn-hover-border, #d9e0ee);
  color: #3a5cf6;
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.1);
}
.yct-btn i {
  color: var(--yct-primary);
}

.yct-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--yct-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.yct-actions button {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}
.yct-close {
  background: var(--close-bg, #f0f2f5);
  color: var(--close-text, #666);
}
.yct-close:hover {
  background: var(--close-hover-bg, #e5e7eb);
}
.yct-primary-btn {
  background: var(--yct-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.2);
}
.yct-primary-btn:hover {
  background: #3a5cf6;
  box-shadow: 0 3px 12px rgba(74, 108, 247, 0.3);
}

/* 夜间模式类名适配 */
.io-black-mode .yct-popup,
.io-black-mode .yct-header,
.io-black-mode .yct-content-wrap,
.io-black-mode .yct-btn,
.io-black-mode .yct-close {
  --popup-bg: #2d2d2d;
  --header-bg: #3a3a3a;
  --header-text: #f5f5f5;
  --close-color: #999;
  --close-hover: #ccc;
  --close-focus: #fff;
  --scrollbar-thumb: #555;
  --content-text: #e0e0e0;
  --btn-bg: #3a3a3a;
  --btn-hover-bg: #4a4a4a;
  --btn-hover-border: #5a5a5a;
  --close-bg: #4a4a4a;
  --close-text: #ccc;
  --close-hover-bg: #5a5a5a;
}

.io-grey-mode .yct-popup,
.io-grey-mode .yct-header,
.io-grey-mode .yct-content-wrap,
.io-grey-mode .yct-btn,
.io-grey-mode .yct-close {
  --popup-bg: #fff;
  --header-bg: var(--yct-bg-gray);
  --header-text: #333;
  --close-color: #999;
  --close-hover: #666;
  --close-focus: #333;
  --scrollbar-thumb: #ddd;
  --content-text: #444;
  --btn-bg: #fff;
  --btn-hover-bg: var(--yct-bg-gray);
  --btn-hover-border: #d9e0ee;
  --close-bg: #f0f2f5;
  --close-text: #666;
  --close-hover-bg: #e5e7eb;
}

@media (max-width: 500px) {
  .yct-popup { 
    width: 95%;
    border-radius: 14px;
  }
  .yct-content-wrap {
    max-height: 65vh;
    padding: 20px;
  }
  .yct-header {
    padding: 16px 20px;
  }
  .yct-header h2 {
    font-size: 18px;
  }
  .yct-highlight-tip {
    font-size: 14px;
  }
  .yct-btn, .yct-actions button {
    padding: 10px 14px;
    font-size: 14px;
  }
}


/* 基础样式 - 透明边框风格 */
.welfare-container {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 标题区域 - 透明背景+细边框 */
.welfare-header {
  padding: 14px 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 轻微透明白色 */
  border: 1px solid rgba(0, 0, 0, 0.08); /* 细边框 */
  border-radius: 12px 12px 0 0;
  border-bottom: none; /* 与按钮区边框合并 */
  backdrop-filter: blur(8px); /* 毛玻璃效果增强透明感 */
}
.welfare-title {
  margin: 0;
  color: #1d2129;
  font-size: 18px;
  font-weight: 600;
}

/* 按钮列表 - 透明背景+细边框 */
.welfare-btn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(8px);
}
.welfare-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.9); /* 按钮略实一点 */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  justify-content: flex-start;
}
.welfare-btn:hover {
  border-color: rgba(22, 119, 255, 0.3);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
}

/* 圆形图标 */
.welfare-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}
.welfare-btn[data-modal="mtmt"] .welfare-btn-icon {
  background-color: #ff7d00;
}
.welfare-btn[data-modal="elmelm"] .welfare-btn-icon {
  background-color: #1677ff;
}
.welfare-btn[data-modal="vip"] .welfare-btn-icon {
  background-color: #86909c;
}

.welfare-btn-text {
  font-size: 15px;
  color: #1d2129;
  font-weight: 500;
}

/* 新弹窗代码（yct-命名空间，独立无干扰） */
/* 新弹窗代码（yct-命名空间，优化卡顿+禁止背景滚动） */
.yct-popover {
  --yct-primary: #4a6cf7;
  --yct-accent: #ff4d4f;
  --yct-bg-gray: #f5f7fa;
  --yct-text-gray: #666;
  --yct-border: #e5e7eb;
  --yct-highlight-red: #ff4d4f;
  --yct-highlight-yellow: #faad14;
  --yct-highlight-green: #52c41a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  touch-action: none; /* 优化触摸性能，避免多余触发 */
  overflow: hidden; /* 防止弹窗内容溢出遮罩 */
}
/* 弹窗显示时，给body加样式禁止滚动 */
.yct-popover.active {
  opacity: 1;
  visibility: visible;
}
.yct-popover.active + body {
  overflow: hidden;
  touch-action: none;
}

.yct-popup {
  width: 90%;
  max-width: 520px;
  background: var(--popup-bg, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  /* 优化动画：简化曲线，减少性能消耗，避免与transition冲突 */
  animation: yctPopupShow 0.3s ease-out;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease-out;
  will-change: transform; /* 提前告知浏览器优化动画 */
  backface-visibility: hidden; /* 消除动画闪烁，提升流畅度 */
  transform-style: preserve-3d; /* 增强动画性能 */
}
.yct-popover.active .yct-popup {
  transform: scale(1);
}
/* 简化动画关键帧，减少计算量 */
@keyframes yctPopupShow {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.yct-header {
  padding: 20px 24px;
  background: var(--header-bg, var(--yct-bg-gray));
  border-bottom: 1px solid var(--yct-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; /* 避免换行重叠，替代min-width，更灵活 */
}

.yct-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--header-text, #333);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.yct-header-tip {
  background: var(--yct-primary);
  color: white;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: yctPulse 2s infinite ease-in-out;
  white-space: nowrap;
}
/* 简化脉冲动画，降低性能消耗 */
@keyframes yctPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
.yct-header-tip::before {
  content: "";
  width: 7px;
  height: 7px;
  background: white;
  border-radius: 50%;
  animation: yctBounce 1.5s infinite ease-in-out;
}
/* 简化弹跳动画，减少计算 */
@keyframes yctBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.yct-close-btn {
  cursor: pointer;
  font-size: 24px;
  color: var(--close-color, #999);
  border: none;
  background: transparent;
  transition: color 0.2s ease;
  outline: none;
  padding: 4px;
  border-radius: 50%;
  /* 优化点击区域，避免额外触发 */
  user-select: none;
  -webkit-user-select: none;
}
.yct-close-btn:hover { color: var(--close-hover, #666); }
.yct-close-btn:focus { color: var(--close-focus, #333); }

.yct-content-wrap {
  max-height: 70vh;
  overflow-y: auto;
  flex: 1;
  padding: 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 优化滚动性能 */
  overscroll-behavior: contain;
}
.yct-content-wrap::-webkit-scrollbar {
  width: 6px;
}
.yct-content-wrap::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #ddd);
  border-radius: 3px;
  transition: background 0.2s ease;
}
.yct-content-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #bbb);
}

.yct-content {
  line-height: 1.8;
  color: var(--content-text, #444);
  /* 减少重排，提升渲染速度 */
  overflow-wrap: break-word;
  -webkit-overflow-wrap: break-word;
}

.yct-highlight-tip {
  color: var(--yct-accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.yct-highlight-tip::before {
  content: "💡";
  font-size: 18px;
}

/* 高亮样式 */
.yct-highlight {
  color: var(--yct-primary);
  font-weight: 600;
}
.yct-highlight-red {
  color: var(--yct-highlight-red);
  font-weight: 600;
}
.yct-highlight-yellow {
  color: var(--yct-highlight-yellow);
  font-weight: 600;
}
.yct-highlight-green {
  color: var(--yct-highlight-green);
  font-weight: 600;
}

.yct-quick-access {
  margin-top: 20px;
}
.yct-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--yct-border);
  border-radius: 8px;
  background: var(--btn-bg, #fff);
  color: var(--yct-primary);
  font-size: 15px;
  text-align: left;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  /* 优化交互性能 */
  user-select: none;
  -webkit-user-select: none;
}
.yct-btn:hover {
  background: var(--btn-hover-bg, var(--yct-bg-gray));
  border-color: var(--btn-hover-border, #d9e0ee);
  color: #3a5cf6;
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.1);
}
.yct-btn i {
  color: var(--yct-primary);
}

.yct-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--yct-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.yct-actions button {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  /* 优化交互性能 */
  user-select: none;
  -webkit-user-select: none;
}
.yct-close {
  background: var(--close-bg, #f0f2f5);
  color: var(--close-text, #666);
}
.yct-close:hover {
  background: var(--close-hover-bg, #e5e7eb);
}
.yct-primary-btn {
  background: var(--yct-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.2);
}
.yct-primary-btn:hover {
  background: #3a5cf6;
  box-shadow: 0 3px 12px rgba(74, 108, 247, 0.3);
}

/* yct弹窗夜间/灰色模式适配 */
.io-black-mode .yct-popup,
.io-black-mode .yct-header,
.io-black-mode .yct-content-wrap,
.io-black-mode .yct-btn,
.io-black-mode .yct-close {
  --popup-bg: #2d2d2d;
  --header-bg: #3a3a3a;
  --header-text: #f5f5f5;
  --close-color: #999;
  --close-hover: #ccc;
  --close-focus: #fff;
  --scrollbar-thumb: #555;
  --scrollbar-thumb-hover: #777;
  --content-text: #e0e0e0;
  --btn-bg: #3a3a3a;
  --btn-hover-bg: #4a4a4a;
  --btn-hover-border: #5a5a5a;
  --close-bg: #4a4a4a;
  --close-text: #ccc;
  --close-hover-bg: #5a5a5a;
}

.io-grey-mode .yct-popup,
.io-grey-mode .yct-header,
.io-grey-mode .yct-content-wrap,
.io-grey-mode .yct-btn,
.io-grey-mode .yct-close {
  --popup-bg: #fff;
  --header-bg: var(--yct-bg-gray);
  --header-text: #333;
  --close-color: #999;
  --close-hover: #666;
  --close-focus: #333;
  --scrollbar-thumb: #ddd;
  --scrollbar-thumb-hover: #bbb;
  --content-text: #444;
  --btn-bg: #fff;
  --btn-hover-bg: var(--yct-bg-gray);
  --btn-hover-border: #d9e0ee;
  --close-bg: #f0f2f5;
  --close-text: #666;
  --close-hover-bg: #e5e7eb;
}

@media (max-width: 500px) {
  .yct-popup { 
    width: 95%;
    border-radius: 14px;
  }
  .yct-content-wrap {
    max-height: 65vh;
    padding: 20px;
  }
  .yct-header {
    padding: 16px 20px;
  }
  .yct-header h2 {
    font-size: 18px;
  }
  .yct-highlight-tip {
    font-size: 14px;
  }
  .yct-btn, .yct-actions button {
    padding: 10px 14px;
    font-size: 14px;
  }
}



/* 福利模块样式（welfare-命名空间，独立无干扰） */
.welfare-container {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.welfare-header {
  padding: 14px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  backdrop-filter: blur(8px);
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), transparent;
}
.welfare-title {
  margin: 0;
  color: #1d2129;
  font-size: 18px;
  font-weight: 600;
}

.welfare-btn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(8px);
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), transparent;
}

.welfare-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  justify-content: flex-start;
  outline: none;
}
.welfare-btn:hover,
.welfare-btn:focus {
  border-color: rgba(22, 119, 255, 0.3);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
}

.welfare-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}
.welfare-btn[data-modal="mtmt"] .welfare-btn-icon {
  background-color: #ff7d00;
}
.welfare-btn[data-modal="elmelm"] .welfare-btn-icon {
  background-color: #1677ff;
}
.welfare-btn[data-modal="vip"] .welfare-btn-icon {
  background-color: #86909c;
}

.welfare-btn-text {
  font-size: 15px;
  color: #1d2129;
  font-weight: 500;
}

/* 福利弹窗样式（修复冲突核心） */
.welfare-modal {
  display: none; /* 初始隐藏，独立控制 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999; /* 与yct弹窗同层级，避免覆盖 */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}
/* 新增active类，独立控制显示，避免与yct弹窗触发逻辑冲突 */
.welfare-modal.active {
  display: flex;
}

.welfare-modal-wrap {
  width: 100%;
  max-width: 480px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  animation: welfareFadeIn 0.25s ease-out; /* 动画名加前缀，避免冲突 */
  backdrop-filter: blur(8px);
}
/* 动画名加welfare前缀，与yct弹窗动画区分 */
@keyframes welfareFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 福利弹窗头部 */
.welfare-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.welfare-modal-title {
  margin: 0;
  color: #1d2129;
  font-size: 18px;
  font-weight: 600;
}
.welfare-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  font-size: 20px;
  color: #86909c;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  outline: none; /* 修复聚焦边框bug */
}
.welfare-modal-close:hover,
.welfare-modal-close:focus {
  background-color: rgba(0, 0, 0, 0.1);
  color: #1d2129;
}

/* 福利弹窗内容区 */
.welfare-modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}
.welfare-modal-desc {
  margin: 0 0 16px 0;
  color: #1d2129;
  font-weight: 500;
  font-size: 16px;
}
.welfare-modal-list {
  margin: 0 0 20px 0;
  padding-left: 20px;
}
.welfare-modal-list li {
  margin-bottom: 8px;
  color: #4e5969;
  font-size: 14px;
  line-height: 1.6;
}

/* 福利弹窗按钮 */
.welfare-modal-btn {
  width: 100%;
  padding: 12px 0;
  background-color: #1677ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  outline: none; /* 修复聚焦边框bug */
  box-shadow: 0 2px 4px rgba(22, 119, 255, 0.1);
}
.welfare-modal-btn:hover,
.welfare-modal-btn:focus {
  background-color: #0052d9;
  box-shadow: 0 3px 8px rgba(22, 119, 255, 0.2);
}

/* 福利弹窗图片 */
.welfare-modal-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(0, 0, 0, 0.02); /* 修复图片加载失败占位 */
}

/* 福利模块夜间模式适配 */
body.io-black-mode .welfare-header,
body.io-black-mode .welfare-btn-list {
  background-color: rgba(29, 33, 41, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(rgba(29, 33, 41, 0.8), rgba(29, 33, 41, 0.8)), transparent; /* 毛玻璃降级 */
}
body.io-black-mode .welfare-title,
body.io-black-mode .welfare-modal-title,
body.io-black-mode .welfare-modal-desc {
  color: #e5e6eb;
}
body.io-black-mode .welfare-btn {
  background-color: rgba(29, 33, 41, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}
body.io-black-mode .welfare-btn:hover,
body.io-black-mode .welfare-btn:focus {
  background-color: rgba(56, 61, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
}
body.io-black-mode .welfare-btn-text,
body.io-black-mode .welfare-modal-list li {
  color: #c9cdD4;
}
body.io-black-mode .welfare-modal-wrap {
  background-color: rgba(29, 33, 41, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
}
body.io-black-mode .welfare-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.io-black-mode .welfare-modal-close {
  background: rgba(255, 255, 255, 0.05);
  color: #86909c;
}
body.io-black-mode .welfare-modal-close:hover,
body.io-black-mode .welfare-modal-close:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.io-black-mode .welfare-modal-img {
  border-color: rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.02);
}

/* 福利弹窗滚动条优化 */
.welfare-modal-body::-webkit-scrollbar {
  width: 6px;
}
.welfare-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.welfare-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
body.io-black-mode .welfare-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}


/*排行榜样式*/
/* 热榜容器样式 */
.container {
  width: 100%;
  max-width: 1200px; /* 扩大最大宽度，适配电脑端 */
  height: 450px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: #fff;
  transition: background 0.3s ease;
}

/* 模式适配 */
.container.dark {
  background: #1a1a1a!important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3)!important;
}
.container.grey {
  background: #f5f5f5!important;
}

/* 滚动区域 */
.horizontal-scroll { 
  display: flex; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.4s ease; 
}

/* 平台面板 */
.platform-panel {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}

/* 面板标题 */
.panel-header {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}
.container.dark.panel-header {
  color: #f0f0f0!important;
  border-color: #333!important;
}

/* 热榜项 */
.hot-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  transition: border-color 0.3s ease;
}
.container.dark.hot-item { border-color: #333!important; }
.container.grey.hot-item { border-color: #e0e0e0!important; }

.hot-item a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.container.dark.hot-item a {
  color: #f0f0f0!important;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
  transition: color 0.3s ease;
}
.container.dark.loading {
  color: #aaa!important;
}

/* 指示器 */
.indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.indicator-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.indicator-dot.active { 
  background: #4285f4; 
  width: 10px; 
  height: 10px; 
}
.container.dark.indicator-dot { 
  background: rgba(255,255,255,0.2); 
}

/* 提示文字 */
.switch-tip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}
.container:hover.switch-tip,.container.touch-active.switch-tip { 
  opacity: 1; 
}
.container.dark.switch-tip { 
  background: rgba(255,255,255,0.2); 
}