/* custom-tailwind-utilities.css */
/* Tailwind CSS 自定义工具类样式文件 */

/* 基础工具类 */
.content-auto {
    content-visibility: auto;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-gradient-douyin {
    background: linear-gradient(135deg, #FE2C55 0%, #25F4EE 100%);
}

.link-preview-card {
    transition: all 0.3s ease;
}

.link-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.user-card {
    transition: all 0.3s ease;
}

.user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 徽章基础样式 */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-primary {
    background-color: rgba(var(--tw-primary), 0.1);
    color: rgb(var(--tw-primary));
}

.badge-secondary {
    background-color: rgba(var(--tw-secondary), 0.1);
    color: rgb(var(--tw-secondary));
}

/* 荣誉徽章系列样式 (1-100) */
.honor-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.3s;
}

.honor-badge-1 {
    background-color: #f3f4f6;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

.honor-badge-2 {
    background-color: #e5e7eb;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.honor-badge-3 {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.honor-badge-4 {
    background-color: #fde68a;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.honor-badge-5 {
    background: linear-gradient(to right, #facc15, #f97316);
    color: #ffffff;
    border: 1px solid #fbbf24;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.honor-badge-6 {
    background: linear-gradient(to right, #a855f7, #ec4899);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.honor-badge-7 {
    background: linear-gradient(to right, #3b82f6, #22d3ee);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.honor-badge-8 {
    background: linear-gradient(to right, #10b981, #14b8a6);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.honor-badge-9 {
    background: linear-gradient(to right, #ef4444, #ec4899);
    color: #ffffff;
    border: 1px solid #ef4444;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.honor-badge-10 {
    background: linear-gradient(to right, #fde047, #f59e0b);
    color: #ffffff;
    border: 1px solid #fbbf24;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-11 {
    background: linear-gradient(to right, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-12 {
    background: linear-gradient(to right, #22c55e, #10b981);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-13 {
    background: linear-gradient(to right, #a855f7, #8b5cf6);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-14 {
    background: linear-gradient(to right, #f59e0b, #f97316);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-15 {
    background: linear-gradient(to right, #14b8a6, #22d3ee);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-16 {
    background: linear-gradient(to right, #ec4899, #ef4444);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-17 {
    background: linear-gradient(to right, #facc15, #ef4444);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-18 {
    background: linear-gradient(to right, #3b82f6, #a855f7);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-19 {
    background: linear-gradient(to right, #10b981, #a855f7);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.honor-badge-20 {
    background: linear-gradient(to right, #f59e0b, #14b8a6);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-21 {
    background: linear-gradient(to right, #a855f7, #6366f1);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-22 {
    background: linear-gradient(to right, #14b8a6, #10b981);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-23 {
    background: linear-gradient(to right, #f97316, #ef4444);
    color: #ffffff;
    border: 1px solid #f97316;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-24 {
    background: linear-gradient(to right, #3b82f6, #ec4899);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-25 {
    background: linear-gradient(to right, #6366f1, #f43f5e);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-26 {
    background: linear-gradient(to right, #facc15, #22d3ee);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-27 {
    background: linear-gradient(to right, #ec4899, #14b8a6);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-28 {
    background: linear-gradient(to right, #10b981, #f97316);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-29 {
    background: linear-gradient(to right, #8b5cf6, #3b82f6);
    color: #ffffff;
    border: 1px solid #8b5cf6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.honor-badge-30 {
    background: linear-gradient(to right, #f59e0b, #f43f5e);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-31 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #a855f7);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-32 {
    background: linear-gradient(to right, #22c55e, #14b8a6, #10b981);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-33 {
    background: linear-gradient(to right, #a855f7, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-34 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-35 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-36 {
    background: linear-gradient(to right, #ec4899, #ef4444, #f43f5e);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-37 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-38 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-39 {
    background: linear-gradient(to right, #10b981, #22c55e, #14b8a6);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.honor-badge-40 {
    background: linear-gradient(to right, #f59e0b, #facc15, #84cc16);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.honor-badge-41 {
    background: linear-gradient(to right, #a855f7, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
}

.honor-badge-42 {
    background: linear-gradient(to right, #14b8a6, #10b981, #22c55e);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

.honor-badge-43 {
    background: linear-gradient(to right, #f97316, #ef4444, #f43f5e);
    color: #ffffff;
    border: 1px solid #f97316;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

.honor-badge-44 {
    background: linear-gradient(to right, #3b82f6, #22d3ee, #14b8a6);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.honor-badge-45 {
    background: linear-gradient(to right, #6366f1, #a855f7, #8b5cf6);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.honor-badge-46 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3);
}

.honor-badge-47 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #ef4444);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
}

.honor-badge-48 {
    background: linear-gradient(to right, #10b981, #14b8a6, #22d3ee);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.honor-badge-49 {
    background: linear-gradient(to right, #8b5cf6, #a855f7, #6366f1);
    color: #ffffff;
    border: 1px solid #8b5cf6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.honor-badge-50 {
    background: linear-gradient(to right, #f59e0b, #facc15, #84cc16, #10b981);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}

.honor-badge-51 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #a855f7, #ec4899);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.honor-badge-52 {
    background: linear-gradient(to right, #22c55e, #10b981, #14b8a6, #22d3ee);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
}

.honor-badge-53 {
    background: linear-gradient(to right, #a855f7, #8b5cf6, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5);
}

.honor-badge-54 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444, #f43f5e);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}

.honor-badge-55 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6, #6366f1);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.5);
}

.honor-badge-56 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #ef4444, #f97316);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5);
}

.honor-badge-57 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316, #ef4444);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);
}

.honor-badge-58 {
    background: linear-gradient(to right, #3b82f6, #a855f7, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.honor-badge-59 {
    background: linear-gradient(to right, #10b981, #22c55e, #facc15, #f59e0b);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

.honor-badge-60 {
    background: linear-gradient(to right, #6366f1, #3b82f6, #22d3ee, #14b8a6, #10b981);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-61 {
    background: linear-gradient(to right, #a855f7, #8b5cf6, #f43f5e, #ec4899);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-62 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-63 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6, #6366f1);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-64 {
    background: linear-gradient(to right, #10b981, #22c55e, #facc15, #f59e0b, #f97316);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-65 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #a855f7, #8b5cf6, #6366f1);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-66 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6, #a855f7, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-67 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-68 {
    background: linear-gradient(to right, #22c55e, #10b981, #14b8a6, #22d3ee, #3b82f6, #6366f1);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-69 {
    background: linear-gradient(to right, #f43f5e, #ec4899, #a855f7, #6366f1, #3b82f6, #22d3ee);
    color: #ffffff;
    border: 1px solid #f43f5e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.5);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-70 {
    background: linear-gradient(to right, #6366f1, #3b82f6, #22d3ee, #14b8a6, #10b981, #22c55e);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-71 {
    background: linear-gradient(to right, #a855f7, #8b5cf6, #f43f5e, #ec4899, #ef4444);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-72 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899, #a855f7);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-73 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6, #6366f1, #a855f7, #f43f5e);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-74 {
    background: linear-gradient(to right, #10b981, #22c55e, #facc15, #f59e0b, #f97316, #ef4444);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-75 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #a855f7, #8b5cf6, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.6);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-76 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6, #a855f7, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.7);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-77 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.7);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-78 {
    background: linear-gradient(to right, #22c55e, #10b981, #14b8a6, #22d3ee, #3b82f6, #6366f1);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.7);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-79 {
    background: linear-gradient(to right, #f43f5e, #ec4899, #a855f7, #6366f1, #3b82f6, #22d3ee);
    color: #ffffff;
    border: 1px solid #f43f5e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.7);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.honor-badge-80 {
    background: linear-gradient(to right, #6366f1, #3b82f6, #22d3ee, #14b8a6, #10b981, #22c55e);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-81 {
    background: linear-gradient(to right, #a855f7, #8b5cf6, #f43f5e, #ec4899, #ef4444, #f97316);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-82 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899, #a855f7);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-83 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6, #6366f1, #a855f7, #8b5cf6);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-84 {
    background: linear-gradient(to right, #10b981, #22c55e, #facc15, #f59e0b, #f97316, #ef4444);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-85 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #a855f7, #8b5cf6, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-86 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6, #a855f7, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-87 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-88 {
    background: linear-gradient(to right, #22c55e, #10b981, #14b8a6, #22d3ee, #3b82f6, #6366f1);
    color: #ffffff;
    border: 1px solid #22c55e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-89 {
    background: linear-gradient(to right, #f43f5e, #ec4899, #a855f7, #6366f1, #3b82f6, #22d3ee);
    color: #ffffff;
    border: 1px solid #f43f5e;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-90 {
    background: linear-gradient(to right, #6366f1, #3b82f6, #22d3ee, #14b8a6, #10b981, #22c55e, #facc15);
    color: #ffffff;
    border: 1px solid #6366f1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-91 {
    background: linear-gradient(to right, #a855f7, #8b5cf6, #f43f5e, #ec4899, #ef4444, #f97316, #f59e0b);
    color: #ffffff;
    border: 1px solid #a855f7;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-92 {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899, #a855f7, #6366f1);
    color: #ffffff;
    border: 1px solid #f59e0b;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-93 {
    background: linear-gradient(to right, #14b8a6, #22d3ee, #3b82f6, #6366f1, #a855f7, #8b5cf6, #f43f5e);
    color: #ffffff;
    border: 1px solid #14b8a6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-94 {
    background: linear-gradient(to right, #10b981, #22c55e, #facc15, #f59e0b, #f97316, #ef4444, #ec4899);
    color: #ffffff;
    border: 1px solid #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-95 {
    background: linear-gradient(to right, #ec4899, #f43f5e, #a855f7, #8b5cf6, #6366f1, #3b82f6);
    color: #ffffff;
    border: 1px solid #ec4899;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

.honor-badge-96 {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6, #a855f7, #ec4899, #f43f5e, #ef4444);
    color: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

/* 补全之前未完成的 .honor-badge-97 样式 */
.honor-badge-97 {
    background: linear-gradient(to right, #facc15, #f59e0b, #f97316, #ef4444, #f43f5e, #ec4899, #a855f7);
    color: #ffffff;
    border: 1px solid #facc15;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

/* .honor-badge-98 转换后的纯 CSS */
.honor-badge-98 {
    background: linear-gradient(to right, #22c55e, #14b8a6, #14b8a6, #67e8f9, #3b82f6, #6366f1, #8b5cf6);
    color: #ffffff;
    border: 1px solid #86efac;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

/* .honor-badge-99 转换后的纯 CSS */
.honor-badge-99 {
    background: linear-gradient(to right, #f43f5e, #ec4899, #a855f7, #6366f1, #3b82f6, #67e8f9, #14b8a6);
    color: #ffffff;
    border: 1px solid #fda4af;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 2px rgba(253, 164, 175, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

/* .honor-badge-100 转换后的纯 CSS */
.honor-badge-100 {
    background: linear-gradient(to right, #6366f1, #3b82f6, #67e8f9, #14b8a6, #10b981, #22c55e, #facc15, #f59e0b, #ef4444, #ec4899, #f43f5e);
    color: #ffffff;
    border: 1px solid #a5b4fc;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.9);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite;
}

/* 按钮加载状态样式 */
.btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: spin 1s linear infinite;
}

/* 骨架屏样式 */
.skeleton {
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 通知提示框基础样式 */
.notification {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(5rem);
    transition-property: all;
    transition-duration: 300ms;
    opacity: 0;
    z-index: 50;
}

/* 成功通知样式 */
.notification-success {
    background-color: #22c55e;
    color: #ffffff;
}

/* 错误通知样式 */
.notification-error {
    background-color: #ef4444;
    color: #ffffff;
}

/* 信息通知样式 */
.notification-info {
    background-color: #3b82f6;
    color: #ffffff;
}

/* 24小时弹窗基础样式 */
.daily-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 300ms;
}

/* 弹窗显示状态 */
.daily-popup.show {
    opacity: 1;
    pointer-events: auto;
}

/* 弹窗内容容器 */
.daily-popup-content {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 28rem;
    padding: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    transform: scale(0.95);
    transition-property: transform;
    transition-duration: 300ms;
}

/* 深色模式下的弹窗内容背景 */
@media (prefers-color-scheme: dark) {
    .daily-popup-content {
        background-color: #1f2937;
    }
}

/* 弹窗显示时的内容缩放效果 */
.daily-popup.show .daily-popup-content {
    transform: scale(1);
}

/* 弹窗内容容器 - 适配md及以上屏幕的内边距 */
@media (min-width: 768px) {
    .daily-popup-content {
        padding: 2rem;
    }
}

/* shine 动画关键帧 */
@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* shine 动画应用类 */
.animate-shine {
  animation: shine 3s infinite linear;
}

/* 背景尺寸 200% */
.bg-size-200 {
  background-size: 200% auto;
}

/* 背景位置 0% center */
.bg-pos-0 {
  background-position: 0% center;
}

/* 补充必要的动画关键帧（确保所有动画生效） */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}