/* 首页自定义样式 */
/* 设置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% - 320px);
    position: relative;
    order: 1; /* 确保main在前面 */
}

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

/* 调整side样式，使其右对齐 */
.side {
    width: 300px;
    padding-top: 8px;
    margin-left: 20px;
    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 #ffcb9a !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: linear-gradient(to right, #ffead1, #fff8f0) !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: #ff7f00 !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: #fff3e0 !important;  /* 背景颜色 - 浅橙色背景 */
    color: #ff9800 !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: #ff7f00 !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, #ff9800, #ff5722); }
    50% { background: linear-gradient(135deg, #ffb74d, #ff7043); }
    100% { background: linear-gradient(135deg, #ff9800, #ff5722); }
}

.vip-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: linear-gradient(135deg, #ff9800, #ff5722) !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;
}

.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: #ff8c00; } /* 橙色 */
    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;
    }
}