/* 图标字体 */

/* 使用 Unicode 字符作为图标 */
[class^="icon-"], [class*=" icon-"] {
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 导航图标 */
.icon-home::before { content: "🏠"; }
.icon-upload::before { content: "📤"; }
.icon-trophy::before { content: "🏆"; }
.icon-moon::before { content: "🌙"; }
.icon-sun::before { content: "☀️"; }

/* 上传页面图标 */
.icon-cloud-upload::before { content: "☁️"; }
.icon-close::before { content: "✕"; }
.icon-edit::before { content: "✏️"; }
.icon-refresh::before { content: "🔄"; }
.icon-plus::before { content: "➕"; }
.icon-check-circle::before { content: "✅"; }
.icon-alert-circle::before { content: "⚠️"; }

/* 通用图标 */
.icon-eye::before { content: "👁️"; }
.icon-heart::before { content: "❤️"; }
.icon-share::before { content: "📤"; }
.icon-download::before { content: "📥"; }
.icon-search::before { content: "🔍"; }
.icon-filter::before { content: "🔽"; }
.icon-grid::before { content: "⊞"; }
.icon-list::before { content: "☰"; }
.icon-user::before { content: "👤"; }
.icon-settings::before { content: "⚙️"; }
.icon-logout::before { content: "🚪"; }
.icon-login::before { content: "🔑"; }
.icon-lock::before { content: "🔒"; }
.icon-unlock::before { content: "🔓"; }
.icon-star::before { content: "⭐"; }
.icon-star-empty::before { content: "☆"; }
.icon-calendar::before { content: "📅"; }
.icon-clock::before { content: "🕐"; }
.icon-location::before { content: "📍"; }
.icon-tag::before { content: "🏷️"; }
.icon-folder::before { content: "📁"; }
.icon-file::before { content: "📄"; }
.icon-image::before { content: "🖼️"; }
.icon-video::before { content: "🎥"; }
.icon-music::before { content: "🎵"; }
.icon-link::before { content: "🔗"; }
.icon-mail::before { content: "📧"; }
.icon-phone::before { content: "📞"; }
.icon-info::before { content: "ℹ️"; }
.icon-question::before { content: "❓"; }
.icon-exclamation::before { content: "❗"; }
.icon-check::before { content: "✓"; }
.icon-times::before { content: "✕"; }
.icon-arrow-up::before { content: "↑"; }
.icon-arrow-down::before { content: "↓"; }
.icon-arrow-left::before { content: "←"; }
.icon-arrow-right::before { content: "→"; }
.icon-chevron-up::before { content: "⌃"; }
.icon-chevron-down::before { content: "⌄"; }
.icon-chevron-left::before { content: "‹"; }
.icon-chevron-right::before { content: "›"; }

/* 管理后台图标 */
.icon-dashboard::before { content: "📊"; }
.icon-users::before { content: "👥"; }
.icon-photos::before { content: "🖼️"; }
.icon-reviews::before { content: "📝"; }
.icon-statistics::before { content: "📈"; }
.icon-approve::before { content: "✅"; }
.icon-reject::before { content: "❌"; }
.icon-pending::before { content: "⏳"; }

/* 图标大小变体 */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 0.875rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2x { font-size: 2rem; }
.icon-3x { font-size: 3rem; }

/* 图标颜色 */
.icon-primary { color: var(--primary-color); }
.icon-secondary { color: var(--secondary-color); }
.icon-success { color: var(--success-color); }
.icon-danger { color: var(--danger-color); }
.icon-warning { color: var(--warning-color); }
.icon-info { color: var(--info-color); }
.icon-muted { color: var(--text-muted); }

/* 图标动画 */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 图标按钮 */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transform: scale(1.1);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* 图标徽章 */
.icon-badge {
    position: relative;
}

.icon-badge::after {
    content: attr(data-badge);
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
    color: white;
    background: var(--danger-color);
    border-radius: 0.5rem;
}