/* =====================================================
   导航设置
   ===================================================== */
/* 默认状态透明 */
.toolbar-content.myBetween {
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

/* 悬停变蓝色 */
.toolbar-content.myBetween:hover {
  background-color: #FFD7E0 !important; /* 蓝色 */
}

/* 导航栏内的菜单字体颜色 */
body div.toolbar-content.myBetween .my-menu span,
body div.toolbar-content.myBetween .scroll-menu li span {
    color: #3498db !important;  /* 蓝色字体 */
}

/* 标题 WeCrypto 字体黑色 */
body div.toolbar-content.myBetween .toolbar-title h2 {
    color: #000000 !important;  /* 黑色 */
}
/* 将 网站中间WeCrypto的每个字母改为黑色 */
h1.playful span {
    color: #000000 !important; /* 黑色 */
}

/* =====================================================
   WeCrypto 顶部导航文本换图片
   ===================================================== */

/* 1️⃣ li 作为 flex 容器（关键） */
.toolbar-content .scroll-menu > li {
    height: 60px;                 /* 明确告诉浏览器高度 */
    display: flex !important;
    align-items: center !important;   /* ✅ 垂直居中 */
    justify-content: center;
}

/* 2️⃣ my-menu 继承居中 */
.toolbar-content .scroll-menu > li .my-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    height: 100%;
}

/* 3️⃣ span 最终显示图片 */
.toolbar-content .scroll-menu > li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px;                 /* 图片视觉高度 */
    min-width: 60px;
    padding: 0 6px;

    /* 隐藏文字 */
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    transition: all 0.25s ease;
}
/* 1.Home（第一个下拉里的 li） */
.toolbar-content .scroll-menu > .el-dropdown:first-of-type li span {
    width: 90px;
    height: 60px;

    background-image: url("/static/assets/Sara11772395164048413.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% auto;

    color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2️⃣ TradingView */
.toolbar-content .scroll-menu > li:nth-child(2) span {
    width: 150px;
    background-image: url("/api/image/2");
}

/* 3️⃣ AiCoin */
/* AiCoin（第 3 个导航）- 强化显示版 */
.toolbar-content .scroll-menu > li:nth-child(3) span {
    width: 140px;          
    height: 60px;
    background-image: url("/api/image/3");
    background-size: 110px auto;   /* 🔥 核心：直接放大 Logo */
}

/* 4️⃣ Binance */
.toolbar-content .scroll-menu > li:nth-child(4) span {
    width: 110px;
    background-image: url("/api/image/4");
}

/* 5️⃣ 随笔 */
.toolbar-content .scroll-menu > li:nth-child(5) span {
     width: 60px;
    

    background-image: url("/static/assets/Sara11772431587922551.PNG");
    background-size: 105% auto;
}

/* 6️⃣ 内容导航栏（下拉） */
.toolbar-content .scroll-menu > .el-dropdown:nth-of-type(2) li span {
    width: 65px;                 /* 根据 logo 调整 */
    height: 60px;

    background-image: url("/static/assets/Sara11772432751703606.PNG");  
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% auto;

    color: transparent !important;   /* 隐藏文字 */
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.25s ease;
}

/* 7️⃣ 百宝箱导航栏（下拉） */
.toolbar-content .scroll-menu > .el-dropdown:nth-of-type(3) li span {
    width: 60px;                 /* 根据 logo 调整 */
    height: 60px;

    background-image: url("/static/assets/Sara11772432874448145.PNG");  /* 百宝箱导航 logo */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% auto;

    color: transparent !important;   /* 隐藏文字 */
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.25s ease;
}


/* 8️⃣ 留言 */
.toolbar-content .scroll-menu > li:nth-child(8) span {
    width: 60px;
    background-image: url("/static/assets/Sara11772435425742586.PNG");
}

/* 9️⃣ 联系我 */
.toolbar-content .scroll-menu > li:nth-child(9) span {
    width: 80px;
    background-image: url("/static/assets/Sara11772435660431272.PNG");
}
/* 10 后台 */
.toolbar-content .scroll-menu > li:nth-child(10) span {
    width: 70px;   
    background-image: url("/static/assets/Sara11772436257994353.PNG");
    background-size: 60px auto;
}

/* =====================================================
   五、Hover 效果（高级但克制）
   ===================================================== */

/* 方案：轻微放大 + 淡蓝背景 */
.toolbar-content .scroll-menu > li span:hover {
    transform: scale(1.08);
    background-color: rgba(52, 152, 219, 0.08);
    border-radius: 6px;
}

/* Hover 显示文字（图片 → 文字切换） */
.toolbar-content .scroll-menu > li span:hover {
    background-image: none !important;
    text-indent: 0 !important;
    color: #3498db !important;
    font-weight: 500;
}

/* =====================================================
   六、当前页面高亮（选中态）
   ===================================================== */

.toolbar-content .scroll-menu > li.active span,
.toolbar-content .scroll-menu > li.is-active span,
.toolbar-content .scroll-menu > li.router-link-active span {
    background-color: rgba(52, 152, 219, 0.15);
    border-radius: 6px;
    transform: scale(1.1);
}

/* =====================================================
   七、移动端适配
   ===================================================== */

@media screen and (max-width: 768px) {
    .toolbar-content .scroll-menu > li span {
        height: 24px;
        min-width: 48px;
        padding: 0 4px;
    }
}
/* =====================================================
   固定导航栏
   =====================================================
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}
 * {
    box-sizing: border-box !important;
} */


/* =====================================================
   网页渐变
   ===================================================== */
.page-container-wrap {
  /* 设置线性渐变，方向从左上角到右下角，颜色从极淡粉到薄蓝逐渐过渡 */
  background: linear-gradient(to bottom right, 
    rgba(255, 240, 245, 0.95) 0%,  /* 极淡粉色 */
    rgba(245, 230, 250, 0.90) 25%, /* 淡紫色 */
    rgba(230, 245, 255, 0.88) 50%, /* 浅蓝色 */
    rgba(220, 255, 240, 0.85) 75%, /* 淡绿青色 */
    rgba(200, 240, 255, 0.82) 100% /* 薄蓝色 */
  ) !important;
  
  /* 背景大小设置为200% 200%，确保渐变有足够的面积来显示动画 */
  background-size: 200% 200% !important;
  
  /* 设置渐变动画，让背景颜色流动 */
  animation: gradient-animation 5s ease infinite !important;
}

/* 定义渐变动画的关键帧 */
@keyframes gradient-animation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}