/* 首页自定义样式 */
/* 设置container样式，使用flex布局 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 两端对齐 */
}

/* 调整main样式，使用flex布局 */
.main {
    width: calc(100% - 290px);
    position: relative;
    order: 1;
    /* 确保main在前面 */
}

/* 移除分隔线 */
.main::after {
    display: none;
    /* 完全移除分隔线 */
}

/* 调整side样式，使其右对齐 */
.side {
    width: 290px;
    padding-top: 8px;
    margin-left: 0;
    padding-right: 0;
    order: 2;
    /* 确保side在后面 */
}

/* 确保广告模块尺寸正确 */
/* 重置container样式，使广告模块单独处理 */
.container:has(.ad-wrapper) {
    display: block !important;
    /* 覆盖flex布局 */
    width: 100% !important;
    max-width: 1200px !important;
}

.container .card .ad-wrapper {
    width: 100% !important;
}

.container .card .ggcontainer {
    max-width: 1265px !important;
    /* 保持原始宽度 */
    width: 100% !important;
    margin: 0 auto !important;
    height: 229px !important;
    /* 保持原始高度 */
}

.container .card .ggcontainer iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 快审站点模块样式 */
.quick-sites .card-body {
    padding: 10px !important;
}

.quick-sites-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.quick-site-item {
    display: flex !important;
    flex-direction: row !important;
    /* 改为横向排列 */
    align-items: center !important;
    justify-content: flex-start !important;
    /* 左对齐 */
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    /* 调整内边距 */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    width: auto !important;
    /* 宽度自动 */
    min-width: 80px !important;
    /* 最小宽度 */
    max-width: calc(20% - 8px) !important;
    /* 最大宽度，每行最多5个 */
    flex-grow: 1 !important;
    /* 允许元素增长 */
}

.quick-site-item:hover {
    background-color: #f0f8ff !important;
    border-color: #c0d9f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.quick-site-item .icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    /* 添加右侧边距 */
    margin-bottom: 0 !important;
    /* 移除底部边距 */
    flex-shrink: 0 !important;
    /* 防止图标缩小 */
}

.quick-site-item .icon img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
    object-fit: contain !important;
}

.quick-site-item .name,
.quick-site-item .link-name {
    font-size: 13px !important;
    color: #555 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    /* 改为左对齐 */
    max-width: calc(100% - 26px) !important;
    /* 考虑图标宽度和边距 */
    display: inline-block !important;
    /* 确保文本可以应用宽度限制 */
    max-width: 5em !important;
    /* 限制最多显示5个汉字的宽度 */
}

.quick-site-item:hover .name {
    color: #4a90e2 !important;
}

/* 响应式调整 */
@media (max-width: 991px) {
    .quick-site-item {
        width: calc(25% - 8px) !important;
        /* 每行4个 */
    }
}

@media (max-width: 768px) {
    .quick-site-item {
        width: calc(33.33% - 8px) !important;
        /* 每行3个 */
    }
}

@media (max-width: 480px) {
    .quick-site-item {
        width: calc(50% - 8px) !important;
        /* 每行2个 */
    }
}

/* 待审网站模块样式 */
.empty-notice {
    text-align: center;
    color: #999;
    padding: 15px 0;
    font-style: italic;
}

/* 友情链接和待审网站模块整体样式 */
.card.links {
    width: 100% !important;
    /* 宽度 - 设置为100%占满容器 */
    margin: 8px auto !important;
    /* 外边距 - 上下8px，左右自动居中 */
    order: 3;
    /* 排序 - 确保友情链接在最底部 */
    flex: 0 0 100%;
    /* 弹性布局 - 占据整行 */
    border: 1px solid #d4edda !important;
    /* 边框 - 浅橙色边框 */
    border-radius: 8px !important;
    /* 边框圆角 - 圆角边框 */
    overflow: hidden !important;
    /* 溢出处理 - 确保内容不溢出 */
}

/* 待审网站模块特殊样式 */
.apply-links {
    margin-bottom: 15px !important;
    /* 与友情链接模块之间的间距 */
}

