/* 作者头像样式库 - 100种不同风格
1-10: 渐变背景头像 - 不同颜色的渐变效果 
11-20: 图案背景头像 - 点状、线条、方格等图案 
21-30: 字母头像 - 基于中文姓氏的字母显示 
31-40: 职业标识头像 - 中文职业标识，更适合中文场景 
41-50: 特殊边框样式 - 双线、虚线、发光等边框效果 
51-60: 形状变化 - 圆形、方形、菱形、六边形等 
61-70: 光影效果 - 不同强度的阴影和发光效果 
71-80: 纹理效果 - 噪点、大理石、木纹等纹理 
81-90: 动画效果 - 脉冲、弹跳、旋转等动画 
91-100: 组合样式 - 多种效果的组合
*/

/* 基础头像样式 */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background-size: cover;
    background-position: center;
    border: 2px solid;
}

/* 1-10: 渐变背景头像 */
.avatar-gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #93c5fd;
}

.avatar-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #c4b5fd;
}

.avatar-gradient-green {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #a7f3d0;
}

.avatar-gradient-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #fca5a5;
}

.avatar-gradient-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #fdba74;
}

.avatar-gradient-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: #f9a8d4;
}

.avatar-gradient-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-color: #67e8f9;
}

.avatar-gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-color: #5eead4;
}

.avatar-gradient-yellow {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border-color: #fde047;
}

.avatar-gradient-indigo {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #c7d2fe;
}

