/* ================================================================
   AI 模型推荐页专属（ai-tools.html）
   源：pages.css（原第 1137-1458 行区间内容，按需拆分）
   ================================================================ */

.ai-intro {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-24);
    align-items: center;
    padding: var(--space-28);
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
}
.ai-intro-badge {
    margin-bottom: var(--space-12);
}

.ai-intro-text p { margin-bottom: var(--space-16);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
/* 模型标签云 */
.ai-model-cloud {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--space-10);
    min-height: 190px;
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px dashed rgba(93, 151, 67, 0.30);
    background:
        radial-gradient(circle at 30% 25%, rgba(93, 151, 67, 0.10), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(93, 151, 67, 0.08), transparent 55%),
        rgba(255, 255, 255, 0.6);
}
.ai-model-tag {
    padding: var(--space-6) var(--space-16);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(93, 151, 67, 0.22);
    background: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    animation: aiTagFloat 4.2s ease-in-out infinite;
}
.ai-model-tag:nth-child(2n)  { animation-delay: 0.6s; }
.ai-model-tag:nth-child(3n)  { animation-delay: 1.3s; }
.ai-model-tag:nth-child(4n)  { animation-delay: 2.1s; }
.ai-model-tag:nth-child(5n)  { animation-delay: 2.8s; }
@keyframes aiTagFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
.ai-model-tag:hover {
    transform: translateY(-3px) scale(1.06);
    border-color: var(--primary-color);
    color: var(--primary-dark);
    box-shadow: 0 6px 16px rgba(93, 151, 67, 0.20);
    animation-play-state: paused;
}
/* 核心功能：首卡加宽的混排网格 */
.ai-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}
.ai-feature {
    display: flex; gap: var(--space-12);
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.ai-feature--lead {
    grid-column: span 3;
    flex-direction: row;
    align-items: center; gap: var(--space-20);
    background:
        linear-gradient(120deg, rgba(93, 151, 67, 0.10), rgba(255, 255, 255, 0.85) 55%);
    border-color: rgba(93, 151, 67, 0.25);
}
.ai-feature--lead .ai-feature-icon {
    width: 74px;
    height: 74px;
    font-size: var(--fs-32);
}
.ai-feature--lead h3 {
    font-size: var(--fs-18);
}
.ai-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ai-feature-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-12);
    font-size: var(--fs-22);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
    transition: transform var(--transition-normal);
}
.ai-feature:hover .ai-feature-icon {
    transform: scale(1.12) rotate(-8deg);
}
.ai-feature h3 {
    margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ai-feature p {
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
/* 模型卡片 */
.ai-model-card {
    position: relative;
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ai-model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ai-model-rank {
    position: absolute;
    top: var(--space-12);
    right: var(--space-16);
    font-size: var(--fs-26);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
    transition: transform var(--transition-normal);
}
.ai-model-card:hover .ai-model-rank {
    transform: scale(1.25) rotate(10deg);
}
.ai-model-card h3 {
    margin-bottom: var(--space-8); padding-right: 44px;
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-primary);
}
.ai-model-card p {
    margin-bottom: var(--space-12);
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
/* 适用场景：错落 chip 墙 */
.ai-scenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}
.ai-scene {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.ai-scene:nth-child(3n+2) {
    transform: translateY(10px);
}
.ai-scene:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ai-scene:nth-child(3n+2):hover {
    transform: translateY(6px);
}
.ai-scene-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-10);
    border-radius: var(--radius-12);
    font-size: var(--fs-20);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}
.ai-scene h3 {
    margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ai-scene p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .ai-intro {
        grid-template-columns: 1fr;
    }

    .ai-features,
    .ai-scenes {
        grid-template-columns: 1fr;
    }

    .ai-feature--lead {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-scene:nth-child(3n+2) {
        transform: none;
    }

    .ai-scene:nth-child(3n+2):hover {
        transform: translateY(-4px);
    }
}
/* ================================================================
   Guide 页共享（速查 / 对比 / 技巧类页面）— 规则已拆分到 pages-guide.css
   ================================================================ */