/* 友情链接模块标题样式 */
.card.links .card-head {
    font-size: 15px !important;
    /* 字体大小 - 设置为15像素 */
    font-weight: 700 !important;
    /* 字体粗细 - 加粗显示 */
    padding: 12px 15px !important;
    /* 内边距 - 上下12px，左右15px */
    border-bottom: 1px solid #f2f2f2 !important;
    /* 底部边框 - 浅灰色分隔线 */
    background: #ffffff !important;
    /* 背景 - 渐变背景 */
    position: relative !important;
    /* 相对定位 - 用于定位more链接 */
}

/* 标题右侧的"更多"链接样式 */
.card.links .card-head .more {
    position: absolute !important;
    /* 绝对定位 - 相对于card-head */
    right: 15px !important;
    /* 右侧距离 - 与右边框保持15px距离 */
    top: 50% !important;
    /* 垂直居中 - 从顶部50%开始 */
    transform: translateY(-50%) !important;
    /* 垂直居中 - 向上移动自身高度的50% */
    font-size: 13px !important;
    /* 字体大小 - 稍小于标题 */
    font-weight: normal !important;
    /* 字体粗细 - 正常粗细 */
    color: #666 !important;
    /* 文字颜色 - 灰色 */
    transition: all 0.3s ease !important;
    /* 过渡效果 - 平滑过渡 */
}

.card.links .card-head .more:hover {
    color: #5cb85c !important;
    /* 鼠标悬停颜色 - 与边框颜色一致 */
}

/* 友情链接模块内容区域样式 */
.card.links .card-body {
    padding: 10px !important;
    /* 内边距 - 四周10px */
    text-align: left !important;
    /* 文本对齐 - 左对齐 */
}

/* 友情链接项目样式 */
.card.links a {
    margin: 3px !important;
    /* 链接项目外边距 - 控制链接项目之间的间距为3px */
    display: inline-flex !important;
    /* 显示方式 - 使用flex布局便于对齐图标和文字 */
    align-items: center !important;
    /* 垂直对齐 - 使图标和文字在垂直方向上居中对齐 */
    color: #666 !important;
    /* 文字颜色 - 设置为灰色 */
    padding: 3px 8px !important;
    /* 内边距 - 控制链接项目内部的空间 */
    transition: all 0.3s ease !important;
    /* 过渡效果 - 使hover状态变化平滑 */
    position: relative !important;
    /* 定位方式 - 相对定位，便于添加伪元素 */
    text-decoration: none !important;
    /* 文本装饰 - 移除下划线 */
    background-color: #f8f9fa !important;
    /* 背景颜色 - 浅灰色背景 */
    border: 1px solid #e9ecef !important;
    /* 边框样式 - 浅色边框 */
    border-radius: 4px !important;
    /* 边框圆角 - 长方形倒圆角效果 */
}

/* 友情链接图标样式 */
.card.links a .link-icon {
    width: 18px !important;
    /* 图标宽度 - 可以在这里调整图标大小 */
    height: 18px !important;
    /* 图标高度 - 可以在这里调整图标大小 */
    margin-right: 5px !important;
    /* 图标右侧间距 - 控制图标与文字之间的距离 */
    border-radius: 2px !important;
    /* 图标圆角 - 使图标有轻微的圆角效果 */
    object-fit: contain !important;
    /* 图片填充方式 - 确保图标完整显示不变形 */
    vertical-align: middle !important;
    /* 垂直对齐方式 - 使图标与文字垂直居中对齐 */
}

/* 友情链接网站名称样式 */
.card.links a .link-name {
    font-size: 13px !important;
    /* 字体大小 - 设置为13像素 */
    white-space: nowrap !important;
    /* 文本换行 - 禁止文本换行 */
    overflow: hidden !important;
    /* 溢出处理 - 隐藏溢出部分 */
    text-overflow: ellipsis !important;
    /* 文本溢出 - 使用省略号表示溢出部分 */
    max-width: 5em !important;
    /* 限制最多显示5个汉字的宽度 */
    display: inline-block !important;
    /* 确保文本可以应用宽度限制 */
}

/* 待审核网站友链状态样式 */
.card.links a .link-status {
    font-size: 11px !important;
    /* 字体大小 - 设置为11像素 */
    padding: 1px 4px !important;
    /* 内边距 - 控制状态标签内部的空间 */
    border-radius: 3px !important;
    /* 边框圆角 - 圆角效果 */
    margin-left: 5px !important;
    /* 左侧间距 - 与网站名称保持一定距离 */
    background-color: #f0f0f0 !important;
    /* 背景颜色 - 浅灰色背景 */
    color: #666 !important;
    /* 文字颜色 - 灰色 */
    display: inline-block !important;
    /* 显示方式 - 行内块元素 */
}

