:root {
            --primary: #facc15;
            --primary-hover: #eab308;
            --black: #000000;
            --dark: #111111;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }

        /* 加载旋转动画（备用，防止Font Awesome加载失败） */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .loading-spin {
            animation: spin 1s linear infinite;
        }
        
        /* 铃铛抖动动画 */
        @keyframes bellShake {
            0%, 100% { transform: rotate(0deg); }
            10%, 30%, 50%, 70%, 90% { transform: rotate(8deg); }
            20%, 40%, 60%, 80% { transform: rotate(-8deg); }
        }
        
        .bell-shake {
            animation: bellShake 1s ease-in-out infinite;
            transform-origin: top center;
            color: #eab308 !important;
        }
        
        /* 已收藏的产品卡片收藏按钮一直显示 */
        .favorite-btn.favorited {
            opacity: 1 !important;
            display: flex !important;
        }
        
        /* 产品卡片上的收藏按钮默认隐藏，悬停时显示 */
        .product-item .favorite-btn {
            opacity: 0;
        }
        
        .product-item:hover .favorite-btn {
            opacity: 1;
        }
        
        /* 已收藏的产品卡片收藏按钮始终显示 */
        .product-item .favorite-btn.favorited {
            opacity: 1 !important;
        }

        /* 骨架屏动画 */
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 0.5rem;
        }
        .skeleton-card {
            background: white;
            border-radius: 1rem;
            padding: 1rem;
            border: 1px solid #e5e7eb;
        }
        .skeleton-image {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 0.75rem;
            margin-bottom: 0.75rem;
        }
        .skeleton-text {
            height: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 0.25rem;
        }
        .skeleton-text-sm {
            height: 0.75rem;
            margin-bottom: 0.375rem;
            border-radius: 0.25rem;
        }
        .skeleton-price {
            height: 1.25rem;
            width: 4rem;
            border-radius: 0.25rem;
        }
        .skeleton-tag {
            height: 1.5rem;
            width: 3rem;
            border-radius: 0.5rem;
            display: inline-block;
        }

        body {
            background-color: var(--gray-50);
            color: var(--gray-900);
            /* 优先使用系统字体，Noto Sans SC 异步加载 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
        }
        
        .search-gradient {
            background: linear-gradient(90deg, var(--black) 0%, var(--gray-800) 100%);
            border-radius: 16px;
            color: #ffffff;
        }
        
        /* 侧边栏样式 */
        .sidebar-active {
            background: var(--black);
            color: var(--primary);
            font-weight: bold;
        }
        
        .nav-tag {
            background: var(--gray-100);
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 12px;
            color: var(--gray-500);
            cursor: pointer;
            transition: all 0.2s;
        }
        .nav-tag.active {
            color: var(--gray-900);
    border-color: #ffffff;
    background: #facc15;
        }
.nav-tag:hover {
    background: var(--fyzs-translate-theme-marker-backgroundColor);
    color: var(--gray-900);
}

        /* --- 大卡片核心动效 --- */
        .tool-card-main {
            position: relative;
            overflow: hidden;
            height: 144px;
            cursor: pointer;
            border-radius: 16px;
            border: 1px solid var(--gray-200);
            background: #ffffff;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 初始容器：包含图标、标题、副标题 */
        .card-header-init {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 10;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .init-icon-box {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 24px;
            margin-bottom: 24px;
        }

        /* 悬停时整体向上移动消失 */
        .tool-card-main:hover .card-header-init {
            transform: translateY(-40px);
            opacity: 0;
        }

        /* 悬停状态容器：箭头+标题 (从左往右滑入) */
        .card-header-hover {
            position: absolute;
            top: 20px;
            left: -20px;
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: 0;
            z-index: 11;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .tool-card-main:hover .card-header-hover {
            left: 20px;
            opacity: 1;
        }

        /* 插图容器 */
        .illustration-box {
            position: absolute;
            right: -60px;
            bottom: -60px;
            height: 110px;
            opacity: 0;
            transform: scale(0.6) rotate(15deg);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 5;
            pointer-events: none;
        }

        .tool-card-main:hover {
            border-color: var(--gray-400);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
        
        /* 卡片专属颜色 */
        .card-create { background: radial-gradient(circle at 100% 0%, rgba(250, 204, 21, 0.15) 0%, #ffffff 80%); }
        .card-create:hover { background: #ffffff; }
        .card-avatar { background: radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.1) 0%, #ffffff 80%); }
        .card-product { background: radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.1) 0%, #ffffff 80%); }

        .tool-card-main:hover .illustration-box {
            right: 0px;
            bottom: 0px;
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        /* --- 小格工具动效 --- */
        .sub-tool-card {
            background: #ffffff;
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 16px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .sub-tool-card:hover { 
            border-color: var(--gray-400); 
            background-color: var(--gray-50);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .sub-card-content { display: flex; align-items: center; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        .sub-tool-card:hover .sub-card-content { transform: translateX(-12px); }
        .sub-card-icon { margin-right: 12px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        .sub-tool-card:hover .sub-card-icon { opacity: 0; transform: scale(0.8); }
        .sub-card-arrow { position: absolute; right: -24px; opacity: 0; color: var(--gray-900); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        .sub-tool-card:hover .sub-card-arrow { right: 16px; opacity: 1; }

        /* 滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--gray-100);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--gray-300);
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }

        /* 弹窗样式 */
        .modal-overlay {
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-content {
            background: #ffffff;
            border: 1px solid var(--gray-200);
        }

        /* Toast 样式 */
        .toast {
            background: var(--gray-900);
            color: #fff;
        }

        .toast-success {
            background: #22c55e !important;
        }

        .toast-error {
            background: #ef4444 !important;
        }

        .toast-warning {
            background: #f59e0b !important;
        }

        /* 按钮样式 */
        .btn-primary {
            background: var(--black);
            color: #fff;
            transition: all 0.2s;
        }
        
        .btn-primary:hover {
            background: var(--gray-800);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .btn-yellow {
            background: var(--primary);
            color: var(--black);
            transition: all 0.2s;
        }
        
        .btn-yellow:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        /* 上传区域 */
        .upload-area {
            border: 2px dashed var(--gray-300);
            background: var(--gray-50);
            transition: all 0.2s;
        }
        
        .upload-area:hover {
            border-color: var(--black);
            background: var(--gray-100);
        }
        
        .upload-area.dragover {
            border-color: var(--primary);
            background: rgba(250, 204, 21, 0.1);
        }

        /* 图片卡片删除按钮位置调整 */
        .image-card .top-2 {
            top: -0.5rem;
        }
        .image-card .right-2 {
            right: -0.5rem;
        }

        /* 图片列表拖拽样式 */
        #modalImageList {
            position: relative;
            min-height: 200px;
        }
        
        #modalImageList.dragover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(250, 204, 21, 0.1);
            border: 2px dashed var(--primary);
            border-radius: 12px;
            z-index: 10;
            pointer-events: none;
        }
        
        #modalImageList.dragover::after {
            content: '释放以添加图片';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--black);
            color: var(--primary);
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: bold;
            z-index: 11;
            pointer-events: none;
        }

        /* 输入框样式 */
        input[type="text"], input[type="number"], select {
            background: #ffffff;
            border: 1px solid var(--gray-200);
            color: var(--gray-900);
            transition: all 0.2s;
        }
        
        input[type="text"]:focus, input[type="number"]:focus, select:focus {
            outline: none;
            border-color: var(--black);
            box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
        }

        /* 图片卡片 */
        .image-card {
            background: #ffffff;
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            transition: all 0.2s;
        }
        
        .image-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        /* 标签样式 */
        .tag {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 700;
        }
        
        .tag-green {
            background: #dcfce7;
            color: #166534;
        }
        
        .tag-yellow {
            background: #fef3c7;
            color: #92400e;
        }
        
        .tag-blue {
            background: #dbeafe;
            color: #1e40af;
        }
        
        .tag-gray {
            background: var(--gray-100);
            color: var(--gray-600);
        }

        /* 加载动画 */
        .loading-overlay {
            background: rgba(255,255,255,0.9);
        }

        /* PC端固定header高度 */
        header{
            height: 72px !important;
            min-height: 72px !important;
            max-height: 72px !important;
        }

        /* 响应式 */
        @media (max-width: 1024px) {
            /* 移动端优化 */
            .tool-card-main {
                height: 120px;
            }
            
            .card-header-init {
                top: 12px;
                left: 12px;
                gap: 8px;
            }
            
            .init-icon-box {
                width: 20px;
                height: 20px;
                font-size: 20px;
                margin-bottom: 16px;
            }
            
            /* 搜索框优化 */
            #searchInput {
                padding-right: 100px;
            }
            
            /* 导航栏文字调整 */
            .nav-tag {
                padding: 3px 8px;
                font-size: 11px;
            }
        }
        
        @media (max-width: 640px) {
            /* 更小屏幕的优化 */
            .tool-card-main {
                height: 100px;
            }
            
            .card-header-init span {
                font-size: 12px;
            }
            
            .card-header-init p {
                font-size: 10px;
            }

            /* 移动端强制 header padding */
            header.flex.items-center.justify-between.px-4.lg\\:px-8.py-4 {
                padding: 0 16px !important;
                height: 72px;
            }

            /* 移动端移除头像链接的 padding */
            #userInfo a.flex.items-center.hover\\:bg-gray-100.p-2.rounded-xl {
                padding: 0 !important;
            }
        }