/* 11-20: 几何图案头像 */
.avatar-geometric-hexagon {
    background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #10b981, #ef4444, #f59e0b, #3b82f6);
    border-color: #93c5fd;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.avatar-geometric-diamond {
    background: radial-gradient(circle at center, #8b5cf6 0%, #7c3aed 50%, #5b21b6 100%);
    border-color: #c4b5fd;
    transform: rotate(45deg);
    border-radius: 0;
}

.avatar-geometric-stripe {
    background: repeating-linear-gradient(45deg, #10b981, #10b981 10px, #059669 10px, #059669 20px);
    border-color: #a7f3d0;
}

.avatar-geometric-checker {
    background: 
        linear-gradient(45deg, #ef4444 25%, transparent 25%), 
        linear-gradient(-45deg, #ef4444 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ef4444 75%),
        linear-gradient(-45deg, transparent 75%, #ef4444 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-color: #fca5a5;
}

.avatar-geometric-wave {
    background: 
        radial-gradient(circle at 20% 35%, #f59e0b 25%, transparent 25%),
        radial-gradient(circle at 80% 65%, #d97706 25%, transparent 25%),
        radial-gradient(circle at 40% 45%, #f59e0b 15%, transparent 15%),
        radial-gradient(circle at 60% 55%, #d97706 15%, transparent 15%);
    background-color: #fef3c7;
    border-color: #fdba74;
}

.avatar-geometric-concentric {
    background: 
        radial-gradient(circle at center, #ec4899 0%, #db2777 30%, #be185d 60%, transparent 70%);
    border-color: #f9a8d4;
}

.avatar-geometric-polygon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
    border-color: #67e8f9;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

.avatar-geometric-spiral {
    background: 
        conic-gradient(from 0deg, #14b8a6, #0d9488, #0f766e, #14b8a6);
    border-color: #5eead4;
}

.avatar-geometric-mosaic {
    background: 
        linear-gradient(90deg, #eab308 33%, #ca8a04 33%, #ca8a04 66%, #eab308 66%),
        linear-gradient(0deg, #eab308 33%, #ca8a04 33%, #ca8a04 66%, #eab308 66%);
    background-size: 20px 20px;
    border-color: #fde047;
}

.avatar-geometric-radial {
    background: radial-gradient(ellipse at center, #6366f1 0%, #4f46e5 30%, #4338ca 60%, #3730a3 100%);
    border-color: #c7d2fe;
}

/* 21-30: 字母头像（基于中文姓氏） */
.avatar-letter-zhang {
    background: #3b82f6;
    border-color: #93c5fd;
    content: "张";
}

.avatar-letter-li {
    background: #8b5cf6;
    border-color: #c4b5fd;
    content: "李";
}

.avatar-letter-wang {
    background: #10b981;
    border-color: #a7f3d0;
    content: "王";
}

.avatar-letter-chen {
    background: #ef4444;
    border-color: #fca5a5;
    content: "陈";
}

.avatar-letter-liu {
    background: #f59e0b;
    border-color: #fdba74;
    content: "刘";
}

.avatar-letter-yang {
    background: #ec4899;
    border-color: #f9a8d4;
    content: "杨";
}

.avatar-letter-zhao {
    background: #06b6d4;
    border-color: #67e8f9;
    content: "赵";
}

.avatar-letter-huang {
    background: #14b8a6;
    border-color: #5eead4;
    content: "黄";
}

.avatar-letter-zhou {
    background: #eab308;
    border-color: #fde047;
    content: "周";
}

.avatar-letter-wu {
    background: #6366f1;
    border-color: #c7d2fe;
    content: "吴";
}

/* 31-40: 职业标识头像 */
.avatar-profession-design {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #93c5fd;
    position: relative;
}

.avatar-profession-design::before {
    content: "设";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-develop {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #c4b5fd;
    position: relative;
}

.avatar-profession-develop::before {
    content: "开";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-photo {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #a7f3d0;
    position: relative;
}

.avatar-profession-photo::before {
    content: "摄";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-art {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #fca5a5;
    position: relative;
}

.avatar-profession-art::before {
    content: "艺";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-education {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #fdba74;
    position: relative;
}

.avatar-profession-education::before {
    content: "教";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-tech {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: #f9a8d4;
    position: relative;
}

.avatar-profession-tech::before {
    content: "技";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-management {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-color: #67e8f9;
    position: relative;
}

.avatar-profession-management::before {
    content: "管";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-creative {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-color: #5eead4;
    position: relative;
}

.avatar-profession-creative::before {
    content: "创";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-business {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border-color: #fde047;
    position: relative;
}

.avatar-profession-business::before {
    content: "商";
    font-weight: bold;
    font-size: 16px;
}

.avatar-profession-research {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #c7d2fe;
    position: relative;
}

.avatar-profession-research::before {
    content: "研";
    font-weight: bold;
    font-size: 16px;
}

/* 41-50: 特殊边框样式 */
.avatar-border-double {
    background: #3b82f6;
    border: 4px double #93c5fd;
}

.avatar-border-dashed {
    background: #8b5cf6;
    border: 2px dashed #c4b5fd;
}

.avatar-border-dotted {
    background: #10b981;
    border: 3px dotted #a7f3d0;
}

.avatar-border-glow {
    background: #ef4444;
    border: 2px solid #fca5a5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.avatar-border-thick {
    background: #f59e0b;
    border: 4px solid #fdba74;
}

.avatar-border-thin {
    background: #ec4899;
    border: 1px solid #f9a8d4;
}

.avatar-border-gradient {
    background: #06b6d4;
    border: 2px solid;
    border-image: linear-gradient(45deg, #06b6d4, #0891b2) 1;
}

.avatar-border-shadow {
    background: #14b8a6;
    border: 2px solid #5eead4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.avatar-border-none {
    background: #eab308;
    border: none;
}

.avatar-border-transparent {
    background: #6366f1;
    border: 2px solid transparent;
}

/* 51-60: 形状变化 */
.avatar-shape-rounded {
    border-radius: 12px;
    background: #3b82f6;
    border-color: #93c5fd;
}

.avatar-shape-square {
    border-radius: 8px;
    background: #8b5cf6;
    border-color: #c4b5fd;
}

.avatar-shape-oval {
    border-radius: 40% 60% 60% 40%;
    background: #10b981;
    border-color: #a7f3d0;
}

.avatar-shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
    background: #ef4444;
    border-color: #fca5a5;
}

.avatar-shape-hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #f59e0b;
    border-color: #fdba74;
}

.avatar-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: #ec4899;
    border-color: #f9a8d4;
}

.avatar-shape-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #06b6d4;
    border-color: #67e8f9;
}

.avatar-shape-pentagon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background: #14b8a6;
    border-color: #5eead4;
}

.avatar-shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: #eab308;
    border-color: #fde047;
}

.avatar-shape-cloud {
    border-radius: 50% 50% 30% 30%;
    background: #6366f1;
    border-color: #c7d2fe;
}

/* 61-70: 光影效果 */
.avatar-shadow-light {
    background: #3b82f6;
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-shadow-medium {
    background: #8b5cf6;
    border-color: #c4b5fd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.avatar-shadow-heavy {
    background: #10b981;
    border-color: #a7f3d0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.avatar-shadow-inner {
    background: #ef4444;
    border-color: #fca5a5;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-shadow-glow {
    background: #f59e0b;
    border-color: #fdba74;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.avatar-shadow-neon {
    background: #ec4899;
    border-color: #f9a8d4;
    box-shadow: 0 0 15px #ec4899, 0 0 30px #ec4899;
}

.avatar-shadow-3d {
    background: #06b6d4;
    border-color: #67e8f9;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.avatar-shadow-texture {
    background: #14b8a6;
    border-color: #5eead4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-shadow-minimal {
    background: #eab308;
    border-color: #fde047;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.avatar-shadow-none {
    background: #6366f1;
    border-color: #c7d2fe;
    box-shadow: none;
}

/* 71-80: 纹理效果 */
.avatar-texture-noise {
    background: #3b82f6;
    border-color: #93c5fd;
    position: relative;
    overflow: hidden;
}

.avatar-texture-noise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" result="noise"/><feColorMatrix in="noise" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.3"/></svg>');
}

.avatar-texture-grain {
    background: #8b5cf6;
    border-color: #c4b5fd;
}

.avatar-texture-marble {
    background: linear-gradient(45deg, #10b981 25%, transparent 25%),
                linear-gradient(-45deg, #059669 25%, transparent 25%);
    background-size: 20px 20px;
    border-color: #a7f3d0;
}

.avatar-texture-wood {
    background: linear-gradient(90deg, #ef4444 50%, #dc2626 50%);
    border-color: #fca5a5;
}

.avatar-texture-metal {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #fdba74;
}

.avatar-texture-fabric {
    background: #ec4899;
    border-color: #f9a8d4;
}

.avatar-texture-glass {
    background: rgba(6, 182, 212, 0.8);
    border-color: #67e8f9;
    backdrop-filter: blur(5px);
}

.avatar-texture-paper {
    background: #14b8a6;
    border-color: #5eead4;
}

.avatar-texture-stone {
    background: #eab308;
    border-color: #fde047;
}

.avatar-texture-water {
    background: #6366f1;
    border-color: #c7d2fe;
}

/* 81-90: 动画效果 */
.avatar-animate-pulse {
    background: #3b82f6;
    border-color: #93c5fd;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.avatar-animate-bounce {
    background: #8b5cf6;
    border-color: #c4b5fd;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.avatar-animate-spin {
    background: #10b981;
    border-color: #a7f3d0;
    animation: spin 3s linear infinite;
}

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

.avatar-animate-fade {
    background: #ef4444;
    border-color: #fca5a5;
    animation: fade 3s infinite;
}

@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.avatar-animate-slide {
    background: #f59e0b;
    border-color: #fdba74;
    animation: slide 2s infinite;
}

@keyframes slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.avatar-animate-glow {
    background: #ec4899;
    border-color: #f9a8d4;
    animation: glow 2s infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px #ec4899; }
    50% { box-shadow: 0 0 20px #ec4899; }
}

.avatar-animate-rotate {
    background: #06b6d4;
    border-color: #67e8f9;
    animation: rotate 3s linear infinite;
}

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

.avatar-animate-scale {
    background: #14b8a6;
    border-color: #5eead4;
    animation: scale 2s infinite;
}

@keyframes scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.avatar-animate-shake {
    background: #eab308;
    border-color: #fde047;
    animation: shake 2s infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.avatar-animate-float {
    background: #6366f1;
    border-color: #c7d2fe;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* 91-100: 组合样式 */
.avatar-combo-1 {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: 3px double #93c5fd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.avatar-combo-2 {
    background: radial-gradient(circle at 30% 30%, #10b981 20%, transparent 20%),
                radial-gradient(circle at 70% 70%, #059669 20%, transparent 20%);
    background-color: #eff6ff;
    border: 2px dashed #a7f3d0;
    border-radius: 12px;
}

.avatar-combo-3 {
    background: #ef4444;
    border: 4px solid #fca5a5;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: pulse 2s infinite;
}

.avatar-combo-4 {
    background: linear-gradient(45deg, #f59e0b 25%, transparent 25%),
                linear-gradient(-45deg, #d97706 25%, transparent 25%);
    background-size: 15px 15px;
    border: 2px solid #fdba74;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.avatar-combo-5 {
    background: #ec4899;
    border: 2px solid #f9a8d4;
    border-radius: 40% 60% 60% 40%;
    animation: bounce 2s infinite;
}

.avatar-combo-6 {
    background: rgba(6, 182, 212, 0.9);
    border: 3px dotted #67e8f9;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.avatar-combo-7 {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border: 2px solid #5eead4;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: glow 2s infinite;
}

.avatar-combo-8 {
    background: #eab308;
    border: 1px solid #fde047;
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: rotate 3s linear infinite;
}

.avatar-combo-9 {
    background: #6366f1;
    border: 2px solid #c7d2fe;
    border-radius: 0;
    transform: rotate(45deg);
    animation: scale 2s infinite;
}

.avatar-combo-10 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 4px double #93c5fd;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    animation: float 3s ease-in-out infinite;
}