/* 有友链状态样式 */
.card.links a .link-status.has-link,
.status-badge.has-link {
    background-color: #e6f7e6 !important;
    /* 背景颜色 - 浅绿色背景 */
    color: #28a745 !important;
    /* 文字颜色 - 绿色 */
}

/* 无友链状态样式 */
.card.links a .link-status.no-link,
.status-badge.no-link {
    background-color: #e8f5e8 !important;
    /* 背景颜色 - 浅绿色背景 */
    color: #5cb85c !important;
    /* 文字颜色 - 绿色 */
}

/* 友情链接鼠标悬停效果 */
.card.links a:hover {
    color: #4a90e2 !important;
    /* 文字颜色 - 鼠标悬停时变为蓝色 */
    background-color: #f0f0f0 !important;
    /* 背景颜色 - 鼠标悬停时变为浅灰色 */
    border-color: #ddd !important;
    /* 边框颜色 - 鼠标悬停时变为灰色 */
}

/* 最新收录模块样式优化 */
.side-latest {
    padding: 5px 0 !important;
}

.side-latest .latest-item {
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    text-decoration: none !important;
}

.side-latest .latest-item:hover {
    background-color: #f0f8ff !important;
    /* 淡蓝色背景 */
    border-color: #c0d9f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 排号样式 */
.side-latest .rank {
    flex: none !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    text-align: center !important;
    line-height: 22px !important;
    border-radius: 50% !important;
    background: rgba(124, 124, 124, 0.3) !important;
    color: #fff !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* 前三名特殊样式 */
.side-latest .latest-item:nth-child(1) .rank {
    background: #f1404b !important;
}

.side-latest .latest-item:nth-child(2) .rank {
    background: #c56831 !important;
}

.side-latest .latest-item:nth-child(3) .rank {
    background: #b89e2c !important;
}

.side-latest .site-info {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.side-latest .icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    line-height: 20px !important;
}

.side-latest .icon img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px !important;
    object-fit: contain !important;
    border: 1px solid #eaeaea !important;
}

.side-latest .name {
    font-size: 13px !important;
    color: #555 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.side-latest .date {
    font-size: 12px !important;
    color: #5cb85c !important;
    /* 橘黄色，与总浏览TOP10模块数字颜色一致 */
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    font-style: italic !important;
}

.side-latest .latest-item:hover .name {
    color: #4a90e2 !important;
}

/* 置顶站点模块样式 */
.card-body>.top-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 5px 0 !important;
    justify-content: flex-start !important;
    /* 确保项目从左侧开始排列 */
}

/* 置顶站点项目样式 */
.card-body>.top-grid .item {
    display: flex !important;
    flex-direction: column !important;
    /* 垂直排列 */
    align-items: center !important;
    /* 居中对齐 */
    justify-content: center !important;
    padding: 8px !important;
    margin: 5px !important;
    width: calc(16.666% - 10px) !important;
    /* 每行6个 */
    min-width: 0 !important;
    /* 移除最小宽度限制，允许项目缩小 */
    text-decoration: none !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    /* 添加相对定位，用于放置VIP角标 */
    overflow: visible !important;
    /* 确保角标不会被裁剪 */
    box-sizing: border-box !important;
    /* 确保边框和内边距包含在宽度内 */
}

