/* 帮助页面样式 - 使用设计令牌 */

/* 容器样式由 common.css 提供，无需重复定义 */

.card { 
    background: white; 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-md); 
    margin-bottom: var(--space-lg); 
}

.card-header { 
    padding: var(--space-lg); 
    border-bottom: var(--border-width-thin) solid var(--gray-200); 
    font-size: var(--text-lg); 
    font-weight: var(--font-semibold); 
}

.card-body { 
    padding: var(--space-lg); 
}

.help-nav { 
    display: flex; 
    gap: var(--space-sm); 
    margin-bottom: var(--space-lg); 
    flex-wrap: wrap;
}

.help-nav a { 
    padding: var(--space-sm) var(--space-lg); 
    background: var(--gray-50); 
    border: var(--border-width-thin) solid var(--gray-300); 
    border-radius: var(--radius-sm); 
    text-decoration: none; 
    color: var(--gray-600); 
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.help-nav a:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.help-nav a.active { 
    background: var(--info); 
    color: white; 
    border-color: var(--info); 
}

.help-content h3 { 
    color: var(--primary); 
    margin: var(--space-lg) 0 var(--space-sm) 0; 
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

.help-content h4 { 
    color: var(--primary-light); 
    margin: var(--space-md) 0 var(--space-sm) 0; 
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

.help-content p { 
    margin: var(--space-sm) 0; 
    line-height: 1.6; 
    color: var(--gray-700);
    font-size: var(--text-sm);
}

.help-content ul { 
    margin: var(--space-sm) 0; 
    padding-left: var(--space-lg); 
}

.help-content li { 
    margin: var(--space-xs) 0; 
    color: var(--gray-700);
    line-height: 1.6;
}

.help-content li.sub-task {
    margin-left: var(--space-lg);
}

.feature-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: var(--space-lg); 
    margin: var(--space-lg) 0; 
}

.feature-card { 
    background: var(--gray-50); 
    padding: var(--space-lg); 
    border-radius: var(--radius-md); 
    border-left: var(--border-width-thick) solid var(--info); 
    transition: all var(--transition-fast);
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature-card h4 { 
    margin-top: 0; 
    color: var(--primary); 
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

/* 响应式设计 */
@media (max-width: var(--breakpoint-md)) {
    /* 容器响应式由 common.css 提供 */
    
    .help-nav {
        flex-direction: column;
    }
    
    .help-nav a {
        text-align: center;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}