/* --- 顶部导航 --- */
    .top-nav { background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
    .nav-brand { font-size: 20px; font-weight: 700; color: var(--primary-color); text-decoration: none; display: flex; align-items: center; transition: var(--transition); }
    .nav-brand:hover { opacity: 0.8; }
    .nav-brand i { margin-right: 10px; font-size: 22px; }
    .nav-stats { display: flex; gap: 35px; }
    
    /* --- 统计与容器 --- */
    .stat-item { text-align: center; }
    .stat-value { font-size: 18px; font-weight: 700; color: var(--dark); }
    .stat-label { font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
    .main-container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }

    /* --- 筛选栏样式 --- */
    .filter-bar {
        background: linear-gradient(135deg, #f5f3ff 0%, #f0f4ff 100%);
        border-radius: 12px;
        padding: 8px;
        margin-bottom: 15px;
    }
    .filter-container { max-width: 1200px; margin: 0 auto; padding: 0 ; }
    .filter-tabs {
        display: flex;
        gap: 5px;
        background: rgba(255, 255, 255, 0.8);
        padding: 4px;
        border-radius: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    .filter-tab {
        padding: 10px 18px;
        border-radius: 8px;
        background: transparent;
        border: none;
        color: var(--gray);
        cursor: pointer;
        transition: var(--transition);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }
    .filter-tab:hover { color: var(--primary-color); }
    .filter-tab.active {
        background: var(--white);
        color: var(--primary-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }
    .filter-tab i { font-size: 12px; }

    /* --- 状态筛选样式  --- */
    .status-filter-tabs {
        display: flex;
        gap: 5px;
        background: rgba(255, 255, 255, 0.8);
        padding: 4px;
        border-radius: 10px;
        flex-wrap: wrap;
    }
    .status-filter-tab {
        padding: 10px 18px;
        border-radius: 8px;
        background: transparent;
        border: none;
        color: var(--gray);
        cursor: pointer;
        transition: var(--transition);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }
    .status-filter-tab:hover { color: var(--primary-color); }
    .status-filter-tab.active {
        background: var(--white);
        color: var(--primary-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }
    .status-filter-tab .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 1px;
    }
    .status-filter-tab.online .status-dot { background: #059669; }
    .status-filter-tab.maintenance .status-dot { background: #D97706; }
    .status-filter-tab.offline .status-dot { background: #DC2626; }

    .project-logo-enhanced { width: 40px; height: 40px; border-radius: 8px; margin-right: 15px; margin-left: 8px; object-fit: cover; border: 1px solid #e4e6eb; box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex-shrink: 0; }

    .sort-dropdown { position: relative; }
    .sort-button { background: var(--white); border: 1px solid #e0e6ed; padding: 10px 18px; border-radius: 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--dark); transition: var(--transition); }
    .sort-button:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
    .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-bottom: 30px; }
    .task-card { background: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; color: inherit; border: 1px solid rgba(0,0,0,0.05); position: relative; text-decoration: none !important; }
    .task-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-color: rgba(79, 70, 229, 0.2); text-decoration: none !important; color: inherit; }
    .task-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); opacity: 0; transition: opacity 0.3s ease; }
    .task-card:hover::before { opacity: 1; }
    .task-card-header { padding: 8px 18px 1px 18px;  background: #fff; }
    .task-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 5px; }
    .task-category { display: inline-flex; align-items: center; gap: 6px; 
    /*background: linear-gradient(135deg, #16A085, #27AE60);*/
    /*background:linear-gradient(135deg, #4a148c 0%, #6a1b9a 50%, #1e1e1edb 100%);*/
    background: #d33939;
color: var(--white); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
    .task-difficulty { display: flex; gap: 2px; }
    .difficulty-star { color: #FCD34D; font-size: 12px; }
    .task-title { background:#f2f5ff;border-radius: 8px;padding: 4px;font-size: 16px; font-weight: 700; color:#454e59; margin-bottom: 4px; line-height: 1.4; display: flex; align-items: center;  border: 1px solid rgb(45 0 212 / 15%); }
    .task-description { font-size: 12px; color: var(--gray); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .task-card-body { padding: 14px 18px 1px 18px; /* 上 右 下 左 */ }
    .pricing-section { background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; border: 1px solid rgba(79, 70, 229, 0.15); }
    .pricing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .pricing-title { font-size: 12px; color: var(--gray); font-weight: 600; }
    .pricing-badge { background: var(--success-color); color: var(--white); padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; animation: pulse 2s infinite; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); } }
    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .price-item { text-align: center; background: var(--white); padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); transition: var(--transition); }
    .price-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.06); }
    .price-label { font-size: 10px; color: var(--gray); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .price-value { font-size: 16px; font-weight: 800; color: var(--dark); line-height: 1; }
    .price-value .currency { font-size: 13px; font-weight: 500; color: var(--gray); }
    .price-value.highlight { color: var(--success-color); font-size: 18px; text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2); }
    
    


/* 上架中状态：标签为蓝色 */
.status-online1 .task-status-tag {
    background: var(--blue-color);
    color: var(--blue);
}

/* 维护中状态：标签为红色 */
.status-maintenance1 .task-status-tag {
    background: var(--red-color);
    color: var(--red);
}

/* 已下架状态：标签为灰色 */
.status-offline1 .task-status-tag {
    background: var(--hui-color);
    color: var(--hui);
}



    .task-tags { display: flex; flex-wrap: wrap; gap: 6px;  }
    .task-tag { background: var(--blue-color); color: var(--blue); padding: 2px 6px; border-radius: 16px; font-size: 11px; display: flex; align-items: center; gap: 4px; transition: var(--transition); }
    .task-tag:hover { background: #e5e7eb; color: var(--dark); }
    .task-tag i { font-size: 8px; }
    .task-stats { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--light); }
    .task-stat { text-align: center; flex: 1; }
    .task-stat-value { font-size: 14px; font-weight: 700; color: var(--dark); }
    .task-stat-label { font-size: 9px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
    .task-actions { padding: 10px 18px; background: #fff; display: flex; gap: 10px; }
    .btn-primary-custom { flex: 1; background: #059669; color: var(--white); border: none; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-align: center; text-decoration: none; position: relative; overflow: hidden; }
    .btn-primary-custom::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; }
    .btn-primary-custom:hover::before { width: 300px; height: 300px; }
    .btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(79, 70, 229, 0.35); text-decoration: none; color: var(--white); }
    .btn-secondary-custom { background: var(--white); color: var(--gray); border: 1px solid #e0e6ed; padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: var(--transition); text-align: center; text-decoration: none; width: 40px; }
    .btn-secondary-custom:hover { background: #f3f4f6; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); text-decoration: none; color: var(--dark); }
    .empty-state { text-align: center; padding: 60px 20px; background: var(--white); border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .empty-icon { font-size: 42px; color: #D1D5DB; margin-bottom: 16px; }
    .empty-title { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
    .empty-text { color: var(--gray); font-size: 13px; }
    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        margin-left: 6px;
    }
    /*.status-online { background-color: #f2f5ff; color: #f2f5ff; }*/
    /*.status-maintenance { background-color: #f2f5ff; color: #f2f5ff; }*/
    /*.status-offline {background-color: #f2f5ff; color: #f2f5ff;  }*/
    /*这里是三种状态颜色区别的样式 上面是和背景同色不显示的*/
    .status-online { background-color: #28a745; color: white; }
    .status-maintenance { background-color: #ffc107; color: #212529; }
    .status-offline { background-color: #dc3545; color: white; }

    @media (pointer: coarse), (max-width: 880px) {
        .main-container { padding: 10px; }
        .nav-stats { display: none; }
        .filter-bar { padding: 12px; }
        .filter-tabs, .status-filter-tabs { width: 100%; padding: 8px; gap: 6px; }
        .filter-tab, .status-filter-tab { padding: 8px 12px; font-size: 13px; }
        .sort-button { width: 100%; justify-content: center; margin-top: 8px; padding: 8px; }
        .task-grid { grid-template-columns: 1fr; gap: 12px; }
        .task-card { border-radius: 10px; }
        .task-card-header { padding: 12px 15px; }
        .task-card-body { padding: 0 15px 1px 15px; }
        .task-title { font-size: 15px; margin-bottom: 4px; border:1px solid rgb(45 0 212 / 15%);}
        .task-description { font-size: 12px; -webkit-line-clamp: 2; }
        .task-meta { margin-top: 8px; }
        .task-category { padding: 3px 8px; font-size: 11px; }
        .difficulty-star { font-size: 11px; }
        .pricing-section { padding: 10px 15px; margin-bottom: 10px; }
        .pricing-header { margin-bottom: 8px; }
        .pricing-title { font-size: 11px; }
        .pricing-badge { font-size: 9px; padding: 2px 6px; }
        .price-grid { gap: 8px; }
        .price-item { padding: 8px 5px; }
        .price-label { font-size: 9px; margin-bottom: 3px; }
        .price-value { font-size: 16px; }
        .price-value.highlight { font-size: 18px; }
        .price-value .currency { font-size: 11px; }
        .task-tags { gap: 6px; }
        .task-tag { padding: 2px 6px; font-size: 11px;font-weight: 500; }
        .task-tag i { font-size: 8px; }
        .task-stats { display: flex; justify-content: space-around; padding: 8px 0 5px 0; border-top: 1px solid var(--light); }
        .task-stat { text-align: center; }
        .task-stat-value { font-size: 14px; }
        .task-stat-label { font-size: 9px; }
        .task-actions { padding: 10px 15px; gap: 8px; }
        .btn-primary-custom, .btn-secondary-custom { padding: 10px; font-size: 13px; }
        .btn-secondary-custom { padding: 10px; width: 40px; }
    }