/* VIP角标样式 */
@keyframes badge-breathe {
    0% {
        background: linear-gradient(135deg, #ff6b6b, #ee5253);
    }

    50% {
        background: linear-gradient(135deg, #ff8787, #ee5253);
    }

    100% {
        background: linear-gradient(135deg, #ff6b6b, #ee5253);
    }
}

.vip-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    left: auto !important;
    background: linear-gradient(135deg, #ff6b6b, #ee5253) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 0 6px 0 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    animation: badge-breathe 3s infinite ease-in-out !important;
    transform-origin: center !important;
    text-shadow: none !important;
}

.vip-badge:hover {
    transform: scale(1.1) !important;
}

.top-grid .item {
    position: relative !important;
    overflow: hidden !important;
}

.top-grid .item:hover .vip-badge {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

.top-grid .item:hover {
    background-color: #f0f8ff !important;
    border-color: #c0d9f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.top-grid .item .icon {
    width: 32px !important;
    /* 更大的图标 */
    height: 32px !important;
    margin-bottom: 5px !important;
    /* 图标与文字之间的间距 */
}

.top-grid .item .icon img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
    object-fit: contain !important;
}

.top-grid .item .name {
    font-size: 13px !important;
    color: #555 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.top-grid .item:hover .name {
    color: #4a90e2 !important;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .card-body>.top-grid .item {
        width: calc(20% - 10px) !important;
        /* 每行5个 */
        min-width: 110px !important;
    }
}

@media (max-width: 991px) {
    .card-body>.top-grid .item {
        width: calc(25% - 10px) !important;
        /* 每行4个 */
        min-width: 100px !important;
    }
}

@media (max-width: 768px) {
    .card-body>.top-grid .item {
        width: calc(33.33% - 10px) !important;
        /* 每行3个 */
        min-width: 90px !important;
    }
}

@media (max-width: 480px) {
    .card-body>.top-grid .item {
        width: calc(50% - 10px) !important;
        /* 每行2个 */
        min-width: 80px !important;
    }
}

/* 呼吸灯动画定义 */
@keyframes breathe {
    0% {
        color: #f1404b;
    }

    /* 红色 */
    25% {
        color: #5cb85c;
    }

    /* 橙色 */
    50% {
        color: #4a90e2;
    }

    /* 蓝色 */
    75% {
        color: #32cd32;
    }

    /* 绿色 */
    100% {
        color: #f1404b;
    }

    /* 回到红色 */
}

/* 最新点入模块样式 - 第一个点入的网址文字颜色为呼吸灯效果 */
.card .card-body a:first-child .name {
    font-weight: 600 !important;
    /* 加粗显示 */
    animation: breathe 4s infinite ease-in-out !important;
    /* 应用呼吸灯动画 */
}

/* 分类网址模块样式 - 第一个网址文字颜色为呼吸灯效果 */
.card .card-body .item:first-child .name {
    font-weight: 600 !important;
    /* 加粗显示 */
    animation: breathe 4s infinite ease-in-out !important;
    /* 应用呼吸灯动画 */
}

/* 限制置顶站点模块只显示3行 */
.card.top-sites .card-body {
    max-height: calc(3 * (10px + 10px + 20px + 8px));
    /* 3行 * (上下内边距 + 图标高度 + 文字高度) */
    overflow: hidden !important;
}

/* 响应式调整 */
@media (max-width: 991px) {

    .main,
    .side {
        width: 100%;
        float: none;
        margin-left: 0;
        padding: 0;
    }

    .main::after {
        display: none;
    }

    /* 置顶站点在平板上每行显示4个 */
    .card-body>.top-grid .item {
        width: calc(25% - 10px) !important;
    }
}

@media (max-width: 768px) {
    .side-latest .name {
        font-size: 12px !important;
    }

    .side-latest .date {
        font-size: 11px !important;
    }

    .side-latest .rank {
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        margin-right: 6px !important;
    }

    .side-latest .icon {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    .side-latest .icon img {
        width: 18px !important;
        height: 18px !important;
    }

    /* 置顶站点在手机上每行显示3个 */
    .card-body>.top-grid .item {
        width: calc(33.333% - 10px) !important;
        padding: 6px !important;
    }

    .card-body>.top-grid .item .name {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {

    /* 置顶站点在小屏手机上每行显示2个 */
    .card-body>.top-grid .item {
        width: calc(50% - 10px) !important;
        margin: 4px !important;
    }
}


/* 排行榜选项卡样式 - 现代化美化版 */
.ranking-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: linear-gradient(to right, #ffffff, #f8f9fa) !important;
}

.left-title {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #444 !important;
}

.left-title i {
    margin-right: 6px !important;
    color: #5cb85c !important;
}

/* 胶囊式选项卡容器 */
.right-tabs {
    display: inline-flex !important;
    background-color: #e9ecef !important;
    border-radius: 20px !important;
    padding: 2px !important;
    gap: 3px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 选项卡按钮 - 胶囊式设计 */
.rank-tab {
    cursor: pointer !important;
    font-size: 12px !important;
    color: #666 !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border: none !important;
    white-space: nowrap !important;
}

.rank-tab:hover {
    color: #333 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 激活状态 - 渐变胶囊效果 */
.rank-tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--theme-color, #5cb85c) 0%, var(--theme-color, #4cae4c) 100%) !important;
    box-shadow: 0 2px 8px rgba(var(--theme-color-rgb, 92, 184, 92), 0.3) !important;
    font-weight: 600 !important;
}

.rank-tab.active::after {
    display: none !important;
}


/* 适配侧边栏的 view-list 样式 */
.rank-list.view-list {
    margin-top: 5px !important;
    padding: 0 5px !important;
}

.rank-list.view-list a {
    padding: 8px 6px !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.rank-list.view-list a .rank {
    flex: none !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    margin-right: 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(124, 124, 124, 0.3) !important;
    color: #fff !important;
}

/* 确保前三名显示皇冠图片 */
.rank-list.view-list a:nth-child(1) .rank {
    font-size: 0 !important;
    background: url("assets/images/rank_1.png") no-repeat 50% 50%/85% !important;
}

.rank-list.view-list a:nth-child(2) .rank {
    font-size: 0 !important;
    background: url("assets/images/rank_2.png") no-repeat 50% 50%/85% !important;
}

.rank-list.view-list a:nth-child(3) .rank {
    font-size: 0 !important;
    background: url("assets/images/rank_3.png") no-repeat 50% 50%/85% !important;
}

.rank-list.view-list a .icon {
    flex: none !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
}

.rank-list.view-list a .icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.rank-list.view-list a .name {
    flex: auto !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rank-list.view-list a .view {
    flex: none !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: #5cb85c !important;
    margin-left: 5px !important;
}

.view-all-rank {
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
    padding: 10px !important;
    background-color: #f9f9f9 !important;
    color: #777 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
    border: 1px solid #eee !important;
}

.view-all-rank:hover {
    background-color: #f1404b !important;
    color: #fff !important;
    border-color: #f1404b !important;
}

/* 侧边栏个人/站点信息卡片 - 深度重设计 */
#branding-info-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 25px !important;
    background: #fff !important;
    font-family: "Microsoft Yahei", sans-serif !important;
    height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
}

#branding-info-card .info-header {
    background: linear-gradient(135deg, #81d4fa 0%, #ce93d8 100%) !important;
    /* 浅蓝+浅紫时尚渐变 */
    padding: 15px 15px 10px !important;
    position: relative !important;
    color: #fff !important;
    overflow: hidden !important;
    height: 120px !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* 对角线背景装饰 - 针对浅色背景优化 */
#branding-info-card .header-pattern {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 10px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.8 !important;
}

#branding-info-card .info-profile {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 5px !important;
    position: relative !important;
    z-index: 2 !important;
}

#branding-info-card .info-avatar {
    width: 50px !important;
    height: 50px !important;
    background: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    padding: 5px !important;
    flex-shrink: 0 !important;
}

#branding-info-card .info-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#branding-info-card .info-text {
    flex: 1 !important;
}

#branding-info-card .info-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.2 !important;
}

#branding-info-card .info-subtitle {
    font-size: 11px !important;
    opacity: 0.85 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

/* 社交工具栏 - 增强可见度 */
#branding-info-card .info-social {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    display: flex !important;
    justify-content: space-around !important;
    padding: 6px 10px !important;
    position: relative !important;
    z-index: 5 !important;
}

#branding-info-card .info-social a {
    color: #fff !important;
    font-size: 17px !important;
    display: inline-block !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#branding-info-card .info-social a:hover {
    transform: scale(1.2) !important;
}

/* 统计区域 - 高度压缩至 130px */
#branding-info-card .info-stats {
    padding: 10px 15px !important;
    height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#branding-info-card .stats-top {
    margin-bottom: 6px !important;
}

