/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(74, 108, 247, 0.15);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-3px);
}


.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title {
    font-size: 22px;
    color: #333;
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.section-title i {
    color: #3b82f6;
    margin-right: 8px;
}

.section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.section-action {
    padding: 5px 10px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
}

.section-action:hover {
    color: #2563eb;
    background-color: #f0f7ff;
}

.section-action.active {
    color: #3b82f6;
    font-weight: 500;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* 面包屑导航样式 */
.breadcrumb-container {
    padding: 10px 0;
    margin-bottom: 20px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    max-width: 200px;
    overflow: hidden;
}

.breadcrumb-item a, 
.breadcrumb-item span {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-item:not(:first-child)::before {
    content: "/";
    padding: 0 10px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.breadcrumb-item:last-child {
    color: var(--primary);
    font-weight: 500;
}

.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.breadcrumb::-webkit-scrollbar {
    display: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 12px;
    }
    
    .section-header {
        margin-bottom: 15px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .section-action {
        padding: 4px 8px;
        font-size: 13px;
    }
    
    .breadcrumb-item:not(:first-child)::before {
        padding: 0 6px;
    }
}

/* 徽章容器 - 修复后的样式 */
.user-badges, .user-badges, .comment-user-badges {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* ← 添加：水平居中 */
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px 0;            /* ← 添加：上下间距 */
}

/* 统一所有徽章的基础样式 - 关键修复 */
.user-gender-badge, 
.user-level-badge, 
.user-vip-badge, 
.user-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* 居中对齐 */
    height: 20px; /* 统一高度 */
    padding: 0 6px; /* 统一内边距 */
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1; /* 确保文字垂直居中 */
    box-sizing: border-box; /* 包含边框和内边距 */
    margin: 0; /* 移除外边距，用gap统一控制 */
}

/* 统一称号基础样式 */
.user-title-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.user-title-badge img {
    flex-shrink: 0;
    height: 20px;
}

/* 图标样式统一 */
.user-vip-badge i,
.user-admin-badge i,
.user-gender-badge i {
    margin-right: 3px;
    font-size: 11px; /* 统一图标大小 */
    line-height: 1;
}

/* 性别徽章样式 */
.male-badge {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.female-badge {
    background: linear-gradient(135deg, #ff6b9c 0%, #ff3377 100%);
    color: white;
}

.unknown-badge {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

/* VIP徽章样式 - 简约优雅版 */
.user-vip-badge {
    color: #fff;
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    letter-spacing: 1px;
}

/* 简约扫光效果 */
.user-vip-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: vipSweep 3s infinite;
}

@keyframes vipSweep {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}

/* 悬停效果 */
.user-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
    transition: all 0.2s ease;
}

/* VIP 未激活状态 - 灰色样式 */
.user-vip-badge.vip-inactive {
    background: #e4e7ed;
    color: #909399;
    box-shadow: none;
    letter-spacing: 1px;
}

/* 移除未激活状态的扫光效果 */
.user-vip-badge.vip-inactive::before {
    display: none;
}

/* 未激活状态的悬停效果 */
.user-vip-badge.vip-inactive:hover {
    background: #d3d4d6;
    transform: none;
    box-shadow: none;
}
/* 管理员徽章样式 */
.user-admin-badge {
    background-color: #d9534f;
    color: white;
}

/* 用户等级样式 */
.user-level-badge {
    color: #fff;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.user-level-badge::first-letter {
    font-size: 1.15em; /* L 稍微大一点 */
}

/* 等级颜色 */
.user-level-badge.lv1 { background-color: #689f38; }
.user-level-badge.lv2 { background-color: #0288d1; }
.user-level-badge.lv3 { background-color: #8e24aa; }
.user-level-badge.lv4 { background-color: #6a1b9a; }
.user-level-badge.lv5 { background-color: #d32f2f; }
.user-level-badge.lv6 { background-color: #c2185b; }
.user-level-badge.lv7 { background-color: #7b1fa2; }
.user-level-badge.lv8 { background-color: #512da8; }
.user-level-badge.lv9 { background-color: #303f9f; }

/* 10-15级：渐变效果 */
.user-level-badge.lv10 { 
    background: linear-gradient(135deg, #1976d2, #42a5f5);
}
.user-level-badge.lv11 { 
    background: linear-gradient(135deg, #0097a7, #26c6da);
}
.user-level-badge.lv12 { 
    background: linear-gradient(135deg, #00796b, #26a69a);
}
.user-level-badge.lv13 { 
    background: linear-gradient(135deg, #388e3c, #66bb6a);
}
.user-level-badge.lv14 { 
    background: linear-gradient(135deg, #7cb342, #9ccc65);
}
.user-level-badge.lv15 { 
    background: linear-gradient(135deg, #afb42b, #d4e157);
}

/* 16-20级：渐变 + 扫光效果 */
.user-level-badge.lv16 { 
    background: linear-gradient(135deg, #fbc02d, #ffeb3b);
    position: relative;
    overflow: hidden;
}
.user-level-badge.lv17 { 
    background: linear-gradient(135deg, #8e24aa, #ab47bc);
    position: relative;
    overflow: hidden;
}
.user-level-badge.lv18 { 
    background: linear-gradient(135deg, #5e35b1, #7e57c2);
    position: relative;
    overflow: hidden;
}
.user-level-badge.lv19 { 
    background: linear-gradient(135deg, #bf360c, #d84315);
    position: relative;
    overflow: hidden;
}
.user-level-badge.lv20 { 
    background: linear-gradient(135deg, #000000, #424242);
    position: relative;
    overflow: hidden;
}

/* 扫光动画效果 */
.user-level-badge.lv16::before,
.user-level-badge.lv17::before,
.user-level-badge.lv18::before,
.user-level-badge.lv19::before,
.user-level-badge.lv20::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: sweep 2s infinite;
}

/* 20级：改为彩虹扫光，更加炫酷 */
.user-level-badge.lv20::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 0, 150, 0.6),
        rgba(0, 255, 255, 0.6),
        rgba(255, 255, 0, 0.6),
        rgba(255, 0, 150, 0.6),
        transparent
    );
    animation: sweep 1.5s infinite;
}

@keyframes sweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* pagination分页样式 */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    font-size: 14px;
}

.pagination li {
    margin: 3px;
    display: inline-block;
}

.pagination a, 
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--border-radius);
    background: white;
    color: var(--dark);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

/* 上一页下一页按钮适应中文长度 */
.pagination li:first-child a,
.pagination li:first-child span,
.pagination li:last-child a,
.pagination li:last-child span {
    width: 64px;
    padding: 0 5px;
    font-size: 13px;
}

.pagination a:hover {
    background: #f5f8ff;
    border-color: #c8d8ff;
}

.pagination .active span {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 5px rgba(70, 163, 255, 0.15);
}

.pagination .disabled span {
    color: #b1b1b1;
    background: #f9f9f9;
    cursor: not-allowed;
}

/* 在小屏幕设备上进一步优化 */
@media (max-width: 576px) {
    .pagination a, 
    .pagination span {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .pagination li:first-child a,
    .pagination li:first-child span,
    .pagination li:last-child a,
    .pagination li:last-child span {
        width: 56px;
        font-size: 12px;
    }
}