   :root {
            theme-url: url('/wp-content/themesr');
                    }
                    .date-tag-item {
                display: inline-block;
                padding: 6px 16px;
                background-color: #f8f9fa;
                color: #495057;
                border: 1px solid #dee2e6;
                border-radius: 20px; /* 胶囊形状 */
                font-size: 14px;
                text-decoration: none;
                transition: all 0.3s ease;
            }
            
            .date-tag-item:hover {
                background-color: #007bff;
                color: #fff;
                border-color: #007bff;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,123,255,0.2);
            }
            
            .active-date {
                background-color: #007bff;
                color: #fff;
                border-color: #007bff;
                font-weight: bold;
            }
            .price-tag {
                background: #ffec3d; /* 亮黄色背景 */
                color: #000;         /* 黑色文字对比 */
                padding: 2px 8px;
                border-radius: 4px;
                margin-left: 5px;
                box-shadow: 2px 2px 0px #000; /* 硬阴影风格 */
                border: 2px solid #000;
            }
            
            
              .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
    .features-grid { display: grid; grid-template-columns: repeat(2, 2fr); gap: 30px; }
    .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .domain-showcase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }

    /* --- FAQ 模块专属样式 --- */
    .faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 20px; }
    .faq-item { background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #eef2f7; }
    .faq-item h4 { color: #1e4d7c; margin-bottom: 12px; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
    .faq-item p { color: #64748b; font-size: 0.95rem; line-height: 1.6; }

    @media (max-width: 768px) {
        .container { padding: 0 20px !important; width: auto !important; }
        section.hero { padding: 50px 0 30px !important; min-height: auto !important; }
        section.hero h1 { font-size: 1.6rem !important; line-height: 1.4; margin-bottom: 15px; }

        .faq-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
        .faq-item { text-align: center; padding: 20px !important; }

        .consult-modal .modal-content {
            width: 90% !important; 
            padding: 30px 15px !important;
            border-radius: 20px !important;
            box-sizing: border-box;
        }
        
        .hero-buttons .btn-large, 
        .consult-modal .btn-primary,
        .btn-large { 
            width: 100% !important; 
            display: flex !important; 
            justify-content: center !important; 
            align-items: center !important;     
            padding: 16px !important; 
            font-size: 1.1rem !important;
            box-sizing: border-box !important;
            text-align: center;
        }
        
        .btn-content { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 8px; 
        }

        .features-grid { 
            grid-template-columns: 1fr !important; 
            gap: 20px !important; 
        }
        .feature-card { 
            text-align: center; 
            padding: 25px !important; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        }

        .process-steps { 
            display: flex !important; 
            flex-direction: column !important; 
            gap: 30px !important; 
        }
        .process-steps .step { 
            width: 100% !important; 
            text-align: center; 
            padding: 0 10px 20px;
            border-bottom: 1px dashed #e2e8f0; 
        }
        .process-steps .step:last-child { border-bottom: none; }

        .domain-showcase-grid {
            grid-template-columns: repeat(2, 1fr) !important; 
            gap: 12px !important;
        }
        .domain-showcase-name { font-size: 0.95rem !important; font-weight: bold; }
        .domain-platform-tag { font-size: 0.75rem !important; }

        .showcase-filter {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            padding-bottom: 10px;
            -webkit-overflow-scrolling: touch;
            justify-content: flex-start !important;
        }
        .filter-btn { flex: 0 0 auto; margin-right: 10px; font-size: 0.85rem !important; }

        .trust-badge { 
            flex-direction: column; 
            gap: 12px; 
            background: rgba(255,255,255,0.6); 
            padding: 15px; 
            border-radius: 12px;
            margin-top: 25px !important;
        }
    }
    
.consult-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    z-index: 9999;
    justify-content: center; 
    align-items: center;     
    padding: 20px;           
}

.consult-modal.active {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    width: 100%;             
    max-width: 450px;        
    box-sizing: border-box;  
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
}

/* 1. 外层大容器：缩窄宽度，PC端两边留白更多 */
.home-random-tools {
    max-width: 960px; /* 3列布局下，960px 是最舒适的宽度 */
    margin: 60px auto !important; 
    padding: 0 20px;
}

/* 2. 网格核心逻辑 */
.home-tool-grid {
    display: grid;
    /* 默认移动端：1列 */
    grid-template-columns: 1fr; 
    gap: 15px; /* 稍微缩小间距，保持精致感 */
}

/* 3. 平板端适配：2列 */
@media (min-width: 640px) {
    .home-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4. PC端适配：锁定 3 列，刚好三行 9 个 */
@media (min-width: 1024px) {
    .home-tool-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* 5. 卡片样式微调 */
.home-tool-card {
    display: flex;
    flex-direction: row; /* 保持图标在左，文字在右 */
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

/* 悬停动效保持 */
.home-tool-card:hover {
    border-color: #007bff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.08);
}

/* 这里的图标稍微缩小一点点，适配三列布局 */
.tool-card-icon {
    width: 42px;
    height: 42px;
    background: #f0f7ff;
    color: #007bff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 12px;
    flex-shrink: 0;
}

.home-tool-card h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
}

.home-tool-card p {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