#branding-info-card .stats-box {
    border-radius: 6px !important;
    padding: 6px 5px !important;
    text-align: center !important;
}

#branding-info-card .stats-box .num {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
}

#branding-info-card .stats-box .label {
    font-size: 11px !important;
}

/* 统计盒子颜色主题 */
#branding-info-card .box-red {
    border: 1px solid #ff425d !important;
    background-color: #fff5f6 !important;
}

#branding-info-card .box-red .num,
#branding-info-card .box-red .label {
    color: #ff425d !important;
}

#branding-info-card .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

#branding-info-card .box-blue {
    border: 1px solid #1c8dff !important;
    background-color: #f0f7ff !important;
}

#branding-info-card .box-blue .num,
#branding-info-card .box-blue .label {
    color: #1c8dff !important;
}

#branding-info-card .box-green {
    border: 1px solid #36b300 !important;
    background-color: #f4fff0 !important;
}

#branding-info-card .box-green .num,
#branding-info-card .box-green .label {
    color: #36b300 !important;
}

#branding-info-card .box-red-light {
    border: 1px solid #ff7a00 !important;
    background-color: #fffaf0 !important;
}

#branding-info-card .box-red-light .num,
#branding-info-card .box-red-light .label {
    color: #ff7a00 !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    #branding-info-card {
        margin: 10px 10px !important;
    }
}

/* 修复排行皇冠显示 - 使用相对路径确保加载 */
.rank-list.view-list a:nth-child(1) .rank {
    font-size: 0 !important;
    background: url("../images/rank_1.png") no-repeat 50% 50%/85% !important;
}

.rank-list.view-list a:nth-child(2) .rank {
    font-size: 0 !important;
    background: url("../images/rank_2.png") no-repeat 50% 50%/85% !important;
}

.rank-list.view-list a:nth-child(3) .rank {
    font-size: 0 !important;
    background: url("../images/rank_3.png") no-repeat 50% 50%/85% !important;
}

/* ============================================
   最新点入/点出/收录模块样式 - 胶囊式选项卡
   ============================================ */

/* 容器样式 - 全幅宽 */
.latest-activity-container {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 10px !important;
}

/* 模块卡片样式 */
.latest-activity-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    border-left: 3px solid #ff7f00 !important;
}

/* 选项卡头部样式 */
.latest-activity-card .tab-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: linear-gradient(to right, #ffffff, #f8f9fa) !important;
    border-bottom: 1px solid #e9ecef !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
}

.latest-activity-card .left-section {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #444 !important;
    flex-shrink: 0 !important;
}

.latest-activity-card .left-section i {
    color: #ff7f00 !important;
    margin-right: 5px !important;
}

/* 胶囊式选项卡容器 - 真正的Segmented Control风格 */
.capsule-tabs {
    display: inline-flex !important;
    background-color: #e0e0e0 !important;
    /* 稍深的浅灰色底框 */
    border-radius: 25px !important;
    /* 更圆润的胶囊型 */
    padding: 2px !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    /* 内阴影增强立体感 */
    border: 1px solid #dcdcdc !important;
    /* 增加边框确保可见 */
}

/* 胶囊式选项卡按钮 */
.capsule-tab {
    display: inline-block !important;
    /* 强制显示属性 */
    padding: 4px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    border-radius: 20px !important;
    /* 圆角 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    user-select: none !important;
    /* 非激活态样式 */
    background-color: transparent !important;
    color: #666 !important;
    /* 深灰色文字 */
    font-weight: 500 !important;
    border: none !important;
    margin: 0 !important;
    /* 清除可能的外边距 */
    line-height: normal !important;
}

/* 胶囊选项卡悬停效果 */
.capsule-tab:hover:not(.active) {
    color: #333 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 胶囊选项卡激活态样式 - 真正的胶囊效果 */
.capsule-tab.active {
    background: linear-gradient(135deg, var(--theme-color, #5cb85c) 0%, var(--theme-color, #4cae4c) 100%) !important;
    box-shadow: 0 2px 8px rgba(var(--theme-color-rgb, 92, 184, 92), 0.3) !important;
    /* 鲜艳的红色背景 */
    color: #ffffff !important;
    /* 白色文字 */
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(241, 64, 75, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.02) !important;
    /* 轻微放大效果 */
}

/* 提示文字样式 */
/* 提示文字样式 */
.tab-hint {
    flex: 1 !important;
    text-align: center !important;
    font-size: 18px !important;
    /* 增大字体 */
    font-weight: 700 !important;
    /* 加粗 */
    line-height: 1.4 !important;
    margin: 0 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* 时尚彩色渐变字 */
    background: linear-gradient(90deg, #ff0000, #ff7f00, #d800ff, #0000ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbow 5s linear infinite !important;
    /* 添加流动动画 */
}

/* 彩虹文字动画 */
@keyframes rainbow {
    to {
        background-position: 200% center;
    }
}

.latest-activity-card .more {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    /* 强制清除浮动 */
    margin-top: 0 !important;
    /* 清除可能的上边距 */
    height: auto !important;
}

/* 选项卡内容区域 */
.latest-activity-card .card-body {
    padding: 10px !important;
    /* 调整内边距以适应无边框设计 */
    min-height: 150px !important;
}

.latest-activity-card .tab-content {
    display: none;
    /* 默认隐藏，不要加!important以便JS控制，或者配合active类 */
    flex-wrap: wrap !important;
    gap: 0 !important;
    /* 清除gap，使用百分比宽度控制 */
    margin: 0 -5px !important;
    /* 抵消item的padding/margin */
    width: 100% !important;
    /* 确保占满容器 */
}

.latest-activity-card .tab-content.active {
    display: flex !important;
    /* 激活时显示为flex */
}

/* 内容项样式 - 参考目录导航 */
.latest-activity-card .item {
    display: flex !important;
    /* 保持flex布局以便内部对齐 */
    flex-direction: row !important;
    /* 确保图标和文字横向排列 */
    align-items: center !important;
    width: 14.2857143% !important;
    /* 每行7个 */
    padding: 10px 5px !important;
    /* 调整内边距 */
    background-color: transparent !important;
    /* 无背景 */
    border: none !important;
    /* 无边框 */
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    flex: 0 0 auto !important;
    /* 固定宽度 */
    min-width: 0 !important;
    box-shadow: none !important;
    /* 去除阴影 */
    margin: 0 !important;
    /* 清除外边距 */
}

.latest-activity-card .item:hover {
    background-color: #eee !important;
    /* 悬停背景 */
    transform: scale(1.05) !important;
    /* 悬停放大 */
    box-shadow: none !important;
    z-index: 1 !important;
}

.latest-activity-card .item .icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

.latest-activity-card .item .icon img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 3px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

.latest-activity-card .item .name {
    font-size: 14px !important;
    /* 调整字体大小 */
    color: #666 !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.latest-activity-card .item:hover .name {
    color: #333 !important;
    /* 悬停文字颜色加深 */
    font-weight: 600 !important;
}

/* 最新点出的访问次数样式 */
.latest-activity-card .item .hits {
    font-size: 12px !important;
    color: #ff7f00 !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
}

/* 最新收录的时间样式 */
.latest-activity-card .item .time {
    font-size: 12px !important;
    color: #5cb85c !important;
    font-weight: 500 !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    font-style: italic !important;
}

/* 响应式设计 - 参考style.css */
@media (max-width: 1300px) {
    .latest-activity-card .item {
        width: 16.6666667% !important;
        /* 每行6个 */
    }
}

@media (max-width: 991px) {
    .latest-activity-container {
        padding: 0 10px !important;
    }

    .latest-activity-card .tab-header {
        flex-wrap: wrap !important;
    }

    .capsule-tabs {
        order: 1 !important;
        width: auto !important;
        margin-bottom: 10px !important;
    }

    .tab-hint {
        order: 2 !important;
        width: 100% !important;
        margin: 5px 0 !important;
        font-size: 12px !important;
    }

    .latest-activity-card .more {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 5px !important;
    }

    .latest-activity-card .item {
        width: 25% !important;
        /* 每行4个 */
    }
}

@media (max-width: 768px) {
    .latest-activity-card .card-body {
        padding: 5px !important;
    }

    .latest-activity-card .item {
        padding: 6px 5px !important;
        width: 33.3333333% !important;
        /* 每行3个 */
    }

    .latest-activity-card .item .name {
        font-size: 13px !important;
    }

    .capsule-tab {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    .tab-hint {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .latest-activity-card .item {
        width: 33.3333333% !important;
        /* 每行3个 */
    }

    /* 手机模式下标题区域改为多行布局 */
    .latest-activity-card .tab-header {
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px 15px !important;
        gap: 8px !important;
    }

    .capsule-tabs {
        order: 1 !important;
        margin-bottom: 0 !important;
    }

    .tab-hint {
        order: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 12px !important;
        white-space: normal !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .latest-activity-card .more {
        order: 3 !important;
        width: auto !important;
        margin-top: 0 !important;
    }
}

/* 侧边栏排行榜模块样式 */
.ranking-card .card-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
}

.rank-tabs {
    display: flex !important;
    gap: 15px !important;
}

.rank-tab {
    cursor: pointer !important;
    font-weight: bold !important;
    color: #666 !important;
    font-size: 15px !important;
    position: relative !important;
    padding-bottom: 5px !important;
}

.rank-tab.active {
    color: #333 !important;
}

.rank-tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ff7f00 !important;
    border-radius: 2px !important;
}

.reset-hint {
    font-size: 12px !important;
    color: #999 !important;
}

.rank-list {
    padding: 5px 0 !important;
}

.rank-item {
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-bottom: 1px dashed #eee !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
}

.rank-item:last-child {
    border-bottom: none !important;
}

.rank-item:hover {
    background-color: #f9f9f9 !important;
}

/* 排名图标/数字样式 */
.rank-icon,
.rank-num {
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* 前三名皇冠图标 - 使用FontAwesome */
.rank-icon::before {
    font-family: FontAwesome !important;
    font-size: 18px !important;
}

.rank-1::before {
    content: "\f091" !important;
    /* fa-trophy */
    color: #ff8c00 !important;
    /* Gold/Orange */
}

.rank-2::before {
    content: "\f091" !important;
    color: #7b68ee !important;
    /* MediumSlateBlue */
}

.rank-3::before {
    content: "\f091" !important;
    color: #cd7f32 !important;
    /* Bronze */
}

/* 4-10名数字样式 */
.rank-num {
    background-color: #eee !important;
    color: #666 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.rank-item:nth-child(1) .rank-num {
    background-color: #ff8c00 !important;
    color: white !important;
}

.rank-item:nth-child(2) .rank-num {
    background-color: #7b68ee !important;
    color: white !important;
}

.rank-item:nth-child(3) .rank-num {
    background-color: #cd7f32 !important;
    color: white !important;
}

.rank-item .name {
    flex: 1 !important;
    font-size: 14px !important;
    color: #333 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rank-item .hits {
    font-size: 14px !important;
    color: #ff7f00 !important;
    font-style: italic !important;
    margin-left: 10px !important;
    font-family: Georgia, serif !important;
}

/* ===== 首页分类文章推荐模块 ===== */
.article-category-card {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.article-category-card .card-head {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    background: linear-gradient(135deg, #81d4fa 0%, #ce93d8 100%) !important;
    color: #fff !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-bottom: none !important;
}

.article-category-card .card-head i {
    margin-right: 8px !important;
    font-size: 18px !important;
    color: #fff !important;
}

.article-category-card .card-head .cate-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.article-category-card .card-head .more {
    margin-left: auto !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s !important;
    position: static !important;
}

.article-category-card .card-head .more:hover {
    color: #fff !important;
}

.article-grid-body {
    padding: 15px !important;
    background: #f8f9fa;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.article-grid-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-decoration: none;
}

.article-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.article-grid-img {
    position: relative;
    width: 100%;
    padding-top: 60%;
    /* 宽高比 */
    overflow: hidden;
    background: #eee;
}

.article-grid-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-grid-item:hover .article-grid-img img {
    transform: scale(1.05);
}

.article-grid-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-grid-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 39px;
}

.article-grid-item:hover .article-grid-title {
    color: #667eea;
}

.article-grid-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: auto;
}

.article-grid-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-grid-meta i {
    font-size: 11px;
}

/* 响应式 - 平板 */
@media (max-width: 992px) {
    .article-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 响应式 - 手机 */
@media (max-width: 768px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .article-grid-body {
        padding: 10px !important;
    }

    .article-grid-info {
        padding: 10px;
    }

    .article-grid-title {
        font-size: 13px;
        min-height: 36px;
    }
}

/* 响应式 - 小手机 */
@media (max-width: 480px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .article-grid-title {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    .article-grid-meta {
        font-size: 11px;
